几种常见的ajax实现方法

Ajax 资源中心

 

基本的实现方法

var xmlHttp = false;
//如果使用较新版本的 Internet Explorer，则需要使用对象 Msxml2.XMLHTTP，而较老版本的 Internet //Explorer 则使用 Microsoft.XMLHTTP。非IE则需要XMLHttpRequest。
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    try{
            xmlHttp = new XMLHttpRequest();
    catch(e3){
        alert("您的浏览器不支持AJAX技术");
    }
  }
}

function send(){
  var url = "/demo.action"
//注意下写的顺序，有时候顺序写错了会出错
  xmlHttp.open("GET", url, true);  //open函数说明见下方
  xmlHttp.onreadystatechange = callback; //调用回调函数对服务器进行响应
  xmlHttp.send(null);  //一般的内容用url发送信息即可，特殊需求可用send发送信息，这是url发送                        //信息的写法
}

//回调函数 取得服务器回传的信息
function callback{
if(xmlHttp.readystatechange
  if (xmlHttp.readyState == 4) {   //详见HTTP就绪状态
    if (request.status == 200){    //详见HTTP状态代码
      var response = xmlHttp.responseText;
    }
  }
}

open()参数
request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。
url：要连接的 URL。
asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。
username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。
password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。
通常使用其中的前三个参数

HTTP就绪状态
HTTP 就绪状态表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在 Ajax 应用程序中需要了解五种就绪状态：

    0：请求没有发出（在调用 open() 之前）。
    1：请求已经建立但还没有发出（调用 send() 之前）。
    2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
    3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
    4：响应已完成，可以访问服务器响应并使用它。

与大多数跨浏览器问题一样，这些就绪状态的使用也不尽一致。您也许期望任务就绪状态从 0 到 1、2、3 再到 4，但实际上很少是这种情况。一些浏览器从不报告 0 或 1 而直接从 2 开始，然后是 3 和 4。其他浏览器则报告所有的状态。还有一些则多次报告就绪状态 1。在上一节中看到，服务器多次调用 updatePage()，每次调用都会弹出警告框 —— 可能和预期的不同！

HTTP状态代码
404 该页面不存在
403 和 401  所访问数据受到保护或者禁止访问
200 一切顺利

更详细的说明请访问 http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/

 

prototype实现ajax

先看代码

<script type="text/javascript" src="prototype.js"/>

function demo(){

     var url="demo.action";    //请求路径

     var pars="";//请求参数  如完整请求路径为http://www.demo.com/demo&d1=2,

                         //则url="http://www.demo.com/demo，pars="d1=2"
     var ajax=new Ajax.Request(url,{method:"post",parameters:pars,onComplete:callback});

                                                                                                                   //callback为回调方法

      //var ajax=new Ajax.Updater(div,url,{method:"post",parameters:pars,evalScripts:true});

       //evaldemo=function(){}

     //使用 Ajax.Request 类还有一些其它的属性可以在这个对象里面定义和设置，如 asynchronous，可以为 true 或 false 来决定 AJAX 对服务 器的调用是否是异步的（默认值是 true）。

    //还有另外两个有用的选项用来处理结果。我们可以在 onSuccess 选项处传入一个方法，当 AJAX 无误的执行完后调 ，相反的，也可以在 onFailure 选项处传入一个方法，当服务器端出现错误时调用。

 

}

function callback(request){    //回调方法需有一个参数

   var s=request.responseText;      //得到服务器返回信息

}

 

更多使用方法参见prototype的帮助文档

 

dojo实现ajax

<script type="text/javascript" src="dojo.js"/>

function demo() {
    var pars={actionSign:'firstlogin',userid:dojo.byId('userid').value};  //请求参数 格式为 {参数名:值}
    dojo.xhrPost({          //使用post请求  对应get请求的方法为xhrGet
        url:"demo.action",
        content:pars,
        preventCatch:true,         //不使用浏览器缓存  如果使用的话，两个一样的请求，浏览器会从缓存中调用上次请求的结果

        handleAs:'text',           //返回的数据格式

        load:function(data){    //成功请求后的动作
            callback(data);
        },
        error:function(response,ioArgs){     //请求错误后的动作
             alert("HTTP status code: " + ioArgs.xhr.status);
        }    
    });
    
}

 

更多使用方法参见http://api.dojotoolkit.org/jsdoc/dijit/HEAD/dijit.layout.ContentPane

http://sitepen.com/labs/guides/?guide=DojoQuickStart

 

关于prototype与dojo在ajax使用上的一个小细节问题：

如果请求反回的是一个网页，且此网页中含有javascript方法，建议使用prototype，它可以保证这些JS方法的正确调用，但需要注意下方法格式demo=function(){}，不然JS方法会被直接执行，不会根据事件触发执行。示例如下：

function demo(){

     var url="demo.action";    //请求路径

     var pars="";//请求参数  如完整请求路径为http://www.demo.com/demo&d1=2,

                         //则url="http://www.demo.com/demo，pars="d1=2"

      var ajax=new Ajax.Updater(div,url,{method:"post",parameters:pars,evalScripts:true});

}