Ajax mentah lwn. Ajax dalam jQuery
Ajax dan Ajax Asal dalam jQuery
Pertama, mari kita lihat betapa mudahnya untuk melaksanakan Ajax dengan jQuery melalui contoh. Berikut ialah contoh menggunakan Ajax mentah:
<!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;
}
} //由于涉及到同源策略，需要服務(wù)器端的支持
xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultType=html", true);
xhr.send(null);
});
}); //跨瀏覽器獲取 XmlHttpRequest 對(duì)象
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>Dalam contoh di atas, alamat data/AjaxGetCityInfo.aspx?resultType=html mengembalikan sekeping kod HTML.
Menggunakan Ajax asal, kita perlu melakukan lebih banyak perkara, seperti membuat objek XmlHttpRequest, menentukan status permintaan, menulis fungsi panggil balik, dsb.
Dengan kaedah Muat jQuery, hanya satu ayat diperlukan:
$("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType": "html" });Sekarang saya hanya menggunakan fungsi Ajax jQuery, dan halaman saya menjadi lebih mudah:
<!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>
