Several JavaScript methods to implement native ajax-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Several JavaScript methods to implement native ajax

Nov 18, 2017 am 10:16 AM

ajax javascript js

In data-based applications, the data required by users, such as contact lists, can be obtained from a server independent of the actual web page and can be dynamically written into the web page, coloring the slow web application experience and making it look like a desktop Same application. Since js has various frameworks, such as jquery, using ajax has become quite simple. But sometimes in order to pursue simplicity, there may be no need to load a huge js plug-in like jquery in the project. But what should I do if I want to use ajax function? Let me share with you several ways to use javascript to implement native ajax.

First, you must create an XMLHttpRequest object before implementing ajax. If the browser that creates the object is not supported, you need to create an ActiveXObject. The specific method is as follows:

var xmlHttp;
function createxmlHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
}else if(window.XMLHttpRequest)
xmlHttp=new XMLHttpRequest();
}

Copy after login

The following uses the xmlHttp created above to implement the simplest ajax get request:

function doGet(url){//注意在传参数值的时候最好使用encodeURI处理一下，防止乱码
createxmlHttpRequest();
xmlHttp.open(&quot;GET&quot;,url);
xmlHttp.send(null);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&amp;&amp;xmlHttp.status==200){
alert(&#39;success&#39;);
}else{
alert(&#39;fail&#39;);
}
}
}

Copy after login

Uses the xmlHttp created above xmlHttp implements the simplest ajax post request:

function doPost(url,data){//注意在传参数值的时候最好使用encodeURI处理一下，防止乱码
createxmlHttpRequest();
xmlHttp.open(&quot;POST&quot;,url);
xmlHttp.setRequestHeader(&quot;Content-Type&quot;,&quot;application/x-www-form-urlencoded&quot;);
xmlHttp.send(data);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&amp;&amp;xmlHttp.status==200){
alert(&#39;success&#39;);
}else{
alert(&#39;fail&#39;);
}
}
}

Copy after login

Let’s share an encapsulation of the $.ajax method that simulates jquery seen on the Internet:

var createAjax=function(){
   var xhr=null;
   try{//IE系列浏览器
       xhr=new ActiveXObject(&quot;microsoft.xmlhttp&quot;);
   }catch(e1){
       try{//非IE浏览器
           xhr=new XMLHttpRequest();
       }catch(e2){
           window.alert(&quot;您的浏览器不支持ajax，请更换！&quot;);
       }
   }
   return xhr;
};
var ajax=function(conf){
   var type=conf.type;//type参数,可选 
   var url=conf.url;//url参数，必填 
   var data=conf.data;//data参数可选，只有在post请求时需要 
   var dataType=conf.dataType;//datatype参数可选 
   var success=conf.success;//回调函数可选
   if(type==null){//type参数可选，默认为get
       type=&quot;get&quot;;
   }
   if(dataType==null){//dataType参数可选，默认为text
       dataType=&quot;text&quot;;
   }
   var xhr=createAjax();
   xhr.open(type,url,true);
   if(type==&quot;GET&quot;||type==&quot;get&quot;){
       xhr.send(null);
   }else if(type==&quot;POST&quot;||type==&quot;post&quot;){
       xhr.setRequestHeader(&quot;content-type&quot;,&quot;application/x-www-form-urlencoded&quot;);
       xhr.send(data);
   }
   xhr.onreadystatechange=function(){
       if(xhr.readyState==4&amp;&amp;xhr.status==200){
           if(dataType==&quot;text&quot;||dataType==&quot;TEXT&quot;){
               if(success!=null){//普通文本
                   success(xhr.responseText);
               }
           }else if(dataType==&quot;xml&quot;||dataType==&quot;XML&quot;){
               if(success!=null){//接收xml文档
                   success(xhr.responseXML);
               }
           }else if(dataType==&quot;json&quot;||dataType==&quot;JSON&quot;){
               if(success!=null){//将json字符串转换为js对象
                   success(eval(&quot;(&quot;+xhr.responseText+&quot;)&quot;));
               }
           }
       }
   };
};
该

Copy after login

This method is also very simple to use. It’s the same as jquery’s $.ajax method, but it doesn’t have as many parameters. It just simply implements some basic ajax functions. The usage method is as follows:

ajax({
    type:&quot;post&quot;,//post或者get，非必须
    url:&quot;test.jsp&quot;,//必须的
    data:&quot;name=dipoo&amp;info=good&quot;,//非必须
    dataType:&quot;json&quot;,//text/xml/json，非必须
    success:function(data){//回调函数，非必须
        alert(data.name);
    }
});

Copy after login

Have you learned the above methods of javascript to implement native ajax? I hope everyone has to help.

Related recommendations:

How to implement ajax to jump to a new jsp page

jQuery uses ajax to read local json files Case

How to solve the problem of multiple ajax page requests and page loading blocking

The above is the detailed content of Several JavaScript methods to implement native ajax. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn