Ajax 原理+实例

 

 1 var XmlHttp = null;
 2 
 3 function GetXmlHttpObj()
 4 {
 5     var XmlHttpObj = null;
 6     try
 7     { 
 8         if(window.ActiveXObject)
 9         { 
10             for(var i = 5;i;i--)
11             { 
12                 try
13                 {
14                     if( i == 2 )
15                     { 
16                         XmlHttpObj = new ActiveXObject( "Microsoft.XMLHTTP" ); 
17                     }
18                     else
19                     { 
20                         XmlHttpObj = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" ); 
21                     } 
22                     XmlHttpObj.setRequestHeader("Content-Type","text/xml"); 
23                     XmlHttpObj.setRequestHeader("Content-Type","utf-8"); 
24                     break;
25                 }
26                 catch(e)
27                 {}
28             }
29         }
30         else if( window.XMLHttpRequest )
31         { 
32             XmlHttpObj = new XMLHttpRequest(); 
33             if (XmlHttpObj.overrideMimeType) 
34             {
35                 XmlHttpObj.overrideMimeType('text/xml');
36             }
37         }
38     }
39     catch(e)
40     {}
41     return XmlHttpObj
42 }
43 
44 
45 function XmlHttpGetMethod(uri)
46 {
47     XmlHttp = GetXmlHttpObj();
48     if(XmlHttp == null)
49     {
50         alert('很抱歉，你的浏览器版本不支持，操作终止');
51         return;
52     }
53     XmlHttp.open("GET",uri,false);
54     XmlHttp.send();
55 }
56 
57 
58 function XmlHttpPostMethod(uri,parmsStr)
59 {
60     XmlHttp = GetXmlHttpObj();
61     if(XmlHttp == null)
62     {
63         alert('很抱歉，你的浏览器版本不支持，操作终止');
64         return;
65     }
66     XmlHttp.open("POST",uri,false);    
67     XmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
68     XmlHttp.send(parmsStr);
69 }
70 
71 function XmlHttpGetMethodText(uri)
72 {
73     
74     XmlHttpGetMethod(uri);
75     return XmlHttp.responseText;
76     
77 }
78 
79 function XmlHttpPostMethodText(uri,parmsStr)
80 {
81     XmlHttpPostMethod(uri,parmsStr);
82     return XmlHttp.responseText;
83 }
84 
85 function XmlHttpGetMethodXml(uri)
86 {
87     XmlHttpGetMethod(uri);
88     return XmlHttp.responseXML;
89 }
90 
91 function XmlHttpPostMethodXml(uri,parmsStr)
92 {
93     XmlHttpPostMethod(uri,parmsStr);
94     return XmlHttp.responseXML;
95 }

 

ajax是一种网页开发技术
即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Garrett创造的名词，是指一种创建交互式网页应用的网页开发技术。

 

AJAX 创建更好更快以及交互性更强的 Web 应用程序的技术

JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。

XMLHttpRequest 使 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX 可使因特网应用程序更小、更快，更友好。 　　
AJAX 是一种独立于 Web 服务器软件的浏览器技术。

 

创建XMLHttpRequest 方法

　　XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入，被称为XMLHTTP。 后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。

 

对于Internet Explorer浏览器：

　　xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0

　　xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");

　　xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");

　　由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致，为了更好的兼容不同版本的Internet Explorer浏览器，因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类，上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。

　　对于Mozilla﹑Netscape﹑Safari等浏览器

　　创建XMLHttpRequest 方法如下：xmlhttp_request = new XMLHttpRequest();

　　如果服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作。 为了解决这个问题，如果服务器响应的header不是text/xml，可以调用其它方法修改该header。

　　xmlhttp_request = new XMLHttpRequest();

　　xmlhttp_request.overrideMimeType('text/xml');

　　在实际应用中，为了兼容多种不同版本的浏览器，一般将创建XMLHttpRequest类的方法写成如下形式：

　　try{

　　if( window.ActiveXObject ){

　　for( var i = 5; i; i-- ){

　　try{

　　if( i == 2 ){

　　xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }

　　else{

　　xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );

　　xmlhttp_request.setRequestHeader("Content-Type","text/xml");

　　xmlhttp_request.setRequestHeader("Charset","gb2312"); }

　　break;}

　　catch(e){

　　xmlhttp_request = false; } } }

　　else if( window.XMLHttpRequest )

　　{ xmlhttp_request = new XMLHttpRequest();

　　if (xmlhttp_request.overrideMimeType)

　　{ xmlhttp_request.overrideMimeType('text/xml'); } } }

　　catch(e){ xmlhttp_request = false; }

发送请求

　　可以调用HTTP请求类的open()和send()方法，如下所示：

　　xmlhttp_request.open('GET', URL, true);

　　xmlhttp_request.send(null);

　　open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。

　　第二个参数是请求页面的URL。

　　第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。

服务器的响应

　　这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：

　　xmlhttp_request.onreadystatechange =FunctionName;

　　FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName()，当然我们也可以直接将JavaScript代码创建在onreadystatechange之后，例如：

　　xmlhttp_request.onreadystatechange = function(){

　　// JavaScript代码段

　　};

　　首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。

　　readyState的取值如下：

　　0 (未初始化)

　　1 (正在装载)

　　2 (装载完毕)

　　3 (交互中)

　　4 (完成)

　　所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。具体代码如下：

　　if (http_request.readyState == 4) { // 收到完整的服务器响应 }

　　else { // 没有收到完整的服务器响应 }

　　当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时，表示状态正常。

处理从服务器得到的数据

　　有两种方式可以得到这些数据：

　　(1) 以文本字符串的方式返回服务器的响应

　　(2) 以XMLDocument对象方式返回响应

实例

 function CreateXMLHttpRequest()
{
    try{return new XMLHttpRequest();}catch(e){};
    try{return new ActiveXObject("Msxml2.XMLHTTP");}catch(e){};
    try{return new ActiveXObject("Microsoft.XMLHTTP");}catch(e){};
    return null;
}
function AjaxPost(_url,_arg_key,_arg_value,_callback,_param)
{
    if(_arg_key.length==_arg_value.length)
    {
        var xhr = CreateXMLHttpRequest();
        xhr.onreadystatechange = function()
        {
            if(xhr.readyState==4)
            {
                if(xhr.status==200)
                {
                    _callback(xhr.responseText,_param);
                }
                else
                {
                    alert("Page Status Error!");
                }
            }
        }
       
        xhr.open("POST",_url,true);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
        var arg = "";
        for(i=0;i<_arg_key.length;i++)
        {
            arg+=_arg_key[i]+"=";
            arg+=typeof(_arg_value[i])!="undefined"?_arg_value[i]+"&":"0&";
        }
        arg = arg==""?arg:arg.substring(0,arg.length-1);
        xhr.send(arg);
    }
    else
    {
        alert("arrry length Error!");
    }
}