一个简单Ajax类库及使用方法实例分析

本文实例讲述了一个简单ajax类库及使用方法。分享给大家供大家参考，具体如下：

ajax.js

function ajax(recvtype){
  var aj=new object();
  aj.recvtype=recvtype ? recvtype.touppercase() : 'html' //html xml
  aj.targeturl='';
  aj.sendstring='';
  aj.resulthandle=null;
  aj.createxmlhttprequest=function(){
  var request=false;
  //window对象中有xmlhttprequest存在就是非ie，包括（ie7，ie8）
  if(window.xmlhttprequest){
    request=new xmlhttprequest();
    if(request.overridemimetype){
      request.overridemimetype("text/xml");
    }
  //window对象中有activexobject属性存在就是ie
  }else if(window.activexobject){
    var versions=['microsoft.xmlhttp', 'msxml.xmlhttp', 'msxml2.xmlhttp.7.0','msxml2.xmlhttp.6.0','msxml2.xmlhttp.5.0', 'msxml2.xmlhttp.4.0', 'msxml2.xmlhttp.3.0', 'msxml2.xmlhttp'];
    for(var i=0; i<versions.length; i++){
      try{
        request=new activexobject(versions[i]);
        if(request){
          return request;
        }
      }catch(e){
        request=false;
      }
    }
  }
    return request;
  }
  aj.xmlhttprequest=aj.createxmlhttprequest();
  aj.processhandle=function(){
    if(aj.xmlhttprequest.readystate == 4){
      if(aj.xmlhttprequest.status == 200){
        if(aj.recvtype=="html")
          aj.resulthandle(aj.xmlhttprequest.responsetext);
        else if(aj.recvtype=="xml")
          aj.resulthandle(aj.xmlhttprequest.responsexml);
      }
    }
  }
  aj.get=function(targeturl, resulthandle){
    aj.targeturl=targeturl;
    if(resulthandle!=null){
      aj.xmlhttprequest.onreadystatechange=aj.processhandle;
      aj.resulthandle=resulthandle;
    }
    if(window.xmlhttprequest){
      aj.xmlhttprequest.open("get", aj.targeturl);
      aj.xmlhttprequest.send(null);
    }else{
      aj.xmlhttprequest.open("get", aj.targeturl, true);
      aj.xmlhttprequest.send();
    }
  }
  aj.post=function(targeturl, sendstring, resulthandle){
    aj.targeturl=targeturl;
    if(typeof(sendstring)=="object"){
      var str="";
      for(var pro in sendstring){
        str+=pro+"="+sendstring[pro]+"&";
      }
      aj.sendstring=str.substr(0, str.length-1);
    }else{
      aj.sendstring=sendstring;
    }
    if(resulthandle!=null){
      aj.xmlhttprequest.onreadystatechange=aj.processhandle;
      aj.resulthandle=resulthandle;
    }
    aj.xmlhttprequest.open("post", targeturl);
    aj.xmlhttprequest.setrequestheader("content-type", "application/x-www-form-urlencoded");
    aj.xmlhttprequest.send(aj.sendstring);
  }
  return aj;
}

使用方法：

<script type="text/javascript">
  var ajax = ajax(); // 实例化对象，默认为 http，如果传入 xml，返回 xml 对象
  // ajax 的 get 方法使用说明
  /**
  * function(targeturl, resulthandle)
  * @param string targeturl 传递过去的 url 地址
  * @param string resulthandle 回调函数，可选项
  */
  ajax.get('test.php?name=liruxing&email=[e-mail]', function(data) {
    eval("var obj="+data);
    alert(obj.name);
    alert(obj.email);
  });
  // ajax 的 post 方法使用说明
  /**
  * function(targeturl, sendstring, resulthandle)
  * @param string targeturl 传递过去的 url 地址
  * @param string sendstring 参数值
  * @param string resulthandle 回调函数，可选项
  */
  ajax.post('test.php', 'name=liruxing&email=[e-mail]', function(data){
    eval("var obj="+data);
    alert(obj.name);
    alert(obj.email);
  })
  // post 第二种格式，第二个参数为 json 格式
  ajax.post('test.php', {name:'李茹星',email:'[e-mail]'}, function(data){
    eval("var obj="+data);
    alert(obj.name);
    alert(obj.email);
  })
</script>

更多关于ajax相关内容感兴趣的读者可查看本站专题：《jquery中ajax用法总结》、《javascript中ajax操作技巧总结》、《php+ajax技巧与应用小结》和《asp.net ajax技巧总结专题》

希望本文所述对大家ajax程序设计有所帮助。