Ajax之初步

学习网址：http://www.imooc.com/learn/250
一、创建XHR对象

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

二、创建HTTP请求
http是计算机通过网络进行通信的规则。
http是一种无状态协议：不建立持久的连接，服务端不保留连接的信息

http请求过程：
1，建立TCP连接
2，浏览器向服务器发送请求命令
3，浏览器向服务器发送请求头信息
4，服务器应答
5，服务器发送应答头信息
6，服务器发送数据
7，服务器关闭TCP连接

请求响应的状态码
1xx：信息类，表示收到web浏览器请求，正在进一步的处理中
2xx：成功，表示用户请求被正确接收，理解和处理。如200 OK
3xx：重定向，表示请求没有成功，客户必须采取进一步的操作
4xx：客户端错误，表示客户端提交的请求有错误，例如，404 not found，意味着请求中所引用的文档不存在
5xx：服务器错误，表示服务器不能完成对请求的处理，如500

① 发送一个GET请求

request.open("GET", "get.php", true);  
request.send(); 

② 发送一个POST请求

request.open("POST", "post.php", true);  
request.send();  

③ 发送一个带请求体的POST请求

request.open("POST", "create.php", true);  
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
request.send("name=Ryn&hobby=女");  

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

readyState属性的意思：
0:请求未初始化，open还没有调用
1:服务器连接已经建立，open已经调用
2:请求已经被接收，接收到请求头信息
3:请求处理中，接收到请求体信息
4:请求已完成，并且响应已经就绪完成

request.onreadystatechange = function() {  
    if (request.readyState === 4 && request.status === 200) {  
        //处理request.responseText  
    }  
} 

四、完整案例

var request;  
if(window.XMLHttpRequest) {  
    // IE7+,FireFox,Chrome,Opera,Safari...  
    request = new XMLHttpRequest();  
} else {  
    // IE6,IE5  
    request = new ActiveXObject("Microsoft.XMLHTTP");   
}  
request.open("POST", "create.php", true);  
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
request.send("name=Ryn&hobby=女");  
request.onreadystatechange = function() {  
    if (request.readyState === 4 && request.status === 200) {  
        //处理request.responseText  
    }  
}