你的位置:首页 > Java教程

[Java教程]深入理解ajax系列第一篇——XHR对象


×
目录
[1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示

前面的话

  ajax是asynchronous javascript and

 

创建

  ajax技术的核心是

  IE5是第一款引入XHR对象的浏览器。在IE5中,XHR对象是通过MS

  创建一个XHR对象,也叫实例化一个XHR对象,因为

var xhr;if(window.= new else{  xhr = new ActiveXObject('Microsoft.);}

 

发送请求

open()

  在使用XHR对象时,要调用的第一个方法是open(),它接受3个参数:要发送的请求的类型 ("get"、"post"等)、请求的URL和表示是否异步发送请求的布尔值

xhr.open("get","example.php", false);

  [注意]URL是相对于执行代码的当前页面,且只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别,都会引发安全错误

send()

  send()方法接收一个参数,即要作为请求主体发送的数据。调用send()方法后,请求被分派到服务器

xhr.open("get", "example.txt", false);xhr.send(null);

 

接收响应

  在收到响应后,响应的数据会自动填充XHR对象的属性,主要有以下4个属性

responseText: 作为响应主体被返回的文本response'text/,这个属性中将保存着响应数据的

  在接收到响应后,第一步是检查status属性,以确定响应已经成功返回。一般来说,可以将HTTP状态码为200作为成功的标志。此时,responseText属性的内容已经就绪,而且在内容类型正确的情况下,response

  无论内容类型是什么,响应主体的内容都会保存到responseText属性中,而对于非

if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){  alert(xhr.responseText);}else{  alert('request was unsuccessful:' + xhr.status);}

 

异步

  如果需要接收的是异步响应,这就需要检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下:

0(UNSENT):未初始化。尚未调用open()方法1(OPENED):启动。已经调用open()方法,但尚未调用send()方法2(HEADERS_RECEIVED):发送。己经调用send()方法,且接收到头信息3(LOADING):接收。已经接收到部分响应主体信息4(DONE):完成。已经接收到全部响应数据,而且已经可以在客户端使用了

  只要readyState属性值由一个值变成另一个值,都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常,我们对readyState值为4的阶段感兴趣,因为这时所有数据都已就绪

  [注意]必须在调用open()之前指定onreadystatechange 事件处理程序才能确保跨浏览器兼容性,否则将无法接收readyState属性为0和1的情况

xhr.onreadystatechange = function(){  if(xhr.readyState === 4){    if(xhr.status == 200){      alert(xhr.responseText);    }  }}

 

实例

  下面以一个小实例来演示ajax中xhr对象的应用

<button id="btn">获取信息</button><div id="result"></div><script>btn.onclick = function(){  //创建xhr对象  var xhr;  if(window.= new else{    xhr = new ActiveXObject('Microsoft.');  }  //异步接受响应  xhr.onreadystatechange = function(){    if(xhr.readyState == 4){      if(xhr.status == 200){        //实际操作        result.innerHTML += xhr.responseText;      }    }  }  //发送请求  xhr.open('get','message.',true);  xhr.send();}</script>  

//message.

最后

  通过实例的演示发现,ajax前端本身的内容并不难。但是,由于ajax涉及到一些后端及网络的知识,使得学起来不是很容易。以后的博文将逐步深入地介绍ajax的重点内容