使用原生XHR对象的基本步骤（四部曲）

1、原生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: ''   =>  '响应主体内容'

2.使用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后面的查询字符串。

3.使用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无请求数据

       // 设置请求主体的内容类型

       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

       xhr.send( 'k1=v1&k2=v2' );   //提交请求主体，必须编码后提交

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