详解XMLHttpRequest(一)同步请求和异步请求

XMLHttpRequest
让发送一个HTTP请求变得非常容易。你只需要简单的创建一个请求对象实例,打开一个URL,然后发送这个请求。当传输完毕后,结果的HTTP状态以及返回的响应内容也可以从请求对象中获取。 

本文主要参考:MDN
XMLHttpRequest
让发送一个HTTP请求变得非常容易。你只需要简单的创建一个请求对象实例,打开一个URL,然后发送这个请求。当传输完毕后,结果的HTTP状态以及返回的响应内容也可以从请求对象中获取。

<h3>XMLHttpRequest发送请求</h3>

open(method,url,async);

一、XMLHttpRequest的方法

方法 描述
abort()                                                                                          停止当前请求
getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header") 返回指定首部的串值
open("method","url) 建立对服务器的调用。Method参数可以是GET、POST或PUT。URL参数可以是相对URL或绝对URL
send(content) 向服务器发送请求
setRequestHeader("header","value") 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()方法

通过XMLHttpRequest生成的请求可以有两种方式来获取数据,异步模式或同步模式。请求的类型是由这个XMLHttpRequest对象的open()方法的第三个参数async的值决定的。如果该参数的值为false,则该XMLHttpRequest请求以同步模式进行,否则该过程将以异步模式完成。

通过XMLHttpRequest生成的请求可以有两种方式来获取数据,异步模式或同步模式。请求的类型是由这个XMLHttpRequest对象的open()方法的第三个参数async的值决定的。如果该参数的值为false,则该XMLHttpRequest请求以同步模式进行,否则该过程将以异步模式完成。

  • open(method,url,async)
  • send(string)

send(string);

二、XMLHttpRequest的属性

属性 描述
onreadystatechange 每个状态改变都会触发这个事件处理器,通常会调用一个JavaScript函数
readyState 请求的状态,有5个可取值:0=未初始化、1=正在加载、2=已经加载、3=交互中、4=完成。
responseText 服务器的响应,表示为一个串
responseXML 服务器的响应,表示为XML。这个对象可以解析为DOM对象
status   服务器的HTTP状态码(200对应OK、404对应NOtFont等)
statusText HTTP状态码的相应文本(OK或NotFount)  

两种通信模式:同步和异步请求: 

两种通信模式:同步和异步请求:
同步请求
主线程中的同步请求会阻塞页面,由于对用户体验的糟糕效果,部分最新浏览器在主线程上的同步请求已经被弃用。在极少数情况下,使用同步模式的XMLHttpRequests会比使用异步模式更适合。


request.open(“GET”,”get.php”,true);

request.send();

request.open(“POST”,”post.php”,true);

request.setRequestHeader(“Content-type”,”application/x-www-form-unlencoded”);//设置头信息,写在中间

request.send(“name=Judy&sex=female”);

①、onreadystatechange

  • 该事件处理函数由服务器触发,而不是用户
  • 在Ajax执行过程中,服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest对象的readyState
    来实现。改变readyState属性是服务器对客户端连接操作的一种方式。每次readyState属性的改变都会触发onreadystatechange事件

同步请求  主线程中的同步请求会阻塞页面,由于对用户体验的糟糕效果,部分最新浏览器在主线程上的同步请求已经被弃用。在极少数情况下,使用同步模式的XMLHttpRequests会比使用异步模式更适合。

  1. 在Worker中使用XMLHttpRequest时,同步请求比异步请求更适合。
    主页中代码:

    <script type="text/javascript">
      var oMyWorker = new Worker("myTask.js");  
      oMyWorker.onmessage = function(oEvent) {  
        alert("Worker said: " + oEvent.data);
      };
      oMyWorker.postMessage("Hello");
    </script>
    myFile.txt ( XMLHttpRequest对象同步请求的文件):
    Hello World!!
    

    包含了Worker代码:myTask.js

    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了解更多详情

  2. 不得不使用同步请求的情况
    在少数情况下,只能使用同步模式的XMLHttpRequest请求.比如在
    window.onunload和window.onbeforeunload
    事件处理函数中。在页面unload事件处理函数中使用异步的XMLHttpRequest会引发这样的问题:当响应返回之后,页面已经不复存在,所有变量和回调函数也已经销毁.结果只能引起一个错误
    ,“函数未定义”。解决办法是在这里使用同步模式的请求,这样的话,当请求完成之前,页面不会被关闭.

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

    异步请求
    使用异步模式的话,当数据完全请求回来以后,会执行一个指定的回调函数,
    在执行请求的同时,浏览器可以正常的执行其他事务的处理。

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

    function loadFile (sURL, timeout, fCallback /*, 传入参数1, 传入参数2, 等 */) {
      var aPassArgs = Array.prototype.slice.call(arguments, 3), 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);
    }
    

    loadFile函数的用法:

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

    第1行定义一个函数,当文件读取完毕后,fCallback函数会以第3个参数以后的所有参数为自己的参数来被调用.
    第3行使用一个超时设置,来避免你的代码为了等候读取请求的返回数据长时间执行,通过为XMLHttpRequest对象的timeout
    属性赋值来指定
    第6行为onreadystatechange事件句柄指定了回调函数,函数在每次执行时,检查请求是否结束(请求状态为4),如果是的话,判断请求是否成功(HTTP状态吗是否为200),如果是的话,输出页面源码,如果请求出现了错误,输出错误信息.
    第15行指定第三个参数为true,表示该请求应该以异步模式执行.

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

    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);
    }
    

<h3>XMLHttpRequest取得响应</h3>

取得响应:

图片 1

图片 2

var request = new XMLHttpRequest();

request.open(“GET”,”get.php”,ture);

request.send();

request.onreadystatechange = function(){

if(request.readyState ===4&& request.status===200)

//执行一些事情request.responseText

} }

②、send(data)

  • 若选用的是GET请求,则不会发送任何数据,给send方法传递null即可

 1.在Worker中使用XMLHttpRequest时,同步请求比异步请求更适合。
 主页中代码:

  • responseText : 获得字符串形式的响应数据
  • responseXML : 获得XML形式的响应数据
  • status和statusText : 以数字和文本形式返回HTTP状态码
  • getAllResponseHeader() : 获取所有的响应报头
  • getResponseHeader() : 查询响应中的某个字段的值

③、setRequestHeader(header,value)

  • 如果用POST请求向服务器发送数据,需要将“Content-type”设置为“application/x-www-form-urlencoded”.它会告知服务器正在发送数据,并且数据已经符合URL编码了。
  • 该方法必须在open()之后才能使用
 <script type="text/javascript">
 var oMyWorker = new Worker("myTask.js"); 
 oMyWorker.onmessage = function(oEvent) { 
  alert("Worker said: " + oEvent.data);
 };
 oMyWorker.postMessage("Hello");
</script>
myFile.txt ( XMLHttpRequest对象同步请求的文件):
Hello World!! 

④、responseText

  • XMLHttpRequest的responseText
    属性包含了从服务器发送的数据。它是一个HTML,XM或普通文本,这取决于服务器发送的内容。
  • 当readyState属性变为4时,responseText属性才可用,表明Ajax请求已经结束

包含了Worker代码:myTask.js

<h3>监听readyState属性</h3>

Demo

  • 检索helloAjax.txt文档中的内容

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>





    HelloAjax

 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);
 }
}; 

0 : 请求未初始化,open还没有调用
1 : 服务器连接已建立,open已经调用了
2 : 请求已接收,也就是接收到头信息了
3 : 请求处理中,也就是接收到响应主体了
4 : 请求已完成,且响应已就绪,也就是响应完成了

注意: 由于使用了Worker,所以该请求实际上也是异步的.
 可以使用类似的方法,让脚本在后台与服务器交互,预加载某些内容.查看使用web
workers了解更多详情

var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange = function(){
    if(request.readyState === 4 && request.status === 200){
        //做一些事情 request.requestText
    }
}

 2.不得不使用同步请求的情况
 在少数情况下,只能使用同步模式的XMLHttpRequest请求.比如在
window.onunload和window.onbeforeunload
事件处理函数中。在页面unload事件处理函数中使用异步的XMLHttpRequest会引发这样的问题:当响应返回之后,页面已经不复存在,所有变量和回调函数也已经销毁.结果只能引起一个错误
,“函数未定义”。解决办法是在这里使用同步模式的请求,这样的话,当请求完成之前,页面不会被关闭.

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

异步请求
 使用异步模式的话,当数据完全请求回来以后,会执行一个指定的回调函数,
在执行请求的同时,浏览器可以正常的执行其他事务的处理。 

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

 function loadFile (sURL, timeout, fCallback /*, 传入参数1, 传入参数2, 等 */) {
 var aPassArgs = Array.prototype.slice.call(arguments, 3), 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);
} 

loadFile函数的用法:

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

第1行定义一个函数,当文件读取完毕后,fCallback函数会以第3个参数以后的所有参数为自己的参数来被调用.
第3行使用一个超时设置,来避免你的代码为了等候读取请求的返回数据长时间执行,通过为XMLHttpRequest对象的timeout
属性赋值来指定
 第6行为onreadystatechange事件句柄指定了回调函数,函数在每次执行时,检查请求是否结束(请求状态为4),如果是的话,判断请求是否成功(HTTP状态吗是否为200),如果是的话,输出页面源码,如果请求出现了错误,输出错误信息.
 第15行指定第三个参数为true,表示该请求应该以异步模式执行.

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

 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);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • Ajax核心XMLHttpRequest总结
  • 浅谈jQuery异步对象(XMLHttpRequest)
  • 如何用ajax来创建一个XMLHttpRequest对象
  • AJax
    学习笔记一(XMLHTTPRequest对象)
  • XMLHttpRequest对象_Ajax异步请求重点(推荐)

相关文章