前端获取资源的方式(ajax、fetch)以及其区别详解_Javascript

一、使用 ajax 请求

1. 什么是 ajax 请求

ajax 即 asynchronous javascript and xml（异步javascript和xml），在2005年提出，是一种描述使用现有技术集合的‘新’方法，包括: html 或 xhtml, css, javascript, dom, xml, xslt, 以及最重要的xmlhttprequest。使用ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

2. ajax请求原理

简单概述
ajax的原理简单来说通过javascript原生的xmlhttprequest对象来向服务器发异步请求，从服务器获得数据，然后再用javascript来操作dom，从而实现页面更新。
与服务端交互详细过程
- 创建 ajax的核心对象 xmlhttprequest对象
- 通过 xmlhttprequest 对象的 open() 方法与服务端建立连接
- 构建请求所需的数据内容，并通过xmlhttprequest 对象的 send() 方法发送给服务器端
- 通过 xmlhttprequest 对象提供的 onreadystatechange 事件，监听服务器端的通信状态
- 接受并处理服务端向客户端响应的数据结果
- 根据响应结果操作dom，将处理结果更新到 html页面中

详细实现代码示例

	// 创建xmlhttprequest对象
	const request = new xmlhttprequest()
	// 监听onreadystatechange 事件，与服务端通信
	request.onreadystatechange = function(e){
		// 获取当前请求状态，readystate 的值为 4 ，表示整个请求过程完毕
	    if(request.readystate === 4){ 
	    	// 根据返回的状态码，判断当前请求是否成功返回
	        if(request.status >= 200 && request.status <= 300){  
	        	// 获取到服务端返回的结果
	            console.log(request.responsetext) 
	        }else if(request.status >=400){
	        	// 获取到服务端返回的错误信息
	            console.log("错误信息：" + request.status)
	        }
	    }
	}
	// xmlhttprequest 对象的 open() 方法与服务端建立连接
	request.open('post','http://xxxx')
	// 通过xmlhttprequest 对象的 send() 方法将请求发送给服务端
	request.send()

二、使用fetch请求

1. 什么是fetch请求

fetch请求是一种现代web api，用于在javascript中发出http数据请求。它是xmlhttprequest的一种替代方案，提供了更加简洁和现代化的方式来处理网络请求。fetch函数是原生javascript的一部分，不需要使用xmlhttprequest对象。fetch请求使用promise来处理异步操作，这使得它的代码更加清晰和简洁。

2. fetch请求原理

fetch是基于原生的xmlhttprequest对象来实现数据请求的。
同时，fetch也是基于promise实现链式调用的。
则实现fetch的本质：就是实现ajax的封装以及promise的实现。

通过以上ajax部分的讲解中，我们知道ajax可以通过xmlhttprequest简单实现：

	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可结合promise和ajax简单实现：

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

fetch调用之后返回的是一个promise实例，可以直接调用promise实例的then方法和catch方法获取请求结果或报错信息。

三、fetch和ajax的区别

fetch和ajax的主要区别在于它们的api设计、语法、错误处理、进度监测、以及对于跨域请求的处理。

api设计方面
- fetch是现代javascript中的api，使用promise对象来处理异步操作，可以链式调用，使代码更易于理解和维护
- ajax是一种传统的技术，通常使用xmlhttprequest对象来进行请求和响应的处理
语法和错误处理方面
- fetch使用一种基于promise的api风格，返回的是一个promise对象，对于网络请求报错，对400、500都当做成功的请求，需要封装去处理
- ajax的语法相对较复杂，需要编写更多的代码来处理回调函数和状态，它通常使用回调函数来处理异步操作，可能会导致回调地狱的问题，尤其在复杂的请求链中
进度监测方面
- fetch没有办法原生监测请求的进度
- ajax基于原生的xhr开发，可以监测
跨域请求方面
- fetch对跨域请求有更严格的限制，因为它遵循了同源策略，如果需要进行跨域请求，需要在服务器端设置适当的cors头（cross-origin resource sharing）以允许跨域请求
- ajax也受到同源策略的限制，但可以通过jsonp、代理服务器等技术来进行跨域请求
兼容性方面
fetch基于promise开发，ajax相较于fetch兼容性好一些

总的来说，fetch是现代化的、更灵活的方式来处理网络请求，特别适合使用在现代javascript应用中，而ajax仍然在一些旧的应用和传统的环境中使用，并且有些情况下可能更容易上手。