Ajax发送异步请求（四步操作）

1. 第一步（得到XMLHttpRequest）

*Ajax其实只需要学习一个对象：XMLHttpRequest，如果掌握了 它，就掌握了Ajax。

*得到XMLHttpRequest
===>大多数浏览器支持：var xmlHttp = new XMLHttpRequest();
===>IE6.0：var xmlHttp = new ActiveXObject(“Msxm12.XMLHTTP”);
===>IE5.5：var xmlHttp =new ActiveXObject(“Microsoft.XMLHTTP”);
*编写创建XmlHttpRequest（异步对象）对象的函数

function createXMLHttpRequest()
{
    try{
        return new XMLHttpRequest();
    }
    catch(e){
        try{
            return new ActiveXObject("Msxm12.XMLHTTP");
        }
        catch(e){
            try{
                return new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){throw e;}
        }
    }
}

---

2.第二步（打开与服务器的连接）

*xmlHttp.open()：用来打开与服务器的连接，它需要三个参数：
===>请求方式：可以是GET或POST
===>请求的URL：指定服务端资源：例如/Demo/AServlet
===>请求是否为异步：如果为true代表发送异步请求，否则同步请求。

eg：     
        xmlHttp.open("GET","/Demo/AServlet",true);
        xmlHttp.open("POST","/Demo/AServlet",true);

---

3.第三步（发送请求）

*xmlHttp.send(null)：如果不给null可能会造成部分浏览器无法发送！
===>参数：就是请求体内容！如果是GET请求，必须给出null。

如果发送时带有参数一般使用post请求
===>如果是POST请求
1.设置Content-Type请求头：

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

2.send：

xmlHttp("username=zhangSan&password=123")

4.第四步（得到响应）

*在xmlHttp对象的一个事件上注册监听器：onreadystatechange

*xmlHttp对象一共有5个状态：
===>0状态：刚创建xmHttp对象，还没有调用open()方法；
===>1状态：请求开始，还没有调用send()方法；
===>2状态：调用完了send()方法；
===>3状态：服务器开始响应，但不表示响应结束；
===>4状态：服务器响应结束；（通常我们只关心这个状态！）

*得到xmlHttp对象的状态：
==>

//state可能是0，1，2，3，4
var stata = xmlHttp.readyState;

*得到服务器响应的状态码：
==>

//例如为200，404，500
var stata = xmlHttp.status;

*得到服务器响应的内容：
==>

//得到服务器响应的文本格式的内容
var content = xmlHttp.responseText;
//得到服务器响应的xml响应的内容，它是Document对象
var content = xmlHttp.responseXML;

示例：

//当状态改变时会调用该方法
xmlHttp.onreadystatchange = function()
{
    //双重判断:判断是否为4状态，而且还要判断是否为200
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
    {
        //获取服务器的响应内容
        var text = xmlHttp.responseText; 
    }
}

DEMO

//对于不同的浏览器 创建不同的XMLHttpRequest对象
function createHttpRequest()
     {
      try{
        return new XMLHttpRequest();
      }
      catch(e)
      {
            try{
                   return new ActiveXObject("Msxm12.XMLHTTP");
              }
              catch(e){
                  try{
                      return new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  catch(e){
                   alert("上古浏览器吧你!");
                   throw e;}
                  }
      }
     }
/*
 * 
 * object的参数
 * method-->可选
 * url
 * async-->可选
 * params-->可选
 * type-->可选
 * callback
 * Object是一个json
 */
 //调用该方法时需要创建一个json对象来进行调用
function ajax(object)
{
    var xmlHttp=createHttpRequest();

    if(object.method==undefined)
    {
        object.method="GET";
    }
    if(object.async==undefined)
    {
        object.async=true;
    }
    xmlHttp.open(object.method, object.url, object.async);
    if(object.method=="POST")
    {
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    }
    xmlHttp.send(object.params);
    xmlHttp.onreadystatechange=function()
    {
        if(xmlHttp.readyState==4&&xmlHttp.status==200)
        {

            var data;
            if(object.type==undefined)
            {
                data=xmlHttp.responseText;
            }
            else if(object.type=="text")
            {
                data=xmlHttp.responseText;
            }
            else if(object.type=="json")
            {
                data=eval("("+xmlHttp.responseText+")");
            }
            else if(object.type=="xml")
            {
                data=xmlHttp.responseXML;
            }
            object.callback(data);
        }
    };
}