9.入门第九课:AJAX原理及实战技术（入门版）

1、曾经一个蛮荒的时代：客户端向服务器的提交只能使用“表单和超链接”，这都会出现页面的重新载入的问题，即时页面只有一点点的改动，也只能全部重来。

2、如果能将与服务器的交互（请求与接收响应）工作，交给一个“对象”，让该对象以一个独立的线程在后台进行如下工作：“请求，等待响应数据，响应服务器的响应，局部修改当前的页面”，此时也就避免了“全部刷新页面”的问题，此种需求即为AJAX背景。

3、这个对象是什么呢？

类名：XMLHttpRequest

生成对象的方法：var xhr= new  XMLHttpRequest();

江湖地位：被称为AJAX“引擎”

标准化程度：被目前的主流浏览器接受（包括奇葩IE,但不包括IE6及以前的版本）

请求发送方式：xhr.send();

4、往哪里发送，发送什么东西？

var xhr=new XMLHttpRequest();
//向哪发，发什么？
xhr.send(null);

我们需要在发送之前，设置一下工作参数，来描述请求的细节：

xhr.open("GET","url?参数1=值1&参数2=值2");

目前代码如下：

var xhr=new XMLHttpRequest();
xhr.open("GET","url?参数1=值1&参数2=值2");
xhr.send(null);

现在可以向服务器发请求，并携带了参数。

5、服务器的响应数据，要给客户端，如何办呢？

捕捉xhr对象的一个“事件”onreadystatechange，并给其绑定“回调函数”

xhr.onreadystatechange=function(){
    //处理代码
}

当服务器有数据响应，xhr对象的readyState就会变化（0-1-2-3-4，最终值为4），而每次变化都会调用“处理代码”，很显然这是不必要的，我们做一下改良，以减少回调的次数。

xhr.onreadystatechange=function(){
   if(readyState==4){
        //最终处理代码
    }
}

但是服务器的数据在哪里呢？

在xhr的responseText成员变量当中，这样我们的代码如下改进

xhr.onreadystatechange=function(){
   if(readyState==4){
        alert(xhr.responseText);
    }
}

6、 以下列出完整的代码及注释

//new 一个xhr对象
var xhr=new XMLHttpRequest();
//设定工作参数
xhr.open("GET","url?参数1=值1&参数2=值2");
//注册回调函数
xhr.onreadystatechange=function(){
   if(readyState==4){
        alert(xhr.responseText);
    }
}
//发送请求
xhr.send(null);