XMLHttpRequest（XHR）和Fetch API都是用于在前端进行网络通信的工具，但它们各有各的特点

一、基本写法

1. XMLHttpRequest（XHR）

var xhr = new XMLHttpRequest();xhr.open(method, url, true);xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {var response = JSON.parse(xhr.responseText);console.log(response);}};params ? xhr.send(JSON.stringify(params)) : xhr.send();

2. Fetch API

fetch(url,{method: method, // 指定请求方法headers: {'Content-Type': 'application/json' // 设置请求的 Content-Type},body: JSON.stringify(params) 
})
.then(response => {console.log(response)if (response.ok) {return response.json();}throw new Error('Network response was not ok.');
})
.then(json => {console.log("返回json")console.log(json)
})
.catch(err=>{console.log('Request Failed', err)
})

二、兼容性

1. XMLHttpRequest（XHR）

IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用XMLHttpRequest

• XMLHttpRequest ie9+
• XMLHttpRequest ie9中不支持CORS

XDomainRequest 兼容ie9中XMLHttpRequest不支持CORS的场景；但是XDomainRequest也有以下限制
只支持 GET 和 POST mehtod
XDomainRequest 不支持带 cookie
XDomainRequest 不能设置 responseType, 通信双方需要约定数据格式
XDomainRequest 的响应没有 response status code

2. Fetch API

• Firefox‌：Firefox 39及以上版本支持Fetch API。
• Chrome‌：Chrome 42及以上版本支持Fetch API。
• Safari‌：Safari 10及以上版本支持Fetch API。
• Edge‌：Edge 12及以上版本支持Fetch API。

三、Promise支持

1. XMLHttpRequest（XHR）

不支持promise，XHR使用回调函数来处理异步操作，通过设置事件处理程序来监听请求的状态变化。例如，可以通过onreadystatechange事件处理程序来监听请求的状态变化‌

2. Fetch API

• Fetch API是ES6引入的现代网络请求接口，提供了一种更简洁和强大的方式来进行网络通信。
• 使用Promises来处理异步操作，并且支持使用async/await语法进行更清晰的异步流程控制。
• Fetch API提供了更直观和简洁的API，使得发送请求和处理响应变得更加容易和灵活。

四、请求响应

1. XMLHttpRequest（XHR）

XHR 使用事件和 XMLHttpRequest 对象处理请求和响应

请求

1. cookies: 默认会携带cookies，适用于需要与服务器进行身份验证的场景‌。
2. 进度监听和取消请求‌：可以监听上传和下载的进度xhr.upload.onprogress和xhr.onprogress，并且可以用xhr.abort取消一个正在进行的请求‌

// 上传
function uploadFile(file) {const xhr = new XMLHttpRequest();// 监听上传进度xhr.upload.addEventListener("progress", function(event) {if (event.lengthComputable) {const percentComplete = (event.loaded / event.total) * 100;console.log(`Upload progress: ${percentComplete.toFixed(2)}%`);// 这里可以更新进度条等UI元素}}, false);// 处理请求完成的事件xhr.onload = function() {if (xhr.status === 200) {console.log('Upload successful:', xhr.responseText);} else {console.error('Upload failed:', xhr.statusText);}};// 处理请求错误的事件xhr.onerror = function() {console.error('An error occurred during the upload');};// 发送请求xhr.open('POST', '/upload', true);const formData = new FormData();formData.append('file', file);xhr.send(formData);
}
//下载
function downloadFile(url) {const xhr = new XMLHttpRequest();// 监听下载进度xhr.addEventListener("progress", function(event) {if (event.lengthComputable) {const percentComplete = (event.loaded / event.total) * 100;console.log(`Download progress: ${percentComplete.toFixed(2)}%`);// 这里可以更新进度条等UI元素}}, false);// 处理下载完成的事件xhr.onload = function() {if (xhr.status === 200) {console.log('Download successful');const blob = new Blob([xhr.response], { type: 'application/octet-stream' });const link = document.createElement('a');link.href = window.URL.createObjectURL(blob);link.download = 'downloaded_file'; // 自定义文件名link.click();} else {console.error('Download failed:', xhr.statusText);}};// 设置响应类型为blob以便下载xhr.responseType = 'blob';xhr.open('GET', url, true);xhr.send();
}

3. 通过直接设置XHR对象的属性和方法来配置请求，如设置请求头、请求体等。
   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

响应

1. 响应数据以字符串形式提供，需要手动解析为JSON或其他格式
   JSON.parse(xhr.responseText);
2. 响应XHR对象
   readyState属性 返回当前请求的状态
   0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
   1 (初始化) 对象已建立，尚未调用send方法
   2 (发送数据) send方法已调用，但是当前的状态及http头未知
   3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
   4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
3. status 返回当前请求的http状态码-见最后
   status属性返回当前请求的http状态码,此属性仅当数据发送并接收完毕后–状态为200才可获取。

2. Fetch API

Fetch API 使用 Promise 和 Response/Request 对象处理请求和响应,Response 对象、Request 对象、Headers 对象

请求

1. cookies：默认不会携带cookies，需要通过设置credentials属性来手动管理cookies‌
2. 进度监听和取消请求‌：不支持进度监听功能，且目前没有原生的请求取消机制‌-可以通过AbortController来实现
   AbortController.abort()
3. 通过传递一个配置对象给fetch函数来配置请求，该对象可以包含方法、头、体等信息。

fetch('https://example.com/api/endpoint', {method: 'POST',headers: { 'Content-Type': 'application/json' }, //请求的头信息body: JSON.stringify({ key: 'value' }), //请求体mode‌："cors", //请求的模式，如cors-跨源资源共享、no-cors-无跨源资源共享或same-origin-只会请求与你的网站同源的资源,默认cors‌credentials‌："omit",请求的credentials-是否应该发送凭据如Cookies、HTTP认证以及客户端证书，如omit-默认值，不发送凭据、same-origin-仅对同源URLs发送凭据 或include-对所有URLs发送凭据。‌cache‌："no-cache"//请求的cache模式-浏览器如何缓存请求，如default-使用浏览器的默认缓存行为、no-store-不缓存请求或响应的任何内容、reload-不使用缓存，始终从服务器上获取最新的响应、no-cache- 缓存响应，但是在使用之前必须与服务器进行验证、force-cache-如果缓存中有内容，则使用它，不下载新的数据
})

还有：
redirect：重定向模式，如follow（自动重定向）、error（如果产生重定向将自动终止并抛出错误）或manual（手动处理重定向）。
referrer：一个USVString，可以是no-referrer、client或一个URL。
referrerPolicy：指定referer HTTP头部的值。
integrity：请求的subresource integrity值。

响应

Response 对象的属性

async function fetchText() {let response = await fetch('/readme.txt');console.log(response.status); console.log(response.statusText);
}

1. 返回的是一个Response对象，包含数据流，可以使用.json(), .text(), .blob()【一定要调用】等方法来解析响应数据

   • text()：返回一个解析为文本字符串的Promise对象。
   • json()：返回一个解析为JSON对象的Promise对象。
   • blob()：返回一个解析为Blob对象的Promise对象。
   • arrayBuffer()：返回一个解析为ArrayBuffer对象的Promise对象。
   • formData()：返回一个解析为FormData对象的Promise对象

2. 响应对象属性
   Response.ok属性返回一个布尔值，表示请求是否成功，true对应 HTTP 请求的状态码 200 到 299，false对应其他的状态码。
   Response.status属性返回一个数字，表示 HTTP 回应的状态码（例如200，表示成功请求）。
   Response.statusText属性返回一个字符串，表示 HTTP 回应的状态信息（例如请求成功以后，服务器返回"OK"）。
   Response.url属性返回请求的 URL。如果 URL 存在跳转，该属性返回的是最终 URL。
   Response.type属性返回请求的类型。可能的值如下：

   • basic：普通请求，即同源请求。
   • cors：跨域请求。
   • error：网络错误，主要用于 Service Worker。
   • opaque：如果fetch()请求的type属性设为no-cors，就会返回这个值，详见请求部分。表示发出的是简单的跨域请求，类似表单的那种跨域请求。
   • opaqueredirect：如果fetch()请求的redirect属性设为manual，就会返回这个值，详见请求部分。

   Response.redirected属性返回一个布尔值，表示请求是否发生过跳转。

Response.headers 属性
Headers 对象提供了以下方法，用来操作标头。

	Headers.get()：根据指定的键名，返回键值。Headers.has()： 返回一个布尔值，表示是否包含某个标头。Headers.set()：将指定的键名设置为新的键值，如果该键名不存在则会添加。Headers.append()：添加标头。Headers.delete()：删除标头。Headers.keys()：返回一个遍历器，可以依次遍历所有键名。Headers.values()：返回一个遍历器，可以依次遍历所有键值。Headers.entries()：返回一个遍历器，可以依次遍历所有键值对（[key, value]）。Headers.forEach()：依次遍历标头，每个标头都会执行一次参数函数。

status状态码

100 Continue 初始的请求已经接受，客户应当继续发送请求的其余部分
101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议
200 OK 一切正常，对GET和POST请求的应答文档跟在后面。
201 Created 服务器已经创建了文档，Location头给出了它的URL。
202 Accepted 已经接受请求，但处理尚未完成。
203 Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝
204 No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的
205 Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容
206 Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它
300 Multiple Choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。
301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
302 Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。
303 See Other 类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取
304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取
307 Temporary Redirect 和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。
400 Bad Request 请求出现语法错误。
401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。
403 Forbidden 资源不可用。
404 Not Found 无法找到指定位置的资源
405 Method Not Allowed 请求方法（GET、POST、HEAD、Delete、PUT、TRACE等）对指定的资源不适用。
406 Not Acceptable 指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容
407 Proxy Authentication Required 类似于401，表示客户必须先经过代理服务器的授权。
408 Request Timeout 在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。
409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。
410 Gone 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。
411 Length Required 服务器不能处理请求，除非客户发送一个Content-Length头
412 Precondition Failed 请求头中指定的一些前提条件失败
413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头
414 Request URI Too Long URI太长
416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头
500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求
501 Not Implemented 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求
502 Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答
503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头
504 Gateway Timeout 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答
505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本