Ausführliche Erläuterung von Anwendungsbeispielen der Javascript-Implementierung von Ajax-Anfrageschritten

AJAX ist eine Technologie zur Erstellung schneller, dynamischer Webseiten. AJAX ermöglicht die asynchrone Aktualisierung von Webseiten durch den Austausch kleiner Datenmengen mit dem Server im Hintergrund. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Die Verwendung von Ajax-Anfragen in js umfasst im Allgemeinen drei Schritte:

Erstellen eines XMLHttp-Objekts

Senden einer Anfrage: einschließlich Öffnen des Links, Anfrage senden

Prozessantwort

Wenn Sie Ajax ohne Verwendung eines JS-Frameworks verwenden möchten, müssen Sie möglicherweise Code wie folgt schreiben

<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>

Wenn Sie diese Art von Ajax-Anfrage in einer komplexeren Geschäftslogik verwenden, wird der Code aufgebläht und lässt sich nur schwer wiederverwenden. Sie können sehen, dass eine Geschäftslogikoperation möglicherweise verarbeitet werden muss, nachdem der Server zu diesem Zeitpunkt erfolgreich geantwortet hat Darf nicht. Schreiben Sie den Vorgang nicht in die onreadystatechage-Methode.
Um die Wiederverwendung von Code zu erleichtern, können wir Folgendes tun:

Nachdem der Server erfolgreich geantwortet hat, wird die zu verarbeitende Geschäftslogik den Entwicklern selbst überlassen

Objektorientierte Kapselung der Anfrage durchführen

Nach der Verarbeitung sollte es wie folgt aussehen:

<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); 
  } 
};

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Anwendungsbeispielen der Javascript-Implementierung von Ajax-Anfrageschritten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!