（2011-12-14 旧博文搬运）实用的AJAX类

这个类来自PACKT出版的《AJAX&PHP2nd》,简单地修改了一下，只需要传递一个包含了参数的对象就可以方便地使用AJAx

 

xmlHttpRequest_class.js

// JavaScript Document by yyf1990cs

//XmlHttp类的构造函数接受一个JSON对象，该对象可包含如下参数：
//url - 服务器端页面地址
//contentType - 请求的上下文类型
//type - GET(缺省) or POST
//data - 请求发送的数据 以key=value&key2=value2的形式
//async - 是否异步
//showErrors - 是否显示错误信息
//complete - 收到回应时的回调函数(侦听器函数)

function XmlHttp(settings){

  /*参数设定*/
  this.settings = settings;
 
  var url = location.href;//默认URL是当前页面
  if(settings.url)url = settings.url;
 
  var contentType = "application/x-www-form-urlencoded";//默认上下文格式是表单格式
  if(settings.contentType)contentType = settings.contentType;
 
  var type = "GET";
  if(settings.type)type = settings.type;
 
  var data = null;
  if(settings.data){
      data = settings.data;
      if(type == "GET"){//如果是GET，则加其到url后
          url =  url+"?"+data;
      }
  }
 
  var async = true;
  if(settings.async)async = settings.async;
 
  var showErrors = true;
  if(settings.showErrors)showErrors = settings.showErrors;
 
  /*设置完毕，开始请求*/  
  var xhr = XmlHttp.create();//使用静态工厂方法创建一个xmlhttpRequest对象
  xhr.open(type,url,async);
  xhr.onreadystatechange = onreadystatechange;
  xhr.setRequestHeader("Content-Type",contentType);

if(type == "GET"){

   xhr.send(null);

}else{

    xhr.send(data);
 }
 
  //innerFuncion 用于显示错误
  function displayError(message){
    if(showErrors){//如果设置showErrors为false，则忽略错误
        alert("遇到的错误:\n"+message);
    }
  }
 
  //innerFuntion 用于分析服务器端返回的数据类型并提交处理
  function readResponse(){
     try{
        //检查返回的上下文类型
        var contentType = xhr.getResponseHeader("Content-type");
        if(contentType == "application/json"){//是否为JSON
            response = JSON.parse(xhr.responseText);
        }else if(contentType == "text/xml"){//是否为XML
            response = xhr.responseXML;
        }else{//普通文本
            response = xhr.responseText;
        }
        //如果有侦听器函数则进行处理
        if(settings.complete){
            settings.complete(xhr,response,xhr.state);
        }
     }//end try
    
     catch(e){
         displayError("无法检索返回数据类型:"+e.toString());
     }//end catch
  }//end readResponse
 
  //innerfuntion 当就绪状态改变时调用
  function onreadystatechange(){
     if(xhr.readyState == 4){
        if(xhr.status == 200){
            try{
                readResponse();
            }
            catch(e){
                displayError("无法读取返回数据"+e.toString());
            }
        }
        else{
            if(!xhr.statusText){
                displayError("找不到目标url");
            }
            displayError("状态信息"+xhr.statusText);
        }//end if(status)
     }//end if(readyState)
  }
 
}


//添加一个静态方法
XmlHttp.create = function(){
   var xmlHttp = false;
   try{
      /*IE7以上或其他浏览器*/
      xmlHttp = new XMLHttpRequest();   
   }catch(err){
          /*IE6或更老*/
          var xmlHttpVersions = new Array('MSXML2.XMLHTTP.6.0',
                                          'MSXML2.XMLHTTP.5.0',
                                          'MSXML2.XMLHTTP.4.0',
                                          'MSXML2.XMLHTTP.3.0',
                                          'MSXML2.XMLHTTP',
                                          'Microsoft.XMLHTTP');
          for(var i=0 ; i<xmlHttpVersions.length && !req ; i++){//从上到下诸葛测试，保证使用的是最新版
             try{
                xmlHttp = new ActiveXObject(xmlHttpVersions[i]);
             }catch(err){}
          }
   }
   if(!xmlHttp){
     alert("创建XMLHttpRequest对象时发生错误。");  
   }else{
     return xmlHttp;
   }
}

 

简单的使用示例：

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

.... .....

<script type="text/javascript" >

  var xmlhttp = new XmlHttp({url:"server.php",

                                                  type:"POST",

                                                  data:"id=1",

                                                  complete:function(xhr, response, status){  //假设php脚本返回了一个XML

                                                                        document.getElementById("myDiv").innerHTML = response.getElementsByTagName("result")[0].childNodes[0].nodeValue;

                                                                   }

                                                 })

</script>