1.AJAX(asynchronous javascript and xml)簡介
? ? AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù)穆律，在不重新加載整個頁面的情況下。AJAX = 異步 JavaScript 和 XML寓落。 AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。
? ? AJAX is not a programming language. It is just a technique for creating better and more interactive web applications.
圖1 使用ajax響應(yīng)搜索輸入
2.AJAX使用
2.1 發(fā)送請求
? ? XMLHttpRequest 是 AJAX 的基礎(chǔ)疫诽。
? ?如需將請求發(fā)送到服務(wù)器唉匾，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
GET 還是 POST？
與 POST 相比铅协，GET 更簡單也更快捷沸，并且在大部分情況下都能用。然而狐史，在以下情況中痒给，請使用 POST 請求:
- 無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
- 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
- 發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠
? ?具體知識以及使用可參考w3school官網(wǎng)
2.2 接收請求
? ?如需獲得來自服務(wù)器的響應(yīng)预皇，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性侈玄。
3.應(yīng)用實例
? ?通過ajax請求json數(shù)據(jù)，并展示吟温。
圖2 案例網(wǎng)頁
? ?網(wǎng)頁元素代碼:
<body>
<div id="container">
<div id="father">
<a id="name">XXX</a><a>是一位</a><a id="age">XX</a><a>歲的天才！</a>
<br />
<button id="btn" onclick="loadRequest()">變化</button>
</div>
</div>
</body>
? ?js代碼:
<script>
function loadRequest() {
var xhr;
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById("name").innerHTML = data.name;
document.getElementById("age").innerHTML = data.age;
}
}
xhr.open("GET", "./data.xml", true);
xhr.send();
}
</script>
? ?通過實例化XMLHttpRequest對象突颊，將存儲數(shù)據(jù)的.xml文件中的字符串通過JSON.parse()方法轉(zhuǎn)化為對象鲁豪，再將對象中的響應(yīng)數(shù)值傳輸給網(wǎng)頁頁面元素上。
圖3 數(shù)據(jù)對象
? ?頁面刷新：
圖4 ajxa響應(yīng)
