原始Ajax與jQuery中的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方法，只需要一句話：
$("#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>
預覽
Clear
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 