溫馨提示×

ajax深入淺出怎樣實現(xiàn)異步請求

小樊
81
2024-10-23 08:29:16
欄目: 編程語言

《AJAX深入淺出》是一本關(guān)于AJAX編程的經(jīng)典教材。在這本書中，異步請求的實現(xiàn)主要依賴于JavaScript中的XMLHttpRequest對象。以下是一個簡單的示例，展示了如何使用XMLHttpRequest對象實現(xiàn)異步請求：

  1. 創(chuàng)建一個HTML文件，如ajax_example.html，并在其中添加以下內(nèi)容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX 異步請求示例</title>
    <script src="ajax_example.js"></script>
</head>
<body>
    <button onclick="sendRequest()">發(fā)送請求</button>
    <div id="result"></div>
</body>
</html>

在這個示例中，我們創(chuàng)建了一個按鈕，當點擊該按鈕時，會觸發(fā)sendRequest函數(shù)。同時，我們還有一個<div>元素，用于顯示請求的結(jié)果。

  1. 創(chuàng)建一個JavaScript文件，如ajax_example.js，并在其中添加以下內(nèi)容：
function sendRequest() {
    // 創(chuàng)建一個新的XMLHttpRequest對象
    var xhr = new XMLHttpRequest();

    // 設(shè)置請求的類型和URL
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);

    // 設(shè)置請求完成時的回調(diào)函數(shù)
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 400) {
            // 請求成功，將返回的數(shù)據(jù)解析為JSON格式，并在頁面上顯示
            var data = JSON.parse(xhr.responseText);
            document.getElementById('result').innerHTML = data.title;
        } else {
            // 請求失敗，顯示錯誤信息
            document.getElementById('result').innerHTML = '請求失敗，狀態(tài)碼：' + xhr.status;
        }
    };

    // 設(shè)置請求錯誤時的回調(diào)函數(shù)
    xhr.onerror = function() {
        document.getElementById('result').innerHTML = '請求出錯';
    };

    // 發(fā)送請求
    xhr.send();
}

在這個示例中，我們首先創(chuàng)建了一個新的XMLHttpRequest對象，然后設(shè)置了請求的類型（GET）、URL（https://jsonplaceholder.typicode.com/todos/1）以及是否異步（true）。接下來，我們設(shè)置了請求完成時的回調(diào)函數(shù)，用于處理返回的數(shù)據(jù)。如果請求成功，我們將返回的數(shù)據(jù)解析為JSON格式，并在頁面上顯示；如果請求失敗，我們顯示錯誤信息。最后，我們調(diào)用xhr.send()方法發(fā)送請求。

當用戶點擊“發(fā)送請求”按鈕時，瀏覽器會發(fā)起一個異步請求，并在請求完成后執(zhí)行相應(yīng)的回調(diào)函數(shù)。這樣，我們就可以在不刷新整個頁面的情況下，實現(xiàn)與服務(wù)器的數(shù)據(jù)交互。

0 踩