web网络请求与远程资源-XmlHttpRequest

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
资源在：https://download.csdn.net/download/naozheyun2998/88916305
提示：以下是本篇文章正文内容，下面案例可供参考

一、ajax，fetch,axios 三者的区别

三者都是用于网络请求，只不过是维度不同。

1. ajax(Asynchronous JavaScript+XML)，异步技术的统称；
2. Fetch 是一个具体的api
3. axios ，是一个第三方库,下载地址：https://www.npmjs.com/package/axios

第三方库里包含多个api。

二、XMLHttpRequest

XMLHttpRequest标准又分为Level 1和Level 2

Level1

缺点：

1. 只支持文本数据的传送，无法用来读取和上传二进制文件。
2. 传送和接收数据是，没有进度信息，只能提示有没有完成。
3. 受到Same Origin Polic (通域限制),只能想同一域名的服务器请求数据。

使用方法：

三个参数：请求类型，请求url，请求是否异步；
第三个参数如果是：false，那么就是同步，会阻塞js 的进程；如果是true，那么就是异步，不会阻塞js 进程。

xhr.open("get",url,false)

xhr.open（） 方法，只是为发送请求做准备，不会真的发送请求，必须调用xhr.send() 方法才行

xhr.open('get',url,false);
xhr.send(null)

才能发送。
封装成一个ajax 方法的示例：

function ajax1(url, callback) {
   
  const xhr = new XMLHttpRequest()
 
  xhr.onreadystatechange = function () {
   
    if (xhr.readyState == 4) {
   
      if (xhr.status == 200) {
   
        console.log("responseXML ",xhr.responseXML)
        if(xhr.responseXML){
   
          callback(xhr.responseText)
        }else if(xhr.responseText){
   
          callback(xhr.responseText)
        }
        
      }
    }
  }
   xhr.open('GET', url, false)
  xhr.send(null)
}

xhr.readyState

XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。

readyState	0	1	2	3	4
含义	未初始化；尚未调用open（）方法	已打开：已经调用open()方法，尚未调用send（）方法	已发送：已经调用send()方法，尚未受到响应	接收中：已经收到部分响应	完成：已经收到所有响应，可以使用了

每次 readyState 从一个值变成另一个值，都会触发 readystatechange 事件。可以借此机会检查 readyState 的值。
为保证跨浏览器兼容，onreadystatechange 事件处理程序应该在调用 open()之前赋值。

问题：为什么不在xhr.onreadystatechange 里面使用this 呢？
回答：
因为xhr.onreadystatechange里面有作用域的问题。使用this 可能会导致功能失败或者错误。这个取决于用户使用的浏览器，因此还是使用xhr 对象保险一些。

function ajax1(url, callback) {
   
  const xhr = new XMLHttpRequest()
  
  xhr.onreadystatechange = function () {
   
    console.log("readyState",xhr.readyState)
    console.log("this",this)
    console.log("xhr",xhr)
    if (xhr.readyState == 4) {
   
      if (xhr.status == 200) {
   
        console.log("responseXML ",xhr.responseXML)
        if(xhr.responseXML){
   
          callback(xhr.responseText)
        }else if(xhr.responseText){
   
          callback(xhr.responseText)
        }
        
      }
    }
  }
  xhr.open('GET', url, false)
  xhr.send(null)
}

// 获取请求
function testxmlHttpRequest(){
   
  ajax1('http://192.168.1.4:3000/',callbackXmlHttpRequest)
}

// html
 <button onclick="testxmlHttpRequest()">xmlhttprequest</button>

经过笔者测试，edge,chrome,safair 都支持，但是还是使用xhr 不要使用this 比较好。

xhr 接收响应数据的类型

注释	responseBody	responseStream	responseText	responseXML
	将响应信息正文以Unsigned Byte 数组形式返回	以ADO Stream 对象的形式返回响应信息	将响应信息作为字符串返回	将响应信息格式化为XML 文档格式返回

status 和statusText

xhr.status: 响应的HTTP 状态
xhr.statusText:响应的HTTP 状态描述

收到响应后，第一步检查xhr.status 的值，来确定响应成功返回。

http 状态码

• 1xx:指示信息-表示请求已接收，继续处理；这类响应是临时响应
• 2xx:成功-表示请求已被成功接收
• 3xx:重定向-要完成请求必须进行更进一步的操作
• 4xx:客户端错误-请求有语法错误或请求无法实现
• 5xx:服务器错误-服务器未能实现合法的请求
  比如：
• 200 OK:客户端请求成功
• 202 Accepted 已接受，但是未处理成功
• 204 请求处理成功，但是没有资源返回
• 206 Partial Content:客户发送了一个带有Range头的GET请求，服务器完成了它
• 301 Moved Permanently:永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替。
• 302 Found:临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
• 303 303和302状态码有着相同的功能，但是303明确表示客户端应当采用get方法获取资源
• 304 Not Modified:客户端有缓冲的文档并发出了一个条件性的请求，服务器告诉客户原来缓冲的文档还可以继续使用
• 305 Use Proxy： 使用代理。所请求的资源必须通过代理访问
• 307 Temporary Redirect:临时重定向。与302类似。使用GET请求重定向
• 400 Bad Request:客户端请求有语法错误，不能被服务器所理解
• 401 Unauthorized:请求未经授权，这个状态代码必须和WW-Authenticate报头域一起使用
• 403 Forbidden:对被请求页面的访问被禁止
• 404 Not Found:请求资源不存在
• 500 Internal Server Error:服务器发生不可预期的错误原来缓冲的文档还可以继续使用
• 502 Bad Gateway 充当网关或代理的服务器，从远端服务器接收到了一个无效的请求
• 503 Server Unavailable:请求未完成，服务器临时过载或当机，一段时间后可能恢复正常

为什么要使用xhr.status 而不是使用xhr.statusText

因为statusText 属性，已经在跨浏览器的情况下，证明是不可靠的了。

xhr.send()

xhr.send() 方法，接收一个参数，这个参数是作为作为请求体的数据发送给服务端的。不如不发送这个请求体数据，那么就必须传null。
调用这个方法后，XHR 对象会停止触发事件，并阻止访问这个对象上任何与响应相关的属性。中
断请求后，应该取消对 XHR 对象的引用。由于内存问题，不推荐重(chong)用 XHR 对象。

xhr.abort()

在收到响应之前如果想取消异步请求，可以调用 abort()方法:

xhr.abort();

调用这个方法后，XHR 对象会停止触发事件，并阻止访问这个对象上任何与响应相关的属性。中
断请求后，应该取消对 XHR 对象的引用。由于内存问题，不推荐重用 XHR 对象。

cors 问题

注意 只能访问同源 URL，也就是域名相同、端口相同、协议相同。如果请求的 URL 与
发送请求的页面在任何方面有所不同，则会抛出安全错误。
报错如下：

Access to XMLHttpRequest at 'http://192.168.1.4:3000/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

node 解决跨域问题

1. 使用cors

npm i cors -s

在代码中使用

const express = require('express')
const cors = require('cors')
const app = express()
const port = 3000
const path = require('path')
app.