1.jquery ajax

ajax即“asynchronous javascript and xml”（異步 javascript 和 xml），是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術。

用法：

$.ajax({
   type: 'post',
   url: url,
   data: data,
   datatype: datatype,
   success: function () {},
   error: function () {}
});

本身雖然簡單，但常常會涉及到一些問題：如

csrf攻擊

csrf（cross-site request forgery）跨站請求偽造，也被稱為“one click attack”或者session riding，通常縮寫為csrf或者xsrf，是一種對網(wǎng)站的惡意利用。

通過這6個步驟達到攻擊的目的。

xss攻擊

cross-site scripting（跨站腳本攻擊）簡稱 xss，是一種代碼注入攻擊。攻擊者通過在目標網(wǎng)站上注入惡意腳本，使之在用戶的瀏覽器上運行。利用這些惡意腳本，攻擊者可獲取用戶的敏感信息如 cookie、sessionid 等，進而危害數(shù)據(jù)安全。

為了和 css 區(qū)分，這里把攻擊的第一個字母改成了 x，于是叫做 xss。

xss 的本質是：惡意代碼未經(jīng)過濾，與網(wǎng)站正常的代碼混在一起；瀏覽器無法分辨哪些腳本是可信的，導致惡意腳本被執(zhí)行。

而由于直接在用戶的終端執(zhí)行，惡意代碼能夠直接獲取用戶的信息，或者利用這些信息冒充用戶向網(wǎng)站發(fā)起攻擊者定義的請求。

簡單的解決方法：

1、將能被轉換為html的輸入內容，在寫代碼時改為innertext而不用innerhtml。（過濾用戶輸入的 檢查用戶輸入的內容中是否有非法內容。如<>（尖括號）、”（引號）、 ‘（單引號）、%（百分比符號）、;（分號）、()（括號）、&（& 符號）、+（加號）等。、嚴格控制輸出。）

2、實在沒有辦法的情況下可用如下方法（js代碼）

function safestr(str){
return str.replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g, "&quot;").replace(/'/g, "&#039;");
}
（表單提交或者url參數(shù)傳遞前，對需要的參數(shù)進行過濾,請看如下xss過濾工具類代碼）

將含有<>等符號轉化為其他字符簡單方便。

優(yōu)缺點：

• 本身是針對mvc的編程,不符合現(xiàn)在前端mvvm的浪潮。
• 基于原生的xhr開發(fā)，xhr本身的架構不清晰，已經(jīng)有了fetch的替代方案。
• jquery整個項目太大，單純使用ajax卻要引入整個jquery非常的不合理（采取個性化打包的方案又不能享受cdn服務）。

2.axios

axios 基于promise用于瀏覽器和node.js的http客戶端。

用法：

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstname: 'fred',
        lastname: 'flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

優(yōu)缺點：

• 從 node.js 創(chuàng)建 http 請求。
• 支持 promise api。
• 提供了一些并發(fā)請求的接口（重要，方便了很多的操作）。
• 在瀏覽器中創(chuàng)建 xmlhttprequests。
• 在 node.js 則創(chuàng)建 http 請求。（自動性強）
• 支持 promise api。
• 支持攔截請求和響應。
• 轉換請求和響應數(shù)據(jù)。
• 取消請求。
• 自動轉換 json 數(shù)據(jù)。
• 客戶端支持防止csrf。
• 客戶端支持防御 xsrf。

3.fetch

fetch號稱是ajax的替代品，是在es6出現(xiàn)的，使用了es6中的promise對象。fetch是基于promise設計的。fetch的代碼結構比起ajax簡單多了，參數(shù)有點像jquery ajax。但是，一定記住fetch不是ajax的進一步封裝，而是原生js，沒有使用xmlhttprequest對象。（然而問題還是有很多）

用法：

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("oops, error", e);
}

優(yōu)缺點：

• 符合關注分離，沒有將輸入、輸出和用事件來跟蹤的狀態(tài)混雜在一個對象里
• 更好更方便的寫法
• 更加底層，提供的api豐富（request, response）
• 脫離了xhr，是es規(guī)范里新的實現(xiàn)方式
• fetchtch只對網(wǎng)絡請求報錯，對400，500都當做成功的請求，需要封裝去處理
• fetch默認不會帶cookie，需要添加配置項
• fetch不支持abort，不支持超時控制，使用settimeout及promise.reject的實現(xiàn)的超時控制并不能阻止請求過程繼續(xù)在后臺運行，造成了量的浪費
• fetch沒有辦法原生監(jiān)測請求的進度，而xhr可以。

為什么要用axios?

axios 是一個基于promise 用于瀏覽器和 nodejs 的 http 客戶端，它本身具有以下特征：

• 從瀏覽器中創(chuàng)建 xmlhttprequest
• 從 node.js 發(fā)出 http 請求
• 支持 promise api
• 攔截請求和響應
• 轉換請求和響應數(shù)據(jù)
• 取消請求
• 自動轉換json數(shù)據(jù)
• 客戶端支持防止csrf/xsrf
• axios既提供了并發(fā)的封裝，也沒有fetch的各種問題，而且體積也較小，當之無愧現(xiàn)在最應該選用的請求的方式。

結論

三選一絕必是axios了。其流程圖如下：

總結

到此這篇關于ajax、axios和fetch之間優(yōu)缺點重點對比總結的文章就介紹到這了,更多相關ajax、axios和fetch之間優(yōu)缺點內容請搜索碩編程以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持碩編程！