10.入门第十课:AJAX原理及实战技术（正式版）

一、需要一个套路：

每次都写这么一大堆的代码，是不是要规范一下呢？

三方面的工作，写成三个函数，工作会有条理些：

1、创建XHR对象（比上一版进行了增强）

var xhr;//全局变
function createXhr(){
    if (window.XMLHttpRequest)
    {// 针对 IE7+, Firefox, Chrome, Opera, Safari
      xhr=new XMLHttpRequest();
    }
else
  {// 针对 for IE6, IE5
      xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }
}

本函数可以被反复调用。

2、设定工作参数及绑定函数：

button.onclick=function(){
createXhr();//很方便吧！
xhr.open("GET","url?参数1=值1");//设定工作参数
xhr.onreadystatechange=callback;//设定回调函数，"callback"是函数名
    xhr.send(null);
}

button是举个例子，代表界面中的一切可能事件！

3，回调函数的定义：

function callback(){
    if(xhr.status==200){//代表着服务器正常响应（还记得404吗）
        if(xhr.readyState==4){
            alert(xhr.responseText);//对返回结果的一切可能处理，都在此处
        }
    }
}

以上三部分代码组合到一起，就是全部AJAX的代码。

二、POST请求怎么办？

xhr.open("POST","url");//此时请求参数不附加在url后面
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设定请求头，必须做！
xhr.send("fname=Bill&lname=Gates");//请求参数在这里