jQuery での生の Ajax と Ajax

オリジナルの Ajax と jQuery での Ajax

まず、例を通して、jQuery を使用して Ajax を実装するのがいかに簡単かを見てみましょう。以下は生の Ajax を使用した例です:

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

上の例では、data/AjaxGetCityInfo.aspx?resultType=html アドレスは HTML コードを返します。

独自の Ajax を使用すると、XmlHttpRequest オブジェクトの作成、リクエストのステータスの決定、コールバック関数の作成など、さらに多くのことを行う必要があります。

jQuery の Load メソッドを使用すると、必要な文は 1 つの文だけです:

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

今は jQuery の Ajax 関数を使用するだけで、ページがよりシンプルになりました:

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

学び続ける

新しいファイル

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

提出するリセットコード

自動運転