欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-18 12:58:27
本文实例讲述了一个简单ajax类库及使用方法。分享给大家供大家参考,具体如下: ajax.js function ajax(recvtype){ var...

本文实例讲述了一个简单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=liruxing1715@sina.com', 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=liruxing1715@sina.com', function(data){
    eval("var obj="+data);
    alert(obj.name);
    alert(obj.email);
  })
  // post 第二种格式,第二个参数为 json 格式
  ajax.post('test.php', {name:'李茹星',email:'liruxing1715@sina.com'}, function(data){
    eval("var obj="+data);
    alert(obj.name);
    alert(obj.email);
  })
</script>

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

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