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的基础上进行了封装，使用户使用起来更加快捷方便。