一、使用 ajax 請求

1. 什么是 ajax 請求

Ajax 即 Asynchronous Javascript And XML（異步JavaScript和XML），在2005年提出，是一種描述使用現(xiàn)有技術(shù)集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 使用Ajax技術(shù)網(wǎng)頁應(yīng)用能夠快速地將增量更新呈現(xiàn)在用戶界面上，而不需要重載（刷新）整個頁面，這使得程序能夠更快地回應(yīng)用戶的操作。

2. ajax請求原理

• 簡單概述

  Ajax的原理簡單來說通過JavaScript原生的XmlHttpRequest對象來向服務(wù)器發(fā)異步請求，從服務(wù)器獲得數(shù)據(jù)，然后再用JavaScript來操作DOM，從而實現(xiàn)頁面更新。

• 與服務(wù)端交互詳細(xì)過程
  • 創(chuàng)建 Ajax的核心對象 XMLHttpRequest對象
  • 通過 XMLHttpRequest 對象的 open() 方法與服務(wù)端建立連接
  • 構(gòu)建請求所需的數(shù)據(jù)內(nèi)容，并通過XMLHttpRequest 對象的 send() 方法發(fā)送給服務(wù)器端
  • 通過 XMLHttpRequest 對象提供的 onreadystatechange 事件，監(jiān)聽服務(wù)器端的通信狀態(tài)
  • 接受并處理服務(wù)端向客戶端響應(yīng)的數(shù)據(jù)結(jié)果
  • 根據(jù)響應(yīng)結(jié)果操作DOM，將處理結(jié)果更新到 HTML頁面中
• 詳細(xì)實現(xiàn)代碼示例

  	// 創(chuàng)建XMLHttpRequest對象
  	const request = new XMLHttpRequest()
  	// 監(jiān)聽onreadystatechange 事件，與服務(wù)端通信
  	request.onreadystatechange = function(e){
  		// 獲取當(dāng)前請求狀態(tài)，readyState 的值為 4 ，表示整個請求過程完畢
  	    if(request.readyState === 4){ 
  	    	// 根據(jù)返回的狀態(tài)碼，判斷當(dāng)前請求是否成功返回
  	        if(request.status >= 200 && request.status <= 300){  
  	        	// 獲取到服務(wù)端返回的結(jié)果
  	            console.log(request.responseText) 
  	        }else if(request.status >=400){
  	        	// 獲取到服務(wù)端返回的錯誤信息
  	            console.log("錯誤信息：" + request.status)
  	        }
  	    }
  	}
  	// XMLHttpRequest 對象的 open() 方法與服務(wù)端建立連接
  	request.open('POST','http://xxxx')
  	// 通過XMLHttpRequest 對象的 send() 方法將請求發(fā)送給服務(wù)端
  	request.send()
  

二、使用fetch請求

1. 什么是fetch請求

Fetch請求是一種現(xiàn)代Web API，用于在JavaScript中發(fā)出HTTP數(shù)據(jù)請求。它是XMLHttpRequest的一種替代方案，提供了更加簡潔和現(xiàn)代化的方式來處理網(wǎng)絡(luò)請求。Fetch函數(shù)是原生JavaScript的一部分，不需要使用XMLHttpRequest對象。Fetch請求使用Promise來處理異步操作，這使得它的代碼更加清晰和簡潔。

2. fetch請求原理

• fetch是基于原生的XMLHttpRequest對象來實現(xiàn)數(shù)據(jù)請求的。
• 同時，fetch也是基于Promise實現(xiàn)鏈?zhǔn)秸{(diào)用的。
• 則實現(xiàn)fetch的本質(zhì)：就是實現(xiàn)ajax的封裝以及Promise的實現(xiàn)。

通過以上ajax部分的講解中，我們知道ajax可以通過XMLHttpRequest簡單實現(xiàn)：

	function ajax(url,suc,fail) {
	  var xhr = new XMLHttpRequest();
	    xhr.open('POST',url, true);
	    xhr.onreadystatechange = function () {
	        if(xhr.readyState == 4){
	            if(xhr.status == 200){
	                suc(xhr.responseText)
	            } else {
	                console.log(err);
	                fail(xhr.responseText);
	            }
	        }
	    };
	    xhr.send(null);
	}

fetch可結(jié)合Promise和ajax簡單實現(xiàn)：

	function fetch(url) {
	    return new Promise(function (resolve,reject) {
	        ajax(url,function (res) {
	            resolve(res);
	        },function (err) {
	            reject(err);
	        })
	    })
	}

fetch調(diào)用之后返回的是一個Promise實例，可以直接調(diào)用Promise實例的then方法和catch方法獲取請求結(jié)果或報錯信息。

三、fetch和ajax的區(qū)別

Fetch和Ajax的主要區(qū)別在于它們的API設(shè)計、語法、錯誤處理、進(jìn)度監(jiān)測、以及對于跨域請求的處理。

• API設(shè)計方面
  • Fetch是現(xiàn)代JavaScript中的API，使用Promise對象來處理異步操作，可以鏈?zhǔn)秸{(diào)用，使代碼更易于理解和維護
  • Ajax是一種傳統(tǒng)的技術(shù)，通常使用XMLHttpRequest對象來進(jìn)行請求和響應(yīng)的處理
• 語法和錯誤處理方面
  • Fetch使用一種基于Promise的API風(fēng)格，返回的是一個Promise對象，對于網(wǎng)絡(luò)請求報錯，對400、500都當(dāng)做成功的請求，需要封裝去處理
  • Ajax的語法相對較復(fù)雜，需要編寫更多的代碼來處理回調(diào)函數(shù)和狀態(tài)，它通常使用回調(diào)函數(shù)來處理異步操作，可能會導(dǎo)致回調(diào)地獄的問題，尤其在復(fù)雜的請求鏈中
• 進(jìn)度監(jiān)測方面
  • Fetch沒有辦法原生監(jiān)測請求的進(jìn)度
  • Ajax基于原生的XHR開發(fā)，可以監(jiān)測
• 跨域請求方面
  • Fetch對跨域請求有更嚴(yán)格的限制，因為它遵循了同源策略，如果需要進(jìn)行跨域請求，需要在服務(wù)器端設(shè)置適當(dāng)?shù)腃ORS頭（Cross-Origin Resource Sharing）以允許跨域請求
  • Ajax也受到同源策略的限制，但可以通過JSONP、代理服務(wù)器等技術(shù)來進(jìn)行跨域請求
• 兼容性方面
  Fetch基于Promise開發(fā)，Ajax相較于Fetch兼容性好一些

總的來說，F(xiàn)etch是現(xiàn)代化的、更靈活的方式來處理網(wǎng)絡(luò)請求，特別適合使用在現(xiàn)代JavaScript應(yīng)用中，而Ajax仍然在一些舊的應(yīng)用和傳統(tǒng)的環(huán)境中使用，并且有些情況下可能更容易上手。

總結(jié)

到此這篇關(guān)于前端獲取資源的方式(ajax、fetch)以及其區(qū)別的文章就介紹到這了,更多相關(guān)前端獲取資源ajax、fetch內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論