導讀 | 交互過程中,發送請求是第一步。那麼,我們將如何構造一個請求呢? |
通過本篇文章,你將學會:
- 如何通過 XMLHttpRequest 和 ActiveXObject 來構造一個通用的 xhr 對象。
- 如何通過 xhr 對象來發送 GET、 POST 等請求。
- Content-type 在 Ajax 數據發送中的作用。
1. 構造 xhr 對象
首先,我們需要構造一個 xhr 對象。具體方法就是通過 new 來實例化一個 XMLHttpRequest 實例。
const xhr = new XMLHttpRequest();
問題來了,我們知道早期瀏覽器如 IE5、IE6 並沒有直接支持 XMLHttpRequest,如果我們直接使用 XMLHttpRequest 構造函數,很大可能在早期瀏覽器我們會得到一個未定義的報錯。因此,我們需要通過一定兼容性的寫法來解決這個問題。
var xhr; if (window.XMLHttpRequest) { // 如果存在 XMLHttpRequest,就直接使用 XMLHttpRequest xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE // 如果不存在 XMLHttpRequest,但存在 ActiveXObject,則考慮 ActiveXObject 的情況 // XMLHttp 版本 var versions = [ "Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", "Msxml2.XMLHttp.3.0", "Msxml2.XMLHttp", "Microsoft.XMLHttp" ]; // 通過 for 循環嘗試生成某個 XMLHttp 版本的 ActiveXObject 實例 // try...catch.. 捕獲並消化掉 ActiveXObject 實例化失敗的錯誤 try { for (var i = 0; i < versions.length; i++) { xhr = new ActiveXObject(versions[i]); break; } } catch (error) {} } if (!xhr) { alert("當前環境不支持初始化Ajax對象"); }
ActiveXObject 屬於微軟的私有拓展對象,只有在 IE 上纔會有支持。該對象只能用於實例化自動化對象。 在我們上面的代碼實現中,實例化一個 ActiveXObject 我們會傳入參數 Msxml2.XMLHTTP 或者 Microsoft.XMLHTTP 等,該參數代表着提供對象的應用程序的名稱。
其中,Msxml2.XMLHttp.5.0、Msxml2.XMLHttp.4.0、Msxml2.XMLHttp.3.0、Msxml2.XMLHttp 和 Microsoft.XMLHttp分別代表着 XMLHttp 的高低版本。我們通過 for 循環,在採用正常有效版本的時候跳出循環。同時,使用 try…catch… 來捕獲消化不支持情況下的報錯。
當然,我們也可以包裝我們的 xhr 對象,比如,我們可以通過執行匿名函數:
var xhr = (function() { var hr; // 定義一個局部 xhr 對象, 這裏命名 hr if (window.XMLHttpRequest) { hr = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE var versions = [ "Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", "Msxml2.XMLHttp.3.0", "Msxml2.XMLHttp", "Microsoft.XMLHttp" ]; try { for (var i = 0; i < versions.length; i++) { hr = new ActiveXObject(versions[i]); break; } } catch (error) {} } return hr; // 返回我們最後的 xhr 對象,如果宿主環境不提供 XMLHttpRequest 及 ActiveXObject, 返回 undefined })();
2. 發送一個請求
構建了 xhr 對象之後,我們可以通過方法的調用來進行請求的發送。
xhr.open('GET', 'http://www.example.com'); xhr.send();
這是最簡單最典型的發送請求的做法。只需要短短 2 行代碼,我們就可以執行一個請求發送動作。
實際上 XMLHttpRequest.open 這個方法的參數不止兩個這麼少,一共有 5 個參數:
xhrReq.open(method, url, async, user, password);
這些參數分別代表着:
method: 代表HTTP請求的方法名,比如 GET、POST、 PUT 和 DELETE。 url: 一個DomString,代表着要想向其發送請求的 url。 async: 表示是否異步。 user:用戶名,用於認證用途。 password:密碼,用於認證用途。
其中,user 和 password 都是用於認證用途。而前 3 個參數是我們經常都會使用到的。這裏着重說的是參數 async。默認情況下,async 爲 true,代表着請求將是異步的。當然我們也可以設置爲 false,這樣我們就可以同步請求了。然而,事實上我們應該儘量不這麼做,因爲同步的請求會阻塞我們的UI和一切用戶活動,造成的體驗非常不好。
到目前爲止,如果你也跟着做的話應該能看到已經可以發送一個 Ajax 請求了,雖然它是失敗的,因爲你並沒有正確的服務能夠處理這個請求。如果你在瀏覽器上運行,打開控制檯,你應該會得到這樣的一個效果:
3. GET 請求
在數據交互中,我們經常會使用 GET 請求來查詢數據,現在假設我們有一個簡單的GET請求,查詢接口 http://localhost:8080/simple/get,附帶 query參數 爲 mk=慕課網,那麼我們可以構建代碼塊:
xhr.open("GET", "http://localhost:8080/simple/get?mk=慕課網"); xhr.send();
查看效果圖:
從上圖可以看到,瀏覽器控制檯面板上顯示,我們進行 GET 發送請求的過程中,在 Headers 上,可以看到 Query String Parameters 附帶的信息完全正確,我們的 GET 請求構造成功。
4. POST 請求
事實上我們除了要查詢數據,提交數據也是非常重要。在 Ajax 中,我們通常使用 POST 方法來進行數據創建工作。
4.1 POST 發送請求
話不多說,上代碼:
xhr.open("POST", "http://localhost:8080/simple/post"); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send("mk=慕課網&class=ajax");
查看效果圖:
基本和上面 GET 請求類似,這裏我們構造了一個 POST 請求,請求的 url 爲 http://localhost:8080/simple/post,發送請求的參數有兩個,分別爲 mk=慕課網 和 class=ajax。從瀏覽器的控制檯面板上可以看到,在 Headers 上,Form Data 部分正是我們要發送的數據,數據發送正常。這裏兩個地方需要注意:
send 方法接受可選參數作爲請求主體,即發送到服務器的內容。
Content-type 需要設置爲請求主體類型, 這是因爲如果不設置的話會採取默認值,在很多時候服務端可能無法解析參數。
XMLHttpRequest.setRequestHeader() 是請求HTTP 請求頭部的方法,因此設置 Content-type 自然也是通過調用這個方法來實現。該方法需要在 open() 和 send() 之間使用。
5. 小結
Ajax 主要通過 XMLHttpRequest 來發送請求,必要的時候爲了兼容低版本 IE 瀏覽器, 我們可以啓用 ActiveXObject。
XMLHttpRequest 提供 open 方法,我們可以藉助它來實現 GET、POST、PUT、DELETE 等請求。
Ajax 在向服務端發送數據時,比如 POST 、PUT , 需要通過 XMLHttpRequest.setRequestHeader() 設置 Content-type 的類型,服務端根據指定 Content-type進行請求主體的解析。