現(xiàn)在前端的請求方法非常多，可以是最開始的XmlHttpRequest，也可以是使用最多的ajax，也可以是Promise和一眾在Promise之上進行封裝的請求方法。
現(xiàn)在我想重新看一下ajax。
get和post
大家知道http有很多方法，方法如下
| 方法 | 描述 |
|---|---|
| GET | 從指定的資源請求數(shù)據(jù)。 |
| POST | 向指定的資源提交要被處理的數(shù)據(jù)。 |
| HEAD | 與 GET 相同，但只返回 HTTP 報頭，不返回文檔主體。 |
| PUT | 上傳指定的 URI 表示。 |
| DELETE | 刪除指定資源。 |
| OPTIONS | 返回服務器支持的 HTTP 方法。 |
| CONNECT | 把請求連接轉(zhuǎn)換到透明的 TCP/IP 通道。 |
比較常用的是get、post、put和delete。
今天這邊主要比較的是大家經(jīng)常比較的get和post。
GET 方法
請注意，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發(fā)送的：
/test/demo_form.asp?name1=value1&name2=value2
有關 GET 請求的其他一些特點：
GET 請求可被緩存
GET 請求保留在瀏覽器歷史記錄中
GET 請求可被收藏為書簽
GET 請求不應在處理敏感數(shù)據(jù)時使用（在url中拼接參數(shù)，明文可見。）
GET 請求有長度限制 （這邊的長度限制不是http對get的限制，而是瀏覽器對url地址有長度限制）
GET 請求只應當用于取回數(shù)據(jù)
POST 方法
請注意，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發(fā)送的：
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
有關 POST 請求的其他一些注釋：
POST 請求不會被緩存
POST 請求不會保留在瀏覽器歷史記錄中
POST 不能被收藏為書簽
POST 請求對數(shù)據(jù)長度沒有要求
ajax實現(xiàn)
ajax的核心機制是XMLHttpRequest。文檔可以看這個 MDN XMLHttpRequest 文檔。
我挑了幾個比較重要的屬性和方法記一下：
readyState方法：
請求的五種狀態(tài)
| 值 | 狀態(tài) | 描述 |
|---|---|---|
| 0 | UNSENT (未打開) | open()方法還未被調(diào)用. |
| 1 | OPENED (未發(fā)送) | open()方法已經(jīng)被調(diào)用. |
| 2 | HEADERS_RECEIVED (已獲取響應頭) | send()方法已經(jīng)被調(diào)用, 響應頭和響應狀態(tài)已經(jīng)返回. |
| 3 | LOADING (正在下載響應體) | 響應體下載中; responseText中已經(jīng)獲取了部分數(shù)據(jù). |
| 4 | DONE (請求完成) | 整個請求過程已經(jīng)完畢. |
var Ajax={
get: function(url, fn) {
var obj = new XMLHttpRequest();
// XMLHttpRequest對象用于在后臺與服務器交換數(shù)據(jù)
obj.open('GET', url, true);
obj.onreadystatechange = function() {
if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) {
// readyState == 4說明請求已完成
fn.call(this, obj.responseText); //從服務器獲得數(shù)據(jù)
}
};
obj.send();
},
post: function (url, data, fn) {
// data應為'a=a1&b=b1'這種字符串格式，在jq里如果data為對象會自動將對象轉(zhuǎn)成這種字符串格式
var obj = new XMLHttpRequest();
obj.open("POST", url, true);
obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 添加http頭，發(fā)送信息至服務器時內(nèi)容編碼類型
obj.onreadystatechange = function() {
if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
// 304未修改
fn.call(this, obj.responseText);
}
};
obj.send(data);
}
}
