js implementiert die objektorientierte Kapselung von Ajax-Requests_Javascript-Fähigkeiten

AJAX ist eine Technologie zur Erstellung schneller, dynamischer Webseiten. AJAX ermöglicht die asynchrone Aktualisierung von Webseiten, indem im Hintergrund kleine Datenmengen mit dem Server ausgetauscht werden. 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:

• 1. XMLHttp-Objekt erstellen
  
• 2. Senden Sie eine Anfrage: einschließlich Öffnen eines Links und Senden einer Anfrage
  
• 3. Verarbeiten Sie die Antwort
  

Wenn Sie Ajax ohne die 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 ist unpraktisch. Und Sie können sehen, dass eine Geschäftslogikoperation möglicherweise verarbeitet werden muss, nachdem der Server zu diesem Zeitpunkt erfolgreich geantwortet hat , Sie müssen die Operation in die onreadystatechage-Methode schreiben.
Um die Wiederverwendung von Code zu erleichtern, können wir Folgendes tun:

• 1. Nachdem der Server erfolgreich geantwortet hat, wird die zu verarbeitende Geschäftslogik dem Entwickler selbst überlassen
• 2. Objektorientierte Kapselung von Anfragen

Nach der Bearbeitung sollte es so 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 : 'a=n', 
        url : 'TestServlet', 
        success : function(reponseText) { 
          console.info("success : "+reponseText); 
        }, 
        error : function(reponseText) { 
          console.info("error : "+reponseText); 
        } 
    }); 
  } 
} 
 
var ajax = { 
  xmlHttp : '', 
  url:'', 
  data:'', 
  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); 
  } 
};

Der obige Code implementiert Ajax-Operationen ähnlich wie JQuery. Ich hoffe, dass er für das Lernen aller hilfreich ist.