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

1、须要一个套路：
服务器

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

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

一、建立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");
  }
}

本函数能够被反复调用。url

二、设定工做参数及绑定函数：spa

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

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

3，回调函数的定义：orm

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

以上三部分代码组合到一块儿，就是所有AJAX的代码。对象

2、POST请求怎么办？事件

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