Mehrere JavaScript-Methoden zur Implementierung von nativem Ajax

In datenbasierten Anwendungen können die von Benutzern benötigten Daten, wie z. B. Kontaktlisten, von einem Server unabhängig von der eigentlichen Webseite abgerufen und dynamisch in die Webseite geschrieben werden, wodurch das langsame Webanwendungserlebnis beeinträchtigt und verbessert wird Es sieht aus wie eine Desktop-Anwendung. Da js über verschiedene Frameworks wie jquery verfügt, ist die Verwendung von Ajax recht einfach geworden. Aber manchmal ist es aus Gründen der Einfachheit nicht erforderlich, ein riesiges JS-Plug-In wie JQuery in das Projekt zu laden. Aber was soll ich tun, wenn ich die Ajax-Funktion verwenden möchte? Lassen Sie mich Ihnen verschiedene Möglichkeiten zur Verwendung von Javascript zur Implementierung von nativem Ajax vorstellen.

Zunächst müssen Sie ein XMLHttpRequest-Objekt erstellen, bevor Sie Ajax implementieren. Wenn der Browser, der das Objekt erstellt hat, es nicht unterstützt, müssen Sie ein ActiveXObject erstellen. Die spezifische Methode lautet wie folgt:

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

Im Folgenden wird das oben erstellte xmlHttp verwendet, um die einfachste Ajax-Get-Anfrage zu implementieren:

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

Verwenden Sie das oben erstellte xmlHttp, um die einfachste Ajax-Post-Anfrage zu implementieren:

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

Lassen Sie uns eine Kapselung der $.ajax-Methode teilen, die im Internet gesehene JQuery simuliert:

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

Diese Methode ist ebenfalls sehr einfach zu verwenden, genau wie die $.ajax-Methode von jquery, verfügt jedoch nicht über so viele Parameter. Es implementiert lediglich einige grundlegende Ajax-Funktionen. Die Verwendungsmethode ist wie folgt:

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

Haben Sie die oben genannten Methoden von Javascript gelernt, um natives Ajax zu implementieren? Ich hoffe, es hilft allen.

Verwandte Empfehlungen:

So implementieren Sie Ajax, um zu einer neuen JSP-Seite zu springen

jQuery verwendet Ajax, um lokale JSON-Dateien zu lesen Studie

Wie man mehrere Ajax-Seitenanfragen und das Problem der Seitenladeblockierung löst

Das obige ist der detaillierte Inhalt vonMehrere JavaScript-Methoden zur Implementierung von nativem Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!