javascript中ajax用法

隨著Web應用越來越複雜，非同步JavaScript和XML (Ajax) 技術被越來越多地用來實作動態Web頁面。 Ajax允許你透過在背景發送非同步請求來動態更新Web頁面，而不必刷新整個頁面。在這篇文章中，我們將探討JavaScript中Ajax的使用方法。

1. 建立XMLHttpRequest物件

XMLHttpRequest物件是Ajax的核心。它負責發送HTTP請求和接收伺服器回應。在 JavaScript 中，你可以透過建立 XMLHttpRequest 物件來啟動一個 Ajax 請求。

var xhr = new XMLHttpRequest();

如果瀏覽器不支援XMLHttpRequest，可以考慮使用ActiveXObject，如下所示：

var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. 發送HTTP 請求

#當創建完XMLHttpRequest 物件後，可以設定請求的URL 和方法，然後發送該請求。

xhr.open('GET', 'http://example.com/data', true);
xhr.send();

在上面的程式碼中，我們使用xhr.open()方法來以GET方式開啟一個URL。第三個參數標示非同步請求。

要標示以POST 方式傳送請求，可以使用以下程式碼：

xhr.open('POST', 'http://example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name1=value1&name2=value2');

在上面的程式碼中，我們使用xhr.setRequestHeader() 方法設定HTTP 頭資訊，並使用send()方法發送請求。

3. 傳送表單資料

如果你需要傳送表單數據，可以使用 FormData 物件。

var formData = new FormData();
formData.append('username', 'john');
formData.append('password', 'secret');

xhr.open('POST', 'http://example.com/login');
xhr.send(formData);

在上面的程式碼中，我們使用 FormData 物件來發送表單數據，然後使用發送方法來發送請求。

4. 處理伺服器回應

在觸發 XMLHttpRequest 的 readyStateChange 事件時，可以透過檢查 HTTP 回應碼和回應文字來判斷請求是否成功。以下是一些常見狀態碼：

• 200：OK
• 404：找不到頁面
• 500：伺服器錯誤

以下是一個簡單的處理函數：

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};

在上面的程式碼中，我們使用xhr.readyState 屬性，該屬性傳回XMLHttpRequest 物件的狀態。如果 readyState 為 4，則回應已完成。

xhr.status 屬性傳回 HTTP 狀態碼。如果狀態代碼為 200，則表示成功。

xhr.responseText 屬性包含伺服器回應的文字。

5. 處理錯誤

如果伺服器回應的 HTTP 狀態碼不是200，則認為請求失敗。發生錯誤時，可以在給予提示後重試操作。

xhr.onerror = function() {
  alert('请求失败，请重试');
};

在上面的程式碼中，我們使用 xhr.onerror 屬性以及 alert() 方法來給出一個錯誤提示。

6. 取消請求

如果需要取消 Ajax 請求，可以使用 xhr.abort() 方法。

xhr.abort();

在上面的程式碼中，我們使用 xhr.abort() 方法來取消請求。

總結

以上是 Javascript 中 Ajax 的基本用法。 Ajax 讓你動態更新 Web 頁面，讓 Web 應用變得更容易使用和回應。當使用 Ajax 時，請記住使用非同步請求。

以上是javascript中ajax用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！