逐渐深入地理解Ajax

2015-6-3 09:43 |原作者: 龙恩0707|来自: cnblogs.com 1535 0

摘要: Ajax的基本原理是：XMLHttpRequest对象(简称XHR对象)，XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获得更多信息。意味着用户不必刷新页面也能取得新数据，然后通过DOM将数据插 ...

关键词： nbsp XHR 方法 status 头部 Ajax 对象代码 XMLHttpRequest onreadystatechan

Ajax的基本原理是：XMLHttpRequest对象(简称XHR对象)，XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获得更多信息。意味着用户不必刷新页面也能取得新数据，然后通过DOM将数据插入到页面中。

XMLHttpRequest对象方法

about() ：停止当前的请求；

open("method","URL",[asyncFlag]) ：启动请求

XHR的基本用法

在使用XHR对象时，要调用的第一个方法是 open() 方法，它有三个参数，第一个参数是：需要发送请求的类型( get 或者 post )，第二个参数是请求的 url ，第三个参数是请求的布尔值( true 是异步, false 是同步)；

xhr.open('get','http://127.0.0.1/ajax/ajax.php',false)
<div class="md-section-divider"></div>

如上代码会启动一个 get 请求 ajax.php ,但是请注意： open 方法并不会真正发请求，而只是启动一个请求以备发送；要发送真正请求必须使用 send() 方法；如下：

xhr.open('get','http://127.0.0.1/ajax/ajax.php',false);
xhr.send(null);
<div class="md-section-divider"></div>

send 的方法接收一个参数，需要请求发送的数据，如果请求不需要发送数据，需要传送一个 null ，因为对于有些浏览器这是必须的；上面第三个参数传的是 false，是同步请求，服务器接收到响应后再继续执行后面的代码，响应后的数据会自动填充 XHR 对象的属性， XHR 有以下属性：

responseText : 作为响应主体被返回的文本。

responseXML : 如果响应的内容是”text/xml” 或 application/xml ,这个属性将保存包含响应数据的XML DOM文档；

status : 响应http状态；

statusText : http状态说明；

在接收到响应后，第一步是检查status状态，如果状态时 200 ，说明已经成功返回，此时 responseText 属性已经就绪；如果状态是 304 ，说明资源未被修改，可以直接使用浏览器缓存的版本，当然，响应是有效的；如下 ajax 请求代码:

// 创建xhr对象方法如下：
function createXHR(){
var xhr;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}else{ // code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
var xhr = createXHR();
xhr.open('get','http://127.0.0.1/ajax/ajax.php',false);
xhr.send(null);
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log(xhr.responseText);
}else {
console.log(xhr.status);
}

ajax.php代码如下：

<?php
$data = json_decode(file_get_contents("php://input"));
echo ('{"id" : ' . $data->id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}');
?>

发ajax请求后，在控制台中打印如下：

说明已经请求成功；

上面的demo代码是同步请求，但是有时候我们需要发送异步请求，才能让 javascript 后续代码继续执行而不会堵塞，此时，我们可以检测 XHR 对象的 readyState属性，该属性表示请求/响应当前活动阶段；这个属性取值如下：

0：未初始化。尚未调用open()方法；
1：启动。已经调用open()方法，但未调用send()方法；
2：发送。已经调用send()方法，但尚未接收到响应；
3：接收。已经接收到部分数据；
4：完成。已经接收到全部响应数据，而且可以在客户端使用了；

readyState 属性值由一个值变为另一个值，就会触发一次 readystatechange事件。可以利用这个事件检测每次状态变化后的 readyState 值，但是必须在调用 open() 方法之前指定 onreadystatechange 事件；如下代码：

// 创建xhr对象方法如下：
function createXHR(){
var xhr;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}else{
// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log(xhr.responseText);
}else {
console.log(xhr.status);
}
}
}
xhr.open('get','http://127.0.0.1/ajax/ajax.php',false);
xhr.send(null);

如上代码，在处理onreadystatechange事件时使用了xhr对象，没有使用this对象，原因是onreadystatechange事件处理程序的作用域的问题；如果使用this对象，在有的浏览器下会执行失败，或者导致错误发生；

理解Http头部信息

每个http请求和响应都会带有响应的头部信息，xhr对象也提供了操作这两种头部(请求头部和响应头部的)信息的方法；

默认情况下，在发送XHR请求的同时，还会发送下列头部信息：

Accept: 浏览器能够处理的内容类型；
Accept-Charset: 浏览器能够显示的字符集；
Accept-Encoding: 浏览器能够处理的压缩编码；
Accept-Language: 浏览器当前设置的语言；
Connection: 浏览器与服务器之间连接的类型；
Cookie：当前页面设置的cookie；
Host：发出请求页面所在的域；
Referer：发出请求的页面url。
User-Agent: 浏览器的用户代理字符串。

如下ajax.php请求所示：

我们还可以使用 setRequestHeader() 方法可以设置自定义的请求头部信息，这个方法接收2个参数：头部字段的名称和头部字段的值；要成功发送请求头部信息，必须在调用 open() 方法之后且调用 send() 方法之前调用 setRequestHeader()；如下demo所示：