Analysis of a simple Ajax class library and usage examples-JS Tutorial-php.cn

Analysis of a simple Ajax class library and usage examples

韦小宝

Release： 2018-01-10 09:53:55

Original

1317 people have browsed it

This article mainly introduces a simple Ajax class library and how to use it. It analyzes the source code and specific usage techniques of the ajax class library in the form of examples. Friends who are interested in ajax can refer to this article

The example in this article describes a simple Ajax class library and how to use it. Share it with everyone for your reference, the details are as follows:

ajax.js

function Ajax(recvType){
  var aj=new Object();
  aj.recvType=recvType ? recvType.toUpperCase() : &#39;HTML&#39; //HTML XML
  aj.targetUrl=&#39;&#39;;
  aj.sendString=&#39;&#39;;
  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=[&#39;Microsoft.XMLHTTP&#39;, &#39;MSXML.XMLHTTP&#39;, &#39;Msxml2.XMLHTTP.7.0&#39;,&#39;Msxml2.XMLHTTP.6.0&#39;,&#39;Msxml2.XMLHTTP.5.0&#39;, &#39;Msxml2.XMLHTTP.4.0&#39;, &#39;MSXML2.XMLHTTP.3.0&#39;, &#39;MSXML2.XMLHTTP&#39;];
    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;
}

Copy after login

How to use:

<script type="text/javascript">
  var ajax = Ajax(); // 实例化对象，默认为 HTTP，如果传入 XML，返回 XML 对象
  // Ajax 的 get 方法使用说明
  /**
  * function(targetUrl, resultHandle)
  * @param string targetUrl 传递过去的 URL 地址
  * @param string resultHandle 回调函数，可选项
  */
  ajax.get(&#39;test.php?name=liruxing&email=liruxing1715@sina.com&#39;, 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(&#39;test.php&#39;, &#39;name=liruxing&email=liruxing1715@sina.com&#39;, function(data){
    eval("var obj="+data);
    alert(obj.name);
    alert(obj.email);
  })
  // post 第二种格式，第二个参数为 Json 格式
  ajax.post(&#39;test.php&#39;, {name:&#39;李茹星&#39;,email:&#39;liruxing1715@sina.com&#39;}, function(data){
    eval("var obj="+data);
    alert(obj.name);
    alert(obj.email);
  })
</script>

Copy after login

The above is this article All the content, I hope it will be helpful to everyone’s study! !

Related recommendations:

Ajax implementation of flicker-free scheduled refresh page example code

Ajax asynchronous file upload example code sharing

About the use of get and post in Ajax

The above is the detailed content of Analysis of a simple Ajax class library and usage examples. For more information, please follow other related articles on the PHP Chinese website!