AJAX是開發者的夢想,因為你可以:
- 更新網頁無需重新加載頁面
- 從服務器請求數據 - 在頁面加載後,
- 從服務器接收數據 - 在頁面加載後,
- 將數據發送到服務器 - 在後台
試一試在每章的例子
在每章的,您可以在線編輯的例子,並點擊一個按鈕來查看結果。
AJAX例子解釋:
HTML頁
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
HTML頁面包含一個<div>部分和<button> 。
該<div>部分是用來顯示來自服務器的信息。
在<button>調用一個函數(如果點擊它)。
的功能從Web服務器請求數據,並將其顯示:
功能loadDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
你應該已經知道
繼續之前,你應該具備以下有基本的了解:
- HTML
- JavaScript的
如果你想先學習這些內容,請看我們的教程主頁 。
什麼是AJAX ?
AJAX =異步JavaScript和XML。
AJAX是一種誤導名稱。 AJAX應用程序可能使用XML傳輸數據,但同樣常見的數據傳輸為純文本或JSON文本。
AJAX是用於創建快速,動態網頁的技術。
AJAX允許網頁通過交換少量數據與後台服務器異步更新。 這意味著,有可能更新網頁的部分,而不刷新整個頁面。
經典網頁,(不使用AJAX)必須重新加載整個頁面如果內容應該改變。
谷歌地圖,Gmail,YouTube上,和Facebook:使用AJAX應用的例子。
如何Ajax的工作原理
AJAX是基於Internet標準
AJAX是基於Internet標準,並且使用的組合:
- XMLHttpRequest對象(檢索從Web服務器的數據)
- JavaScript/DOM (顯示/使用數據)
XMLHttpRequest是一個誤導性的名字。 你不必了解XML使用AJAX。
谷歌建議
AJAX是由谷歌做流行的2005年,與谷歌建議。
谷歌建議使用AJAX來創建一個非常動態的Web界面:當你在谷歌的搜索框開始輸入,一個JavaScript發送信件開了個服務器和服務器返回的建議列表。
開始使用AJAX今天
AJAX是基於現有的標準。 這些標準已被用於開發了數年。 請閱讀我們的下一章,看看它是如何工作!