最新的Web開發教程
 

AJAX介紹


AJAX是開發者的夢想,因為你可以:

  • 更新網頁無需重新加載頁面
  • 從服務器請求數據 - 在頁面加載後,
  • 從服務器接收數據 - 在頁面加載後,
  • 將數據發送到服務器 - 在後台

試一試在每章的例子

在每章的,您可以在線編輯的例子,並點擊一個按鈕來查看結果。

AJAX實例

Let AJAX change this text

試一試»


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


AJAX是基於Internet標準

AJAX是基於Internet標準,並且使用的組合:

  • XMLHttpRequest對象(檢索從Web服務器的數據)
  • JavaScript/DOM (顯示/使用數據)

XMLHttpRequest是一個誤導性的名字。 你不必了解XML使用AJAX。


谷歌建議

AJAX是由谷歌做流行的2005年,與谷歌建議。

谷歌建議使用AJAX來創建一個非常動態的Web界面:當你在谷歌的搜索框開始輸入,一個JavaScript發送信件開了個服務器和服務器返回的建議列表。


開始使用AJAX今天

AJAX是基於現有的標準。 這些標準已被用於開發了數年。 請閱讀我們的下一章,看看它是如何工作!