[JavaScript]学习笔记：AJAX

完整的AJAX包括三个部分：

1.创建XMLHttpRequest对象：

不考虑IE6以下版本的兼容性问题的话

var xmlhttp=new XMLHttpRequest();

需要考虑到兼容性的问题时：

var xmlhttp;if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2.发送请求：

分POST和GET两种方式：

POST：

var url = 'c.php';
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("id="+id);

GET：

var url = 'c.php'+"?id="+id;
xmlhttp.open("GET",url,true);
xmlhttp.send();

附注：

xmlhttp.open("GET",url,true);

true表示代码会在send()调用后继续执行，而不等待服务端的响应。即是异步。

3.响应：

XMLHttpRequest对象中存在属性readyState，该属性表示了请求所处于的状态。当一个 XMLHttpRequest 初次创建时，该属性值为0，直到接收到完整的 HTTP 响应，这个值增加到 4。这些值所对应的状态为：

0: Uninitialized。     XMLHttpRequest 对象已创建或已被 abort() 方法重置。

1: Loading。            初始化XMLHttpRequest对象，open() 方法已调用，建立服务器连接已建立，请求还没有被发送。

2: Loaded。             Send() 方法已调用，HTTP 请求已发送到 Web 服务器，请求已接收。未接收到响应。

3: Interactive。         所有响应头部都已经接收到。响应体开始接收但未完成。

4: Completed。       请求已完成，HTTP 响应已经完全接收。

状态发生变化时，readyState相应改变，并且触发事件onreadystatechange。状态4的情况下，请求完成，响应（服务器返回结果）就绪，此时就可以通过

XMLHttpRequest对象的responseText属性获取到这个返回结果。

伴随响应，服务器会返回一个HTTP状态消息，200为请求成功。常见错误状态：

404 Not Found：服务器无法找到被请求的页面。

500 Internal Server Error：请求未完成。服务器遇到不可预知的情况。通常是服务端代码错误。

其他状态参考http://www.w3school.com.cn/tags/html_ref_httpmessages.asp

xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);  //相应的结果处理函数
}
}