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

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

文章目录

前言

提示：这里可以添加本文要记录的大概内容：

资源在：https://download.csdn.net/download/naozheyun2998/88916305

提示：以下是本篇文章正文内容，下面案例可供参考

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

在这里插入图片描述

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

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 =newXMLHttpRequest()
 
  xhr.onreadystatechange =function(){
   if(xhr.readyState ==4){
   if(xhr.status ==200){
   
        console.log("responseXML ",xhr.responseXML)if(xhr.responseXML){
   callback(xhr.responseText)}elseif(xhr.responseText){
   callback(xhr.responseText)}}}}
   xhr.open('GET', url,false)
  xhr.send(null)}

xhr.readyState

XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。
readyState01234含义未初始化；尚未调用open（）方法已打开：已经调用open()方法，尚未调用send（）方法已发送：已经调用send()方法，尚未受到响应接收中：已经收到部分响应完成：已经收到所有响应，可以使用了
每次 readyState 从一个值变成另一个值，都会触发 readystatechange 事件。可以借此机会检查 readyState 的值。
为保证跨浏览器兼容，onreadystatechange 事件处理程序应该在调用 open()之前赋值。

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

function ajax1(url, callback){
   const xhr =newXMLHttpRequest()
  
  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)}elseif(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 接收响应数据的类型

注释responseBodyresponseStreamresponseTextresponseXML将响应信息正文以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 XMLHttp

标签：前端网络 okhttp

本文转载自: https://blog.csdn.net/naozheyun2998/article/details/136264103
版权归原作者 jxy9998 所有，如有侵权，请联系我们删除。