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

这篇具有很好参考价值的文章主要介绍了web网络请求与远程资源-XmlHttpRequest。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

前言

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

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

web网络请求与远程资源-XmlHttpRequest,http网络请求与远程资源,前端,网络,okhttp

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

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

第三方库里包含多个api。

二、XMLHttpRequest

XMLHttpRequest标准又分为Level 1和Level 2

Level1

缺点：

只支持文本数据的传送，无法用来读取和上传二进制文件。
传送和接收数据是，没有进度信息，只能提示有没有完成。
受到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>

web网络请求与远程资源-XmlHttpRequest,http网络请求与远程资源,前端,网络,okhttp
经过笔者测试，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 对象。