js 原生AJAX发送请求详解

使用XHR对象的基本步骤：
(1)创建XHR对象
var xhr = new XMLHttpRequest( );
(2)监听XHR对象的状态改变事件
xhr.onreadystatechange = function(){
if( xhr.readyState===4){
if(xhr.status===200){ 完成且成功 }
else { 完成但失败 }
}
}
(3)打开到服务器的连接
xhr.open(method,  uri,  true)
(4)发起请求消息
xhr.send( null/data )

xhr.readyState:   0   1    2    3     4
xhr.status:  0  =>  200
xhr.responseText: ''   =>  '响应主体内容'

1.使用XHR发起异步的GET请求

var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
       if(xhr.readyState===4){
         if(xhr.status===200){ //响应完成且成功
           doResponse(xhr.responseText);
         }else{  //响应完成但不成功
           alert('响应完成但失败！'+xhr.status);
         }
       }
     }
     xhr.open('GET','xx.php?k1=v1&k2=v2',true);
    xhr.send( null );

注意：GET请求没有请求主体，所以send(null)；若有请求数据，追加为URI后面的查询字符串。

举例：

2.使用XHR发起POST请求

var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
       if(xhr.readyState===4){
         if(xhr.status===200){ //响应完成且成功
           doResponse(xhr.responseText);
         }else{  //响应完成但不成功
           alert('响应完成但失败！'+xhr.status);
         }
       }
     }
     xhr.open('POST', 'xxx.php', true); //URI无请求数据
//3.5 设置请求主体的内容类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send( 'k1=v1&k2=v2' ); //提交请求主体，必须编码后提交

注意：POST请求不在URI后面追加查询字符串——请求数据放在请求主体中send()——请求主体发送前必须设置Content-Type请求头部；且请求主体中的中文、特殊标点必须使用encodeURIComponent()函数进行编码。

举例：