阅读 Javascript 代码时遇到问题答案

【问题标题】：Having trouble reading Javascript code阅读 Javascript 代码时遇到问题
【发布时间】：2011-02-10 23:36:11
【问题描述】：

我是 JS 新手，很难阅读以下 JS 代码。

函数的第一个参数是一个PHP脚本的url，第二个是一个字符串。

让我感到困惑的是如何阅读行后的代码： self.xmlHttpReq.open('POST', strURL, true);

这之后会发生什么？我应该在这一行之后查看哪些代码？剧本？打开后会发生什么？

function check_detail(strURL, pids) 
{
    var xmlHttpReq = false;
    var self = this;
    // Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    self.xmlHttpReq.open('POST', strURL, true);
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    self.xmlHttpReq.onreadystatechange = function() 
    {
        if (self.xmlHttpReq.readyState == 4)
            updatepage(self.xmlHttpReq.responseText, pids);
    }
    self.xmlHttpReq.send(getquery(pids));
}

【问题讨论】：

标签： javascript xmlhttprequest

【解决方案1】：

关键是对“send()”的调用，它实际上启动了 HTTP 请求。这会发生，但代码会立即继续执行，而无需等待结果。

当服务器响应时，浏览器将调用设置为“readystatechange”处理程序的匿名函数。究竟什么时候发生是不可预测的；换句话说，它是异步的。

因此，“updatepage()”调用将在“check_detail()”函数返回很久之后发生。

【讨论】：

【解决方案2】：

当你发出一个 Ajax 请求（这就是你在这里所做的）时，它是异步的，这意味着你不知道它何时返回，所以你不能只是等待返回。

相反，您设置了函数，以便在请求返回时启动一个函数来处理响应。这是onreadystatechange 部分。

所以年表将是：首先会出现send()，它将getquery() 方法的结果发送到PHP 页面。当它返回时，onreadystatechange 中定义的函数将触发，该函数将调用 updatepage() 并将 Ajax 调用返回的文本以及 pids 参数传递给它。

【讨论】：

当 strURL 处的脚本结束执行时， updatepage() 会使用 2 个参数调用：第一个参数是脚本产生的输出，第二个是 pids 参数？我只是对第一个参数是否是 PHP 脚本生成的输出感兴趣。
是的，第一个参数是脚本产生的输出。

【解决方案3】：

如果你是 JavaScript 新手，那么我会说试图弄清楚这里发生了什么是浪费时间 - 你正在学习如何使用 XHR 对象，如何制作跨浏览器，和你正在同时学习 JavaScript。

我建议使用诸如 jQuery 之类的 JavaScript 库来进行 Ajax - 不要在学习 JavaScript 的同时尝试全部学习。

其中大部分可以替换为以下内容：

$.post(strURL, function (data) {
    updatePage(data);
});

【讨论】：

但这与异步回调的工作方式完全相同......这实际上只是一个评论（如果解释了异步操作......）
@pst 我认为尝试理解这一点比尝试理解使用原始 xhr 的混乱要容易得多。

【解决方案4】：

这是一个简单的 Ajax 函数

function check_detail(strURL, pids) 
{
    // definning new variable
    var xmlHttpReq = false;
    // creating variable self which will function as this
    var self = this;

    // creating HTTP request maker for Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.xmlHttpReq = new XMLHttpRequest();
    }
    // creating HTTP request maker in IE
    else if (window.ActiveXObject) {
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // so this is the confusing part right ?
    // xmlHttpReq.open opens connection tu the strURL and infomation sending method
    // will be POST method ( other passible values can be GET method or even else )
    self.xmlHttpReq.open('POST', strURL, true);
    // this defines HTTP request header (small information about what we are sending)
    // in fact this is sending Content-type of information
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    // when HTTP request maker state will be changed for example:
    // the data will be sent or data will be received this function will be fired
    self.xmlHttpReq.onreadystatechange = function() 
    {

        // readyState 4 means data has been received
         if (self.xmlHttpReq.readyState == 4)
            updatepage(self.xmlHttpReq.responseText, pids); // updatepage is user defined function
    }

    // this actually sends the HTTP request which is made above
    // but don't be confused because of this code ordering 
    // I mean the function defining what to do when content will be received is implemented
    // before sending HTTP request right ?
    // thats because if the data is too small and internet is really fast HTTP query can be 
    // executed faster then defining new function which will cause javascript error
    self.xmlHttpReq.send(getquery(pids)); 
}

希望这会有所帮助如果不更多关于 ajax：http://en.wikipedia.org/wiki/Ajax_(programming)

【讨论】：