JavaScript 是網路上普遍使用的程式語言之一,可以用來為網站添加動態互動性。而 AJAX 是一種在不刷新整個頁面的情況下,與伺服器進行非同步資料交換的技術。在很多網站上,我們都能夠看到透過 AJAX 取得資料的例子。如何使用 JavaScript 發送 AJAX 請求並接收回傳值?本文將為你介紹。
傳送AJAX 請求的主要步驟包括:
- 建立XMLHttpRequest 物件
- 指定請求方法和請求位址
##設定請求頭部資訊- 傳送請求
- 接收與處理伺服器傳回的資料
- 建立XMLHttpRequest 物件
-
先透過JavaScript 程式碼來建立XMLHttpRequest 物件。
var xhr = new XMLHttpRequest();
登入後複製
指定請求方法和請求位址
接下來,我們需要指定請求方法和請求位址。例如,如果需要使用 GET 方法向 /api/data.php 發送請求,我們可以使用以下程式碼。
xhr.open('GET', '/api/data.php', true);
登入後複製
其中,第一個參數指定請求方法,第二個參數指定請求位址,第三個參數則指定是否非同步執行,通常為 true。
如果需要使用 POST 方法,則可以使用以下程式碼。
xhr.open('POST', '/api/data.php', true);
登入後複製
設定請求頭部訊息
在發送請求之前,我們還需要設定請求頭部訊息。例如,可以設定 Content-Type 為 application/x-www-form-urlencoded。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
登入後複製
發送請求
接下來,我們可以用 send() 方法發送請求。如果使用 GET 方法,則可以只傳入一個空字串作為參數。例如:
如果使用 POST 方法,則可以傳入需要傳送的資料。例如:
xhr.send('name=John&age=25');
登入後複製
接收和處理伺服器傳回的資料
當伺服器回傳回應時,我們可以透過 readyState 屬性來偵測請求狀態。 readyState 有五個可能的值:
0 (未初始化):代表 xhr 物件已經創建,但未呼叫 open() 方法。 1 (正在傳送):代表 open() 方法已經調用,但 send() 方法未被調用。 2 (已傳送):代表 send() 方法已經調用,但伺服器尚未回傳回應。 3 (正在接收):代表回應已經開始接收,但未完成。 4 (完成):代表回應已經完成,可以存取伺服器傳回的資料。
我們可以使用以下程式碼來監聽 readyState 的變更。
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 处理服务器返回的数据
console.log(xhr.responseText);
}
}
登入後複製
在 readyState 到達 4 時,我們可以存取 responseText 屬性來取得伺服器傳回的回應資訊。
以上就是使用 JavaScript 傳送 AJAX 請求的基本步驟。透過這些步驟,我們可以輕鬆地向伺服器發送非同步請求,並取得回應資料。
以上是javascript發送ajax請求參數的詳細內容。更多資訊請關注PHP中文網其他相關文章!