Plusieurs méthodes JavaScript pour implémenter l'ajax natif-js tutoriel-php.cn

Plusieurs méthodes JavaScript pour implémenter l'ajax natif

小云云

Libérer： 2017-11-18 10:16:03

original

2746 Les gens l'ont consulté

Dans les applications basées sur des données, les données requises par les utilisateurs, telles que les listes de contacts, peuvent être obtenues à partir d'un serveur indépendant de la page Web réelle et peuvent être écrites dynamiquement dans la page Web, colorant ainsi l'expérience lente de l'application Web et rendant cela ressemble à une même application de bureau. Puisque js dispose de différents frameworks, tels que jquery, utiliser ajax est devenu assez simple. Mais parfois, par souci de simplicité, le projet n'a pas besoin de charger un énorme plug-in js comme jquery. Mais que dois-je faire si je souhaite utiliser la fonction ajax ? Permettez-moi de partager avec vous plusieurs façons d'utiliser javascript pour implémenter l'ajax natif.

Tout d'abord, vous devez créer un objet XMLHttpRequest avant d'implémenter ajax. Si le navigateur qui a créé l'objet ne le prend pas en charge, vous devez créer un ActiveXObject. La méthode spécifique est la suivante :

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

Copier après la connexion

Ce qui suit utilise le xmlHttp créé ci-dessus pour implémenter la requête get ajax la plus simple :

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

Copier après la connexion

Utilisez le xmlHttp créé ci-dessus pour implémenter la requête de publication ajax la plus simple :

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(&#39;success&#39;);
}else{
alert(&#39;fail&#39;);
}
}
}

Copier après la connexion

Partageons une encapsulation de la méthode $.ajax qui simule jquery vue sur Internet :

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+")"));
               }
           }
       }
   };
};
该

Copier après la connexion

Cette méthode est également très simple à utiliser, tout comme la méthode $.ajax de jquery, mais elle n'a pas autant de paramètres. Il implémente simplement quelques fonctions ajax de base. La méthode d'utilisation est la suivante :

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

Copier après la connexion

Avez-vous appris les méthodes javascript ci-dessus pour implémenter l'ajax natif ? J'espère que cela aide tout le monde.

Recommandations associées :

Comment implémenter ajax pour accéder à une nouvelle page jsp

jQuery utilise ajax pour lire les fichiers json locaux Cas étudier

Comment résoudre plusieurs requêtes de pages ajax et le problème de blocage du chargement des pages

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!