オリジナルの 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>
次のセクション