ajax和fetch的區別點總結

2022-09-20 09:51:14 字數 2017 閱讀 2131

本教程操作環境:windows7系統、jquery1.10.2版本、dell g3電腦。

(1)、ajax是利用xmlhttprequest物件來請求資料的,而fetch是window的乙個方法

(2)、ajax基於原生的xhr開發,xhr本身的架構不清晰,已經有了fetch的替代方案

(3)、fetch比較與ajax有著更好更方便的寫法

(4)、fetch只對網路請求報錯,對400,500都當做成功的請求,需要封裝去處理

(5)、fetch沒有辦法原生監測請求的進度,而xhr可以

因為它原生的寫法很雞肋,所以大多會封裝下,導致可能很多人不會自己寫個ajax請求。都是用的jquery或者axios來請求資料的

var xhr= new xmlhttprequest(); // 新建xmlhttprequest物件

xhr.onload= function()

// 傳送請www.cppcns.com求:

xhr.open('get', '/user');

xhr.send();

這樣乙個請求就發出去了。很麻煩,發個簡單請求,還得寫這麼多行**。 實際開發中當然不會這麼寫,否則**冗餘,可讀性差,用promise封裝一下

var ajax = }}

xhr.send();

},// data應為'a=a1&b=b1'這種字串格式,在jq裡如果data為物件會自動將物件轉成這種字串格式

post: function(url,data,fn)}}

xhr.send(data);

}}**注釋:

1、open(method, url, async) 方法需要三個引數:

method:傳送請求所使用的方法(get或post);與post相比,get更簡單也更快,並且在大部分情況下都能用;然而,在以下情況中,請使用post請求:

①無法使用快取檔案(更新伺服器上的檔案或資料庫)

②向伺服器傳送大量資料(post 沒有資料量限制)

傳送包含未知字元的使用者輸入時,post 比 get 更穩定也更可靠

url:規定伺服器端指令碼的 url(該檔案可以是任何型別的檔案,比如 .txt 和 .xml,或者程式設計客棧伺服器指令碼檔案,比如 .asp 和 .php (在傳回響應之前,能夠在伺服器上執行任務));

async:規定www.cppcns.com應當對請求進行非同步(true)或同步(false)處理;true是在等待伺服器響應時執行其他指令碼,當響應就緒後對響應進行處理;false是等待伺服器響應再執行。

2、send() 方法可將請求送往伺服器。

3、onreadystatechange:存有處理伺服器響應的函式,每當 readystate 改變時,onreadystatechange 函式就會被執行。

4、readystate:存有伺服器響應的狀態資訊。

0: 請求未初始化(**被建立,但尚未呼叫 open() 方法)

1: 伺服器連線已建立(open方法已經被呼叫)

2: 請求已接收(send方法已經被呼叫,並且頭部和狀態已經可獲得)

3: 請求處理中(**中,responsetext 屬性已經包含部分資料)

4: 請求已完成,且響應已就緒(**操作已完成)

5.responsetext:獲得字串形式的響應資料。

6.setrequestheader():post傳資料時,用來新增 http 頭,然後send(data),注意data格式;get傳送資訊時直接加引數到url上就可以,比如url?a=a1&b=b1。

1、第乙個引數是url

2、第二個引數可選引數 可以控制不同的init物件

3、使用了js 中的promise物件

var arr1 = ;

fetch("url", , //將arr1物件序列化成json字串

body: json.stringify(arr1)//向服務端傳入json資料

}).then(function(resp) )

});所有的ie瀏覽器都不會支援 fetch()方法,伺服器端返回 狀態碼 400 500的時候 不會reject

ajax和fetch的區別

ajax以及fetch優缺點 ajax 本身是針對mvc的程式設計,不符合現在前端mvvm的趨勢 基於原生的xhr開發,xhr本身的架構不清晰,已經有了fetch的替代方案 fetch 符合關注分離,沒有將輸入 輸出和用事件來跟蹤的狀態混雜在乙個物件裡 更好更方便的寫法 更加底層,提供的api豐富 ...

fetch和axios區別比較

try catch e 特點 缺點 1 fetch只對網路請求報錯,對400,500都當做成功的請求,需要封裝去處理 2 fetch預設不會帶cookie,需要新增配置項 3 fetch不支援abort,不支援超時控制,使用settimeout及promise.reject的實現的超時控制並不能阻止...

git 的fetch和pull的區別

git中從遠端的分支獲取最新的版本到本地有這樣2個命令 1.git fetch 相當於是從遠端獲取最新版本到本地,不會自動merge git fetch origin master git log p master.origin master git merge origin master 上述過程...