Ajax极速参考

      AJAX 的要点是 XMLHttpRequest 对象。不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest
的 JavaScript 内建对象。
1,创建XMLHttpRequest.

 1 function GetXMLHttp(){
 2     var xmlHttp;
 3     try{
 4         // Firefox, Opera 8.0+, Safari
 5         xmlHttp=new XMLHttpRequest();
 6     }catch (e){
 7         // Internet Explorer
 8         try{
 9             xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
10         }catch (e){
11             try{
12                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
13             }catch (e){
14                 alert("您的浏览器不支持AJAX!");
15                 return null;
16             }
17         }
18     }
19     return xmlHttp;
20 }

2,XMLHttpRequest与服务器的通信。
在向服务器发送数据之前,我们有必要解释一下 XMLHttpRequest 对象的三个重要的属性。
<1>onreadystatechange 属性:该属性存有处理服务器响应的函数。
<2>readyState属性:该属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。readyState可能的值如下:
      0--请求未初始化(在调用 open() 之前)
      1--请求已提出(调用 send() 之前)
      2--请求已发送(这里通常可以从响应得到内容头部)
      3--请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
      4--请求已完成(可以访问服务器响应并使用它)
<3>如下列代码在请求完成时获取返回数据并填充到表单myForm的文本框time中:

1 xmlHttp.onreadystatechange=function()
2   {
3   if(xmlHttp.readyState==4)
4     {
5     document.myForm.time.value=xmlHttp.responseText;
6     }
7   }
8 

      要想把请求发送到服务器,我们就需要使用 open() 方法和 send() 方法。
      open() 方法需要三个参数。第一个参数定义发送请求所使用的方法(GET 还是 POST)。第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。
      send() 方法可将请求送往服务器。

1 xmlHttp.open("GET","time.asp",true);
2 xmlHttp.send(null);
3 

       POST请求方法实例:

 

 1 /*
 2 @params:
 3 url:提交字符串
 4 params:参数,形如:a=1&c=2
 5 */
 6 function PostRequest(url,params){
 7     xmlHttp=GetXMLHttp();
 8     xmlHttp.onreadystatechange = HandleResponse;
 9     xmlHttp.open("post",url,true);
10     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置服务器响应请求体参数
11     xmlHttp.send(params);
12 }

 

posted on 2009-10-11 11:35  Joshua Leung  阅读(217)  评论(0编辑  收藏  举报

导航