AJAX個人總結

AJAX的產生

AJAX技術涉及發送服務器請求額外數據而不刷新頁面，從而實現更好的用戶體驗。

把 Ajax 推到歷史舞臺上的關鍵技術是 XMLHttpRequest（XHR）對象。這個對象最早由微軟發明，然后被其他瀏覽器所借鑒。在 XHR 出現之前，Ajax 風格的通信必須通過一些黑科技實現，主要是使用隱藏的窗格或內嵌窗格。XHR 為發送服務器請求和獲取響應提供了合理的接口。這個接口可以實現異步從服務器獲取額外數據，意味著用戶點擊不用頁面刷新也可以獲取數據。通過 XHR 對象獲取數據后，可以使用 DOM 方法把數據插入網頁。雖然 Ajax 這個名稱中包含 XML，但實際上 Ajax 通信與數據格式無關。這個技術主要是可以實現在不刷新頁面的情況下從服務器獲取數據，格式并不一定是 XML。

所有現代瀏覽器都通過 XMLHttpRequest 構造函數原生支持 XHR 對象

let xhr = new XMLHttpRequest();

使用XMLHttpRequest

使用 XHR 對象首先要調用 open()方法，這個方法接收 3 個參數：請求類型（“get”、"post"等）、請求 URL，以及表示請求是否異步的布爾值。

xhr.open("get", "example.php", false);

調用 open()不會實際發送請求，只是為發送請求做好準備。要發送定義好的請求，必須調用 send()方法：

xhr.open("get", "example.txt", false); xhr.send(null);

send()方法接收一個參數，是作為請求體發送的數據。如果不需要發送請求體，則必須傳 null，因為這個參數在某些瀏覽器中是必需的。調用 send()之后，請求就會發送到服務器。

HTTP頭部

每個 HTTP 請求和響應都會攜帶一些頭部字段，這些字段可能對開發者有用。XHR 對象會通過一些方法暴露與請求和響應相關的頭部字段。默認情況下，XHR 請求會發送以下頭部字段。

Accept：瀏覽器可以處理的內容類型。

Accept-Charset：瀏覽器可以顯示的字符集。

Accept-Encoding：瀏覽器可以處理的壓縮編碼類型。

Accept-Language：瀏覽器使用的語言。

Connection：瀏覽器與服務器的連接類型。

Cookie：頁面中設置的 Cookie。

Host：發送請求的頁面所在的域。

Referer：發送請求的頁面的 URI。

User-Agent：瀏覽器的用戶代理字符串。

如果需要發送額外的請求頭部，可以使用 setRequestHeader()方法。這個方法接收兩個參數：頭部字段的名稱和值。為保證請求頭部被發送，必須在 open()之后、send()之前調用 setRequestHeader(),例如下面的例子：

let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open("get", "example.php", true); xhr.setRequestHeader("MyHeader", "MyValue"); xhr.send(null);

GET請求

最常用的請求方法是 GET 請求，用于向服務器查詢某些信息。必要時，需要在 GET 請求的 URL后面添加查詢字符串參數。對 XHR 而言，查詢字符串必須正確編碼后添加到 URL 后面，然后再傳給open()方法。

let url = "example.php"; // 添加參數 url = addURLParam(url, "name", "Nicholas"); url = addURLParam(url, "book", "Professional JavaScript"); // 初始化請求 xhr.open("get", url, false);

POST請求

第二個最常用的請求是 POST 請求，用于向服務器發送應該保存的數據。每個 POST 請求都應該在請求體中攜帶提交的數據，而 GET 請求則不然。POST 請求的請求體可以包含非常多的數據，而且數據可以是任意格式。要初始化 POST 請求，open()方法的第一個參數要傳"post"。

xhr.open("post", "example.php", true);

因為 XHR 最初主要設計用于發送 XML，所以可以傳入序列化之后的 XML DOM 文檔作為請求體。當然，也可以傳入任意字符串。默認情況下，對服務器而言，POST 請求與提交表單是不一樣的。服務器邏輯需要讀取原始 POST數據才能取得瀏覽器發送的數據。不過，可以使用 XHR 模擬表單提交。為此，第一步需要把 ContentType 頭部設置為"application/x-www-formurlencoded"，這是提交表單時使用的內容類型。第二步是創建對應格式的字符串。POST 數據此時使用與查詢字符串相同的格式。如果網頁中確實有一個表單需要序列化并通過 XHR 發送到服務器，則可以使用函數來創建相應的字符串,例如：

function submitData() { let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open("post", "postexample.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); let form = document.getElementById("user-info"); xhr.send(serialize(form)); }

Ajax JavaScript

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。