整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文共2678字，預計學習時長15分鐘
圖源：unsplash
使用JavaScript時，總會有各種需要發出調用請求的情況，進行ajax調用什么技術更適合呢？
最初，盡管有一些方法可以在不刷新頁面的情況下從服務器提取數據，但它們通常依賴于笨拙的技術。直到微軟為Outlook電子郵件客戶端的替代瀏覽器開發了XMLHttpRequest。它在2006年成為了Web標準。
2015年，Fetch API隨ES6引入。通用的Request和Response接口提供了一致性，而Promises允許更容易的鏈接和沒有回調的異步/等待。Fetch簡潔，優雅且易于理解，但是還有其他不錯的選擇，本文將簡要的含義、語法以及利弊。
以下代碼展示了使用不同替代方法的基本HTTP GET和POST示例。現在開始吧~
XMLHttpRequest對象可用于從Web服務器請求數據。它是這次比較中最早的方法，盡管其他選擇都優于它，但由于其向后兼容性和成熟度，它仍然有效且有用。
得到：
var req=new XMLHttpRequest();//The onreadystatechange property
//specifies a function to be
//executed every time the status
//of the XMLHttpRequest changes
req.onreadystatechange=function() {
if (this.readyState==4 &&this.status==200) {
//The responseText property
//returns a text string
console.log(xhttp.responseText)
//Do some stuff
}
};req.open("GET", "http://dataserver/users", true);
req.send();發送：
varformData=new FormData();
formData.append("name", "Murdock");
var req=new XMLHttpRequest();
req.open("POST", "http://dataserver/update");
req.send(formData);優點：
· 不需要從外部源加載
· 向后兼容性
· 成熟/穩定
· 在所有瀏覽器中均可使用
· 是原生瀏覽器API
缺點：
· 支持回調地獄
· 笨拙冗長的語法
· Fetch能自然地替代它
圖源：unsplash
Qwest是一個基于Promise的簡單ajax庫，它支持XmlHttpRequest2的獨立數據，例如ArrayBuffer，Blob和FormData。
得到：
qwest.get('http://dataserver/data.json')
.then(function(xhr, response) {
// ...do some stuff whith data
});發送：
qwest.post('http://dataserver/update',{
firstname: 'Murdock',
age: 30
})
.then(function(xhr, response) {
// Make some useful actions
})
.catch(function(e, xhr, response) {
// Process the error
});優點：
· 可以建立請求限制
· 基于Promise
缺點：
· 并非所有瀏覽器上都可使用XmlHttpRequest2
· 非原生
· 必須從外部源加載
該庫在不久前被廣泛用于發出HTTP異步請求。jQuery的所有Ajax方法都返回XMLHTTPRequest對象的超集
得到：
$.ajax({
url: 'http://dataserver/data.json'
}).done(function(data) {
// ...do some stuff whith data
}).fail(function() {
// Handle error
});發送：
$.ajax({
type: "POST",
url: 'http://dataserver/update',
data: data,
success: successCallBack,
error: errorCallBack,
dataType: dataType
});優點：
· 良好的支持和文檔
· 可配置的對象
· 在許多項目中使用
· 學習曲線低
· 它返回XMLHttpRequest對象，因此可以中止請求
缺點：
· 非原生
· 必須從外部源加載
· 沒有與Promises結合
· 對于原生ES6 Fetch不是必需的。
圖源：unsplash
基于Promise的HTTP庫，用于在瀏覽器和Nodejs上執行HTTP請求。
得到：
axios({
url: 'http://dataserver/data.json',
method: 'get'
})發送：
axios.post('http://dataserver/update',{
name: 'Murdock'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});優點：
· 使用promise避免回調地獄
· 在瀏覽器和Nodejs上均可使用
· 支持上傳進度
· 可以設置響應超時
· 通過簡單地向其傳遞配置對象即可配置請求
· Axios已實現可撤銷的promise提議
· 自動將數據轉換為JSON
缺點：
· 非原生
· 必須從外部源加載
SuperAgent是ajax API，旨在提供靈活性，可讀性和較低的學習曲線。它也可以與Node.js一起使用。
得到：
request('GET','http://dataserver/data.json').then(
success, failure);.query（）方法接受對象，這些對象與GET方法一起使用時將形成查詢字符串。以下代碼將產生路徑/ dataserver / search？name=Manny＆lastName=Peck＆order=desc。
request
.get('/dataserver/search')
.query({ name: 'Templeton' })
.query({ lastname: 'Peck' })
.query({ order: 'desc' })
.then(res=> {console.dir(res)}
});發送：
request
.post('http://dataserver/update')
.send({ name: 'Murdock' })
.set('Accept', 'application/json')
.then(res=> {
console.log('result' +JSON.stringify(res.body));
});優點：
· 基于Promise
· 在Node.js和瀏覽器中均可使用
· 可以調用request.abort()方法中止請求
· 社區的知名庫
· 發出HTTP請求的無縫接口
· 出現故障時支持重試請求
缺點：
· 它不支持以XMLHttpRequest的形式監視加載進度
· 非原生
· 必須從外部源加載
圖源：unsplash
Http-client允許使用JavaScript的訪存API組成HTTP客戶端。
得到：
//usingES6 modules
import { createFetch, base, accept, parse } from 'http-client'const fetch=createFetch(
base('http://dataserver/data.json'),
accept('application/json'),
parse('json')
)fetch('http://dataserver/data.json').then(response=> {
console.log(response.jsonData)
})發送：
//usingES6 modules
import { createFetch, method, params } from 'http-client'const fetch=createFetch(
params({ name: 'Murdock' }),
base('http://dataserver/update')
)優點：
· 在Node.js和瀏覽器中均可使用
· 由服務器端工作人員使用
· 基于Promise
· 提供頭部保護裝置，以提高CORS的安全性
缺點：
· 必須從外部源加載
· 非原生
Fetch是原生瀏覽器API，用于發出替代XMLHttpRequest的請求。與XMLHttpRequest相比，Fetch使網絡請求更容易。Fetch API使用Promises避免XMLHttpRequest回調地獄。
得到：
//WithES6 fetch
fetch('http://dataserver/data.json')
.then(data=> {
// ...do some stuff whith data
}).catch(error=> {
// Handle error
});發送：
fetch('http://dataserver/update',{
method: 'post',
headers: {
'Accept': 'application/json,text/plain, */*',
'Content-Type': 'application/json'
},
body: JSON.stringify({name: 'Murdock'})
}).then(res=>res.json())
.then(res=> console.log(res));//ORwith ES2017 for example(async ()=> {
const response=awaitfetch('http://dataserver/update', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body:JSON.stringify({name='Murdock'})
});const result=awaitresponse.json();console.log(result);
})();優點：
· 是原生瀏覽器API
· Fetch基本上是經過完善的XMLHttpRequest
· 友好且易于學習
· 與大多數最近使用的瀏覽器兼容
· 是原生XMLHttpRequest對象的自然替代
· 學習曲線低
· 不需要從外部源加載它
· 使用promises避免回調地獄
· 不需要更多依賴項
缺點：
· 處理JSON數據的過程分為兩步。第一個是發出請求，然后第二個是在響應時調用.json（）方法。對于Axios，默認情況下會收到JSON響應。
· 從Fetch()返回的Promise僅在網絡故障或任何阻止請求完成的情況發生時拒絕。即使響應為HTTP 404或500，也不會拒絕HTTP錯誤狀態。
· 缺乏其他庫的一些有用功能，例如：取消請求。
· 默認情況下，Fetch不會從服務器發送或接收Cookie，如果站點依賴于維持用戶會話，則會導致未經身份驗證的請求。但是可以通過添加以下內容來啟用：
{credentials: “same-origin.”}圖源：unsplash
Fetch是一個新標準，新版本的Chrome和Firefox無需使用任何其他庫就可支持它。
此外，Axios，SuperAgent或其他庫都有適合的文檔，易于使用，并且學習曲線不太高。在某些情況下，它們可以提供Fetch不具有的功能。
Fetch在JavaScript里是原生的，足以滿足項目需求。如果沒有特殊需求，我認為Fetch就是最合適的選擇。
留言點贊關注
我們一起分享AI學習與發展的干貨
如轉載，請后臺留言，遵守轉載規范
TTP（Hypertext Transfer Protocol，超文本傳輸協議）是互聯網中使用最廣泛的通信協議之一，它定義了客戶端與服務器之間的通信規則。無論是瀏覽網頁、調用 API、下載文件，還是進行各種在線交互，HTTP 都是不可或缺的基礎協議。HTTP 協議基于請求-響應模型工作，其中客戶端發出請求，服務器返回響應。HTTP 請求方法定義了客戶端希望執行的操作類型，每種請求方法都有特定的用途和行為。
在 HTTP/1.1 中，標準定義了多種請求方法，每種方法適用于不同的場景。本文將詳細介紹九種 HTTP 請求方法：GET、POST、PUT、DELETE、PATCH、HEAD、CONNECT、OPTIONS 和 TRACE。這些方法在 Web 開發和 API 設計中扮演著重要角色。通過理解這些請求方法的功能和使用場景，開發者可以更好地設計和優化網絡應用程序。
GET 方法是 HTTP 中最常用的請求方法之一，幾乎在所有的 Web 應用中都能看到它的身影。GET 請求的主要作用是從服務器獲取資源，例如網頁、圖片、視頻等。當用戶在瀏覽器中輸入一個 URL 并按下回車鍵時，瀏覽器便會向服務器發送一個 GET 請求，要求獲取該 URL 對應的資源。服務器處理請求后，會將資源發送回客戶端，通常是 HTML、CSS、JavaScript 文件或其他媒體內容。
GET 方法的主要作用是從服務器請求數據，而不會對服務器上的資源進行任何修改。換句話說，GET 請求是"無副作用"的，不會改變服務器的狀態。GET 請求通常用于以下場景：
示例：
GET /index.html HTTP/1.1
Host: www.example.com
在上述示例中，客戶端通過 GET 請求從服務器獲取 index.html 文件。服務器在處理該請求后，會返回相應的 HTML 文件給客戶端。
GET 請求廣泛應用于 Web 開發中，尤其是在需要從服務器獲取數據的場景中。例如：
示例：
GET /search?q=http GET method HTTP/1.1
Host: www.searchengine.com
示例：
GET /product/12345 HTTP/1.1
Host: www.onlinestore.com
GET 請求的一個重要特性是可以被緩存。瀏覽器或中間代理服務器可以緩存 GET 請求的響應，以減少重復請求服務器的次數，從而提高性能并降低帶寬消耗。HTTP 協議中定義了多種緩存機制，例如 ETag、Last-Modified 等，它們用于標識資源的狀態，判斷資源是否已改變。
緩存示例：
GET /logo.png HTTP/1.1
Host: www.example.com
If-None-Match: "abc123"
如果服務器返回的 ETag 與緩存中的 ETag 匹配，瀏覽器將直接使用緩存中的資源，而不重新下載文件。這不僅節省了帶寬，還加快了頁面加載速度。
GET 請求中常見的一種形式是通過 URL 參數或查詢字符串傳遞數據。查詢字符串通常附加在 URL 的末尾，以 ? 開頭，參數與值之間用 = 連接，多個參數之間用 & 分隔。
示例：
GET /search?q=HTTP+GET+method&sort=latest HTTP/1.1
Host: www.example.com
在上述請求中，查詢字符串 q=HTTP+GET+method&sort=latest 包含了兩個參數：q 和 sort，分別表示搜索關鍵詞和排序方式。這種方式適合傳遞簡單的鍵值對數據，但由于查詢字符串會暴露在 URL 中，因此不適合傳輸敏感信息。
盡管 GET 請求廣泛使用，但在安全性方面需要注意以下幾點：
為了增強安全性，建議在傳輸敏感數據時使用 POST 方法，并通過 HTTPS 加密通信。
POST 方法用于向服務器發送數據，通常是為了提交表單、上傳文件、或調用 API 接口以進行數據處理。與 GET 方法不同，POST 請求的數據不會附加在 URL 中，而是包含在請求體中。因此，POST 方法適合傳輸較大或敏感的數據。
POST 方法的典型使用場景包括：
示例：
POST /submit-form HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
username=johndoe&password=secret123
示例：
POST /upload HTTP/1.1
Host: www.example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary
------WebKitFormBoundary
Content-Disposition: form-data; name="file"; filename="example.jpg"
Content-Type: image/jpeg
(binary file data)
------WebKitFormBoundary--
示例：
POST /api/users HTTP/1.1
Host: www.example.com
Content-Type: application/json
{
"username": "johndoe",
"email": "johndoe@example.com",
"password": "secret123"
}
POST 請求是非冪等的，這意味著重復發送相同的 POST 請求可能會產生不同的結果。例如，重復提交訂單或評論可能會導致服務器生成多個相同的記錄。由于這一特性，開發者在設計 API 時通常需要考慮如何防止重復提交的問題，例如使用唯一性約束、token 驗證等手段。
與 GET 請求相比，POST 請求在安全性方面有一些顯著的優勢：
盡管如此，POST 請求仍然需要配合 HTTPS 協議使用，以確保數據在傳輸過程中的安全性。使用 HTTPS 可以加密數據，防止在傳輸過程中被竊取或篡改。
PUT 方法通常用于更新服務器上的資源。與 POST 方法不同，PUT 請求是冪等的，意味著多次發送相同的 PUT 請求，服務器的資源狀態不會變化。PUT 方法可以用于創建或更新資源，通常用于更新現有資源的數據。
PUT 方法的典型使用場景包括：
示例：
PUT /api/users/123 HTTP/1.1
Host: www.example.com
Content-Type: application/json
{
"username": "johndoe",
"email": "newemail@example.com"
}
示例：
PUT /documents/456 HTTP/1.1
Host: www.example.com
Content-Type: text/plain
Updated document content...
PUT 方法是冪等的，這意味著相同的 PUT 請求無論執行多少次，服務器上的資源狀態應保持一致。例如，用戶修改個人資料后，如果重復發送相同的 PUT 請求，服務器上該用戶的資料應保持不變，而不會生成多個相同的記錄。
PUT 請求通常用于更新現有資源，因此在安全性方面需要特別注意以下幾點：
DELETE 方法用于刪除服務器上的指定資源。在 RESTful API 設計中，DELETE 方法通常用于移除指定的資源對象或數據。例如，刪除一篇文章、一條評論、或一個用戶賬戶等。DELETE 方法的冪等性特性決定了無論同一個 DELETE 請求被執行多少次，服務器上的資源狀態應保持一致，即資源被刪除后，再次刪除操作不會產生任何新的效果。
DELETE 方法的典型使用場景包括：
DELETE 方法是冪等的，這意味著相同的 DELETE 請求無論執行多少次，服務器上的資源狀態應保持一致。例如，發送 DELETE 請求刪除一篇文章，如果文章已經被刪除，再次發送相同的 DELETE 請求不會導致新的變化，服務器應返回一個指示資源已不存在的響應。
DELETE 請求涉及到資源的刪除操作，因此需要特別注意以下幾個方面的安全性問題：
PATCH 方法用于對服務器上的資源進行部分更新。與 PUT 方法不同，PATCH 請求不需要包含完整的資源數據，而只需要傳輸需要更新的部分字段。因此，PATCH 方法非常適合用于需要頻繁更新部分數據的場景。
PATCH 方法的典型使用場景包括：
示例：
PATCH /api/users/123 HTTP/1.1
Host: www.example.com
Content-Type: application/json
{
"email": "newemail@example.com"
}
示例：
PATCH /documents/456 HTTP/1.1
Host: www.example.com
Content-Type: application/json
{
"title": "Updated Document Title"
}
PATCH 方法通常被認為是非冪等的，這意味著相同的 PATCH 請求被執行多次可能會產生不同的結果。例如，如果一個 PATCH 請求是對字符串數據進行追加操作，那么重復執行相同的請求將會導致字符串的內容被多次追加，產生不同的結果。
然而，也有特定情況下的 PATCH 請求是冪等的，例如只是對某個字段的值進行覆蓋更新。在這種情況下，PATCH 請求的冪等性與 PUT 方法類似。
PATCH 請求主要用于部分更新，因此在安全性方面需注意以下幾點：
HEAD 方法與 GET 方法非常相似，但它只請求資源的首部信息，而不包含資源的具體內容。HEAD 請求的響應中只有狀態行和頭部字段，不返回消息體。HEAD 方法通常用于在不下載資源的情況下獲取資源的元數據，如檢查資源是否存在、獲取資源的大小或類型等。
HEAD 方法的典型使用場景包括：
示例：
HEAD /files/sample.pdf HTTP/1.1
Host: www.example.com
示例：
HEAD /api/documents/456 HTTP/1.1
Host: www.example.com
HEAD 方法的一個顯著特點是它不會返回消息體，因此在獲取資源元數據時，HEAD 請求比 GET 請求更加高效。此外，由于 HEAD 請求不會返回資源內容，它通常被用作緩存控制的手段。例如，通過 HEAD 請求檢查資源的 Last-Modified 或 ETag 頭部字段，客戶端可以決定是否需要重新下載資源。
CONNECT 方法用于建立一個到服務器的隧道連接，通常用于 HTTP 與 HTTPS 的代理請求。CONNECT 請求會將客戶端的連接轉換為一個雙向通信的通道，允許客戶端與目標服務器之間傳遞任意數據而不受代理服務器的影響。最常見的應用場景是通過 HTTP 代理訪問 HTTPS 站點。
CONNECT 方法的典型使用場景包括：
示例：
CONNECT www.example.com:443 HTTP/1.1
Host: www.example.com
當代理服務器收到這個請求后，會建立一個與目標服務器的 TCP 連接，并將后續的所有數據直接傳遞給目標服務器。這種方式允許客戶端與目標服務器之間的通信保持安全性和私密性，因為代理服務器只負責傳遞數據，而不進行解析或修改。
由于 CONNECT 方法用于創建一個隧道連接，它能夠有效地維護客戶端與服務器之間的通信隱私。然而，CONNECT 方法也可能被濫用。例如，惡意用戶可以利用 CONNECT 方法繞過防火墻或其他網絡安全措施，進行未經授權的訪問。因此，許多代理服務器在使用 CONNECT 方法時會對目標端口或目標域名進行限制，防止濫用。
OPTIONS 方法用于查詢服務器支持的請求方法或特定資源所支持的功能。它通常用于檢查服務器的能力，確定哪些請求方法可以被安全地執行在指定資源上。OPTIONS 請求的響應通常包括 Allow 頭部字段，列出服務器支持的請求方法。
OPTIONS 方法的典型使用場景包括：
示例：
OPTIONS /api/users HTTP/1.1
Host: api.example.com
響應示例：
HTTP/1.1 204 No Content
Allow: GET, POST, PUT, DELETE
示例：
OPTIONS /documents/456 HTTP/1.1
Host: www.example.com
響應示例：
HTTP/1.1 200 OK
Allow: GET, POST, DELETE, OPTIONS
OPTIONS 方法廣泛用于 CORS 機制中，以確保跨域請求的安全性和合規性。通過預檢請求，服務器可以控制哪些外部來源和請求方法可以訪問其資源，從而避免跨站請求偽造（CSRF）攻擊。
此外，OPTIONS 方法也可以用于測試和診斷服務器的配置，幫助開發者或管理員了解服務器的請求處理能力。
TRACE 方法用于在服務器上發起一個回環測試，即服務器將收到的請求原樣返回給客戶端。TRACE 方法的主要用途是診斷或調試，幫助客戶端檢查請求在傳輸過程中是否被修改或損壞。
TRACE 請求的典型使用場景包括：
示例：
TRACE /api/resource HTTP/1.1
Host: www.example.com
響應示例：
HTTP/1.1 200 OK
Content-Type: message/http
TRACE /api/resource HTTP/1.1
Host: www.example.com
User-Agent: MyBrowser/1.0
由于 TRACE 方法會將請求的所有信息，包括可能包含的敏感數據，如 Cookies 或 Authorization 頭部，返回給客戶端，這可能導致信息泄露。攻擊者可以利用 TRACE 方法實施跨站點跟蹤攻擊（Cross-Site Tracing，XST），獲取用戶的敏感信息。因此，許多現代的 Web 服務器默認禁用 TRACE 方法以防止潛在的安全風險。
TTP（超文本傳輸協議）請求過程是客戶端（通常是瀏覽器）與服務器之間通信的方式，用于從服務器請求資源（如網頁、圖片、視頻等）。以下是HTTP請求的基本步驟：
HTTP請求過程是Web通信的基礎，它允許客戶端通過簡單、標準化的方法與服務器交互，獲取或發送數據。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
