mozilla
您的搜索结果

    同步和异步请求

    XMLHttpRequest支持同步和异步两种通信模式.

    注意: 通常情况下,你不应该使用同步模式的XMLHttpRequests,原因是,网络通信本来就是异步执行的,如果使用同步请求,很有可能会造成多种内存与事件泄漏的情况.

    在Firefox 3之前的版本中, 同步模式的XMLHttpRequest请求会阻塞用户界面. 为了能让用户有机会手动结束掉这个长时间执行的请求, Firefox 3改善了这一行为.

    同步请求

    在极少数情况下,使用同步模式的XMLHttpRequests会比使用异步模式更适合.

    例子: HTTP 同步请求

    这个例子演示了如何进行一个简单的同步请求.

    var request = new XMLHttpRequest();
    request.open('GET', 'http://www.mozilla.org/', false); 
    request.send(null);
    if (request.status === 200) {
      console.log(request.responseText);
    }
    

    第一行实例化一个XMLHttpRequest对象.第二行使用该对象打开一个HTTP请求,并指定使用HTTP GET方法来获取Mozilla.org主页内容,操作模式为同步.

    第三行发送这个请求.参数为null表示GET请求不需要请求实体.

    第四行为请求结束之后,检查请求状态码.如果状态码为200, 表示该请求成功,请求到的页面源文件会输出到控制台上.

    例子: 在 Worker 中使用HTTP 同步请求

    Worker中使用XMLHttpRequest时,同步请求比异步请求更适合.

    example.html (主页):

    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>MDN Example</title>
    <script type="text/javascript">
      var oMyWorker = new Worker("myTask.js");  
      oMyWorker.onmessage = function(oEvent) {  
        alert("Worker said: " + oEvent.data);
      };
    
      oMyWorker.postMessage("Hello");
    </script>
    </head>
    <body></body>
    </html>
    

    myFile.txt ( XMLHttpRequest对象同步请求的文件):

    Hello World!!
    

    myTask.js (包含了Worker代码):

    self.onmessage = function (oEvent) {
      if (oEvent.data === "Hello") {
        var oReq = new XMLHttpRequest();
        oReq.open("GET", "myFile.txt", false);  // 同步请求
        oReq.send(null);
        self.postMessage(oReq.responseText);
      }
    };
    
    注意: 由于使用了Worker,所以该请求实际上也是异步的.

    可以使用类似的方法,让脚本在后台与服务器交互,预加载某些内容.查看使用web workers了解更多详情.

    不得不使用同步请求的情况

    在少数情况下,只能使用同步模式的XMLHttpRequest请求.比如在 window.onunloadwindow.onbeforeunload 事件处理函数中.

    在页面unload事件处理函数中使用异步的XMLHttpRequest会引发这样的问题:当响应返回之后,页面已经不复存在,所有变量和回调函数也已经销毁.结果只能引起一个错误 ,“函数未定义”.

    AsyncUnload.jpg

    解决办法是在这里使用同步模式的请求,这样的话,当请求完成之前,页面不会被关闭.

    window.onbeforeunload = function () {
      var oReq = new XMLHttpRequest();
      oReq.open("GET", "logout.php?nick=" + escape(myName), false);  // 同步请求
      oReq.send(null);
      if (oReq.responseText.trim() !== "已退出"); {  // "已退出"是返回的数据
        return "退出失败,您想手动执行退出吗?";
      }
    };
    

    异步请求

    如果你在扩展中使用XMLHttpRequest,则你应该使用异步模式的请求.使用异步模式的话,当数据完全请求回来以后,会执行一个指定的回调函数, 在执行请求的同时,浏览器会正常的执行其他事务的处理.

    例子: 在控制台输出页面源文件

    这个例子演示了如何进行一个简单的异步请求.

    var oReq = new XMLHttpRequest();
    oReq.open("GET", "http://www.mozilla.org/", true);
    oReq.onreadystatechange = function (oEvent) {
      if (oReq.readyState === 4) {
        if (oReq.status === 200) {
          console.log(oReq.responseText);
        } else {
          console.log("Error", oReq.statusText);
        }
      }
    };
    oReq.send(null); 
    

    第二行中指定第三个参数为true,表示该请求应该以异步模式执行.

    第三行为onreadystatechange事件句柄指定了回调函数,函数在每次执行时,检查请求是否结束(请求状态为4),如果是的话,判断请求是否成功(HTTP状态吗是否为200),如果是的话,输出页面源码,如果请求出现了错误,输出错误信息.

    第十二行发送该请求.onreadystatechange事件句柄指定的回调函数会在每次请求状态发生改变时执行.

    例子: 创建一个标准的方法来读取外部文件

    在一些需求情况下,必须读取多个外部文件. 这是一个标准的函数. 该函数使用XMLHttpRequest对象进行异步请求.而且可以为每个文件读取完成后指定不同的回调函数.

    function loadFile (sURL, fCallback /*, 传入参数1, 传入参数2, 等 */) {
      var aPassArgs = Array.prototype.slice.call(arguments, 2), oReq = new XMLHttpRequest();
      oReq.onreadystatechange = function() {
        if (oReq.readyState === 4) { 
          if (oReq.status === 200) {
            fCallback.apply(oReq, aPassArgs);
          } else {
            console.log("Error", oReq.statusText);
          }
        }
      };
      oReq.open("GET", sURL, true);
      oReq.send(null);
    }
    

    loadFile函数的用法:

    function showMessage (sMsg) {
      alert(sMsg + this.responseText);
    }
    
    loadFile("message.txt", showMessage, "New message!\n");
    

    第一行定义一个函数,当文件读取完毕后,fCallback函数会以第三个参数以后的所有参数为自己的参数来被调用.

    第三行为onreadystatechange事件句柄指定了回调函数,函数在每次执行时,检查请求是否结束(请求状态为4),如果是的话,判断请求是否成功(HTTP状态吗是否为200),如果是的话,输出页面源码,如果请求出现了错误,输出错误信息.

    第十二行指定第三个参数为true,表示该请求应该以异步模式执行.

    第十三行发送该请求.

    例子: 使用超时

    你可以使用一个超时设置,来避免你的代码为了等候读取请求的返回数据长时间执行.超时毫秒数可以通过为XMLHttpRequest对象的timeout 属性赋值来指定:

    function loadFile (sURL, timeout, fCallback /*, 传入参数1, 传入参数2, 等 */) {
      var aPassArgs = Array.prototype.slice.call(arguments, 2), oReq = new XMLHttpRequest();
      oReq.ontimeout = function() {
        console.log("请求超时.");
      }
      oReq.onreadystatechange = function() {
        if (oReq.readyState === 4) { 
          if (oReq.status === 200) {
            fCallback.apply(oReq, aPassArgs);
          } else {
            console.log("Error", oReq.statusText);
          }
        }
      };
      oReq.open("GET", sURL, true);
      oReq.timeout = timeout;
      oReq.send(null);
    }
    

    你还可以为timeout事件的ontimeout事件句柄指定事件处理函数.

    loadFile函数的用法:

    function showMessage (sMsg) {
      alert(sMsg + this.responseText);
    }
    
    loadFile("message.txt", 200, showMessage, "New message!\n");
    

    如上,我们指定的超时时间为200 ms.

    Gecko 12.0 note
    (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9)

    timeout属性添加于Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9).

    例子: 使用异步请求,不使用闭包.

    function switchXHRState() {
      switch (this.readyState) {
        case 0: console.log("还没调用open()方法."); break;
        case 1: console.log("还没调用send()方法."); break;
        case 2: console.log("已经调用send()方法,响应头和响应状态已经返回."); break;
        case 3: console.log("下载中,已经得到部分响应实体."); break;
        case 4: console.log("请求完成!"); this.callback.apply(this, this.arguments);
      }
    };
    
    function loadFile (sURL, fCallback /*, 传入参数1, 传入参数2, 等 */) {
      var oReq = new XMLHttpRequest();
      oReq.callback = fCallback;
      oReq.arguments = Array.prototype.slice.call(arguments, 2);
      oReq.onreadystatechange = switchXHRState;
      oReq.open("GET", sURL, true);
      oReq.send(null);
    }
    

    使用 bind:

    function switchXHRState(fCallback, aArguments) {
      switch (this.readyState) {
        case 0: console.log("还没调用open()方法."); break;
        case 1: console.log("还没调用send()方法."); break;
        case 2: console.log("已经调用send()方法,响应头和响应状态已经返回."); break;
        case 3: console.log("下载中,已经得到部分响应实体."); break;
        case 4: console.log("请求完成!"); fCallback.apply(this, aArguments);
      }
    };
    
    function loadFile (sURL, fCallback /*, 传入参数1, 传入参数2, 等 */) {
      var oReq = new XMLHttpRequest();
      oReq.onreadystatechange = switchXHRState.bind(oReq, fCallback, Array.prototype.slice.call(arguments, 2));
      oReq.open("GET", sURL, true);
      oReq.send(null);
    }
    

    文档标签和贡献者

    Contributors to this page: ziyunfei
    最后编辑者: ziyunfei,