一、使用 ajax 請(qǐng)求

1. 什么是 ajax 請(qǐng)求

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

2. ajax請(qǐng)求原理

• 簡(jiǎn)單概述

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

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

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

二、使用fetch請(qǐng)求

1. 什么是fetch請(qǐng)求

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

2. fetch請(qǐng)求原理

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

通過以上ajax部分的講解中，我們知道ajax可以通過XMLHttpRequest簡(jiǎn)單實(shí)現(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簡(jiǎn)單實(shí)現(xiàn)：

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

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

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

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

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

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

總結(jié)

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