Ajax基础

Ajax（Asynchronous JavaScript and XML），异步JavaScript和XML，是时下最流行的技术。从命名可以看出，Ajax并不是新的技术，而是原有技术的集合。

Ajax的核心技术是xmlHttpRequest。通过xmlHttpRequest可以在不刷新当前页面的情况下向处理页面发送数据，并可以将处理结果输出到页面。

使用Ajax，一般分为一下几步。

（1）首先要创建xmlHttpRequest对象。不同的浏览器，创建xmlHttpRequest对象及使用的方法有一些差别，这里只针对IE浏览器进行创建。代码如下：

var xmlhttp = false;       //初始化变量
//如果ActiveXObject存在，说明是IE5.0以上的版本，否则使用XMLHttpRequest创建
if(window.ActiveXObject){
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest( );
}

  (2)对象创建成功后，就可以使用对象中的open( ) 方法创建新请求了。方法格式如下：

xmlhttp.open(method, rurl, isAsync);

method参数指明请求的方法，如get或post.

rurl参数指明请求的页面，可以是绝对地址，也可以是相对地址。

isAsync参数指明请求是否为异步。默认为True，即异步。

  （3）如果isAsync等于True，那么当请求的状态改变时，将调用onreadystatechange属性，该属性制订了一个回调函数，格式如下：

xmlhttp.onreadystatechange = reabackfunc;

 (4)在回调函数中，首先需要判断http的请求状态和http状态吗。这是通过readyState属性和status属性来判断的。readyState属性有5种状态值，常用的是4，表示数据接收完毕。status属性的值比较多，常用的是200，表示请求成功。一般这两个属性一起来判断，格式如下：

xmlhttp.onreadystatechange = function(){
  if(readystate == 4 and status == 200){
    ....
    }
}

 (5)当响应页处理结束后，即满足了“readystate == 4 and status == 200"这个条件，就可以使用xmlhttprequest对象的属性获取响应页的值了。

 （6）最后使用send（）方法来接收回应。send方法可以传递数据，但这取决于open方法中的rmethod参数，当参数为get时，数据是负载URL中进行传递的。

附1： XMLHTTPRequest对象的属性

属性	描述
onreadystatechange	指定当readyState属性变化时应该调用的函数
readyState	请求的状态。整数0表示未初始化，1表示正在载入，2表示已载入，3表示交互，4表示已完成
responseText	包含以字符串形式返回的数据
responseXml	包含以XML格式文档对象返回的数据
status	服务器返回的HTTP状态码，如200
statusText	服务器返回的HTTP状态字符串，如OK

附2： XMLHTTPRequest对象的方法

方法	描述
abort( )	停止一个请求
getAllResponseHeaders( )	以字符串的形式返回响应的所有报头
getResponseHeader( header)	以字符串的形式返回响应的报头”header“的值
open( 'method', 'URL', 'a')
send( content)	使用POST方法发送该请求，参数为可选
setRequestHeader('x', 'y')	设置一个参数对（x为参数名，y为参数值），并且作为该报头参数发送请求

附3：使用XMLHTTPRequest的一个比较完整的例子

   （1）在一个JS文件xmlhttprequestCreate.js中定义创建XMLHTTPRequest对象的函数：

//创建XmlHttpRequest对象
function CreateXmlHttpRequest()
{
    var xmlHttp = false;
    if(window.XMLHttpRequest)  //当前浏览器支持XmlHttpRequest
    {
        xmlHttp = new XMLHttpRequest(); // 创建XmlHttpRequest对象
    }
    else if(window.ActiveXObject)  //如果XmlHttpRequest对象是ActiveX控件
    {
        try
        {
            //尝试使用Msxml2.XMLHTTP来创建XmlHttpRequest对象
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                //尝试使用Microsoft.XMLHTTP来创建XmlHttpRequest对象
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e)
            {
                xmlHttp = false;  //当前浏览器不支持XmlHttpRequset
            }
         }
     }
     return xmlHttp; //返回创建的XmlHttpRequest对象
}

  （2）在需要使用Ajax的页面中添加代码：

    <script type="text/javascript" src="ajax_1.js"></script>
    <script type="text/javascript" language="javascript">
        var xmlHttp = false;  
        function createReq()
        {
            var url = "AJAX_Server.aspx";  
            xmlHttp = CreateXmlHttpRequest();
            if(!xmlHttp)   //创建失败
            {
                alert("当前浏览器不支持XmlHttpRequest对象，创建失败!");
                return;
            }
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = callback;  //指定回调函数
            xmlHttp.send(); //发送请求
        }
        function callback()  //回调函数，对服务器端的响应处理，监视response状态
        {
            if(xmlHttp.readyState == 4)   
            {
                if(xmlHttp.status == 200)
                {
                    Display();  //所有状态成功，执行此函数，显示数据
                }
                else  //http返回状态失败
                {
                    alert("服务器端返回状态" + xmlHttp.statusText);
                }
            }
            else  //请求状态还没成功，页面等待
            {
                document.getElementById("myTime").innerHTML="数据加载中...";
            }
        }
        function Display() //接受服务器端返回的数据，对其进行显示
        {
            document.getElementById("myTime").innerHTML = xmlHttp.responseText;
      //      document.getElementById("ResText").value = xmlHttp.responseXML;
        }
    </script>