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);
如上代码会启动一个get请求ajax.PHP,但是请注意：open方法并不会真正发请求，而只是启动一个请求以备发送；
要发送真正请求必须使用send()方法；如下：
xhr.send(null);
send的方法接收一个参数，需要请求发送的数据，如果请求不需要发送数据，需要传送一个null，因为对于有些浏览器这是必须的；上面第三个参数传的是false，是同步请求，服务器接收到响应后再继续执行后面的代码，响应后的数据会自动填充XHR对象的属性，XHR有以下属性：
responseText: 作为响应主体被返回的文本。
responseXML: 如果响应的内容是”text/xml” 或 “application/xml”,这个属性将保存包含响应数据的XML DOM文档；
status: 响应http状态；
statusText: http状态说明；
在接收到响应后，第一步是检查status状态，如果状态时200，说明已经成功返回，此时responseText属性已经就绪；如果状态是304，说明资源未被修改，可以直接使用浏览器缓存的版本，当然，响应是有效的；如下ajax请求代码；
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 创建xhr对象方法如下：
function
createXHR(){
var
xhr;
if
(window.XMLHttpRequest){
// code for IE7+,Firefox,Chrome,Opera,Safari
xhr=
new
XMLHttpRequest();
}
else
{
// code for IE6,IE5
ActiveXObject(
"Microsoft.XMLHTTP"
);
}
return
xhr;
}
xhr = createXHR();
xhr.send(
null
);
((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
console.log(xhr.responseText);
{
console.log(xhr.status);
}
|
发ajax请求后，在控制台中打印如下：
说明已经请求成功；
上面的demo代码是同步请求，但是有时候我们需要发送异步请求，才能让javascript后续代码继续执行而不会堵塞，此时，我们可以检测XHR对象的readyState属性，该属性表示请求/响应当前活动阶段；这个属性取值如下：
1：启动。已经调用open()方法，但未调用send()方法；
3：接收。已经接收到部分数据；
4：完成。已经接收到全部响应数据，而且可以在客户端使用了；
readyState属性值由一个值变为另一个值，就会触发一次readystatechange事件。可以利用这个事件检测每次状态变化后的readyState值，但是必须在调用open()方法之前指定onreadystatechange事件；如下代码：
{
);
}
xhr;
}
xhr = createXHR();
xhr.onreadystatechange =
(){
(xhr.readyState == 4) {
((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
console.log(xhr.responseText);
{
console.log(xhr.status);
}
}
}
);
);
