Explication détaillée des exemples d'utilisation de l'implémentation javascript des étapes de requête ajax

AJAX est une technologie permettant de créer des pages Web rapides et dynamiques. AJAX permet aux pages Web de se mettre à jour de manière asynchrone en échangeant de petites quantités de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

Utiliser les requêtes ajax en js implique généralement trois étapes :

Créer un objet XMLHttp

Envoyer une requête : notamment ouvrir le lien, envoi de la demande

Réponse du processus

Si vous souhaitez utiliser ajax sans utiliser de framework js, vous devrez peut-être écrire le code comme suit

<span style="font-size:14px;">var xmlHttp = xmlHttpCreate();//创建对象 
xmlHttp.onreadystatechange = function(){//响应处理 
  if(xmlHttp.readyState == 4){ 
    console.info("response finish"); 
    if(xmlHttp.status == 200){ 
       console.info("reponse success"); 
      console.info(xmlHttp.responseText); 
    } 
  } 
} 
xmlHttp.open("get","TestServlet",true);//打开链接 
 
xmlHttp.send(null);//发送请求 
 
function xmlHttpCreate() { 
  var xmlHttp; 
  try { 
    xmlHttp = new XMLHttpRequest;// ff opera 
  } catch (e) { 
    try { 
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");// ie 
    } catch (e) { 
      try { 
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e) { 
 
      } 
    } 
  } 
  return xmlHttp; 
} 
 
console.info(xmlHttpCreate());</span>

Si vous utilisez ce type de requête ajax dans une logique métier plus complexe, le code sera volumineux et peu pratique à réutiliser, et vous pouvez voir qu'une opération de logique métier devra peut-être être traitée une fois que le serveur aura répondu avec succès. ne doit pas Ne pas écrire l'opération dans la méthode onreadystatechage.
Afin de faciliter la réutilisation du code, nous pouvons procéder comme suit

Une fois que le serveur a répondu avec succès, la logique métier à traiter est laissée aux développeurs eux-mêmes 🎜>

Effectuer une encapsulation orientée objet de la requête

Après traitement, elle devrait ressembler à ce qui suit :

<pre code_snippet_id="342814" snippet_file_name="blog_20140513_2_2489549" name="code" class="javascript">window.onload = function() { 
  document.getElementById("hit").onclick = function() { 
    console.info("开始请求"); 
    ajax.post({ 
        data : &#39;a=n&#39;, 
        url : &#39;TestServlet&#39;, 
        success : function(reponseText) { 
          console.info("success : "+reponseText); 
        }, 
        error : function(reponseText) { 
          console.info("error : "+reponseText); 
        } 
    }); 
  } 
} 
 
var ajax = { 
  xmlHttp : &#39;&#39;, 
  url:&#39;&#39;, 
  data:&#39;&#39;, 
  xmlHttpCreate : function() { 
    var xmlHttp; 
    try { 
      xmlHttp = new XMLHttpRequest;// ff opera 
    } catch (e) { 
      try { 
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");// ie 
      } catch (e) { 
        try { 
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (e) { 
 
        } 
      } 
    } 
    return xmlHttp; 
  }, 
  post:function(jsonObj){ 
    ajax.data = jsonObj.data; 
    ajax.url = jsonObj.url; 
    //创建XMLHttp对象，打开链接、请求、响应 
    ajax.xmlHttp = ajax.xmlHttpCreate(); 
    ajax.xmlHttp.open("post",ajax.url,true); 
    ajax.xmlHttp.onreadystatechange = function(){ 
      if(ajax.xmlHttp.readyState == 4){ 
        if(ajax.xmlHttp.status == 200){ 
          jsonObj.success(ajax.xmlHttp.responseText); 
        }else{ 
          jsonObj.error(ajax.xmlHttp.responseText); 
        } 
      } 
    } 
    ajax.xmlHttp.send(ajax.data); 
  } 
};

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!