Ajax brut contre Ajax dans jQuery

Ajax original et Ajax dans jQuery

Tout d'abord, voyons à quel point il est simple d'implémenter Ajax avec jQuery à travers un exemple. Voici un exemple utilisant l'Ajax brut :

<!doctype html><html><head>
 <meta charset="utf-8"/>
 <title>jQuery Ajax</title>
 <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script>
   $(function() {      var xhr = new AjaxXmlHttpRequest();
     $("#btnAjaxOld").click(function(event) {        var xhr = new AjaxXmlHttpRequest();
       xhr.onreadystatechange = function() {          if (xhr.readyState == 4) {            document.getElementById("divResult").innerHTML = xhr.responseText;
         }
       }        //由于涉及到同源策略，需要服务器端的支持
       xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultType=html", true);
       xhr.send(null);
     });
   });    //跨浏览器获取 XmlHttpRequest 对象
   function AjaxXmlHttpRequest() {      var xmlHttp;      try {        // Firefox, Opera 8.0+, Safari
       xmlHttp = new XMLHttpRequest();
     } catch (e) {        // Internet Explorer
       try {
         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (e) {          try {
           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
           alert("Your browser nonsupport AJAX！");            return false;
         }
       }
     }      return xmlHttp;
   }  </script></head><body>    
 <button id="btnAjaxOld">original ajax call</button>
 <div id="divResult"></div>
</body>
</html>

Dans l'exemple ci-dessus, l'adresse data/AjaxGetCityInfo.aspx?resultType=html renvoie un morceau de code HTML.

En utilisant l'Ajax d'origine, nous devons faire plus de choses, comme créer un objet XmlHttpRequest, déterminer l'état de la demande, écrire des fonctions de rappel, etc.

Avec la méthode Load de jQuery, une seule phrase est nécessaire :

$("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType": "html" });

Maintenant, j'utilise simplement la fonction Ajax de jQuery, et ma page est devenue plus simple :

<!doctype html><html lang="zh"><head>
  <meta charset="utf-8"/>
  <title>jQuery Ajax</title>
  <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    $(function() {            
      $("#btnAjaxJquery").click(function(event) {
        $("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType": "html" });
      });
    })        
  </script></head><body>    
  <button id="btnAjaxJquery">use jQuery load method</button>
  <div id="divResult"></div>
  </body>
  </html>

Formation continue

nouveau fichier

<!doctype html><html><head> <meta charset="utf-8"/> <title>jQuery Ajax</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(function() { var xhr = new AjaxXmlHttpRequest(); $("#btnAjaxOld").click(function(event) { var xhr = new AjaxXmlHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { document.getElementById("divResult").innerHTML = xhr.responseText; } } //由于涉及到同源策略，需要服务器端的支持 xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultType=html", true); xhr.send(null); }); }); //跨浏览器获取 XmlHttpRequest 对象 function AjaxXmlHttpRequest() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser nonsupport AJAX！"); return false; } } } return xmlHttp; } </script></head><body> <button id="btnAjaxOld">original ajax call</button> <div id="divResult"></div> </body> </html>

soumettre Réinitialiser le code

Opération automatique