ajax 的过程

我们在开发网站的过程中会用经常用到异步请求，也就是所谓的ajax请求，一般前端发送一个ajax请求需要经历以下过程：

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象

不同的浏览器使用的异步调用对象也有所不同
在IE浏览器中创建XMLHttpRequest对象的方式如下所示:
    var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
在Netscape浏览器中创建XMLHttpRequest对象的方式如下所示:
    var xmlHttpRequest = new XMLHttpRequest();

所以在开发的时候最好将两种方式都加上，通过window对象进行判断。

如下：

function createXMLHttpRequest()    //创建XMLHttpRequest对象的方法{    if(window.ActiveXObject)   //判断是否是IE浏览器    {        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  //创建IE浏览器中的XMLHttpRequest对象    }    else if(window.XMLHttpRequest)    //判断是否是Netscape等其他支持XMLHttpRequest组件的浏览器    {        xmlHttpRequest = new XMLHttpRequest();  //创建其他浏览器上的XMLHttpRequest对象    }}

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

创建HTTP请求可以使用XMLHttpRequest对象的open()方法

 XMLHttpRequest.open(method,URL,flag,name,password)

xmlHttpRequest .open("GET","ajax_info.txt",true);
xmlHttpRequest .send();

method：该参数用于指定HTTP的请求方法，一共有get、post、head、put、delete五种方法，常用的方法为get和post。
URL：该参数用于指定HTTP请求的URL地址，可以是绝对URL，也可以是相对URL。
flag：该参数为可选参数，参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步方式、false表示同步方式，默认为true。
name：该参数为可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。
password：该参数为可选参数，用于输入密码。如果服务器需要验证，则必须使用该参数。

(3)设置响应HTTP请求状态变化的函数

发送一个XMLHttpRequest后，ajax readyState会经历以下几种状态：

0 － （未初始化）还没有调用send()方法 
1 － （载入）已调用send()方法，正在发送请求 
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容 
3 － （交互）正在解析响应内容 
4 － （完成）响应内容解析完成，可以在客户端调用了 

xmlHttpRequest.onreadystatechange = getData;
function getData(){    //判断XMLHttpRequest对象的readyState属性值是否为4，如果为4表示异步调用完成    if(xmlHttpRequest.readyState == 4)    {        //设置获取数据的语句        if(xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0)        {            document.write(xmlHttpRequest.responseText);            //docunment.write(xmlHttpRequest.responseXML);        }    }}

(4)发送HTTP请求.

调用send方法发送http请求：

XMLHttpRequest.send(data);

(5)获取异步调用返回的数据

(6)使用JavaScript和DOM实现局部刷新

根据获取到的数据对页面做局部更新：

if(xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0){    document.write(xmlHttpRequest.responseText);    //docunment.write(xmlHttpRequest.responseXML);}

下面是jQuery的ajax的完整示例：

$.ajax({    type : "POST",  //提交方式    url : "",//路径    data : {        "id" : "1"    },//数据，这里使用的是Json格式进行传输    success : function(result) {//返回数据根据结果进行相应的处理        console.log("success");    },    error:function(){        console.log("error");    }});

jQuery的ajax是在原生ajax的基础上进行了封装，使用户使用起来更加快捷方便。