XMLHttpRequset的一些基础知识

前端 专栏收录该内容
9 篇文章 0 订阅

昨天在使用Jquery的ajax请求时,在控制台打印了XMLHttpRequest对象,发现这个对象里面很多属性和方法比较陌生,所以花了一段时间研究了下XMLHttpRequest对象,参考了一篇有价值的文章,你真的会使用XMLHttpRequest吗?,学习内容如下。

XMLHttpRequest标准

XMLHttpRequest标准分为Level 1和Level 2。

XMLHttpRequest Level 1主要存在以下缺点:

* 受同源策略的限制,不能发送跨域请求;
* 不能发送二进制文件(如图片、视频、音频等)(Blob二进制数据),只能发送纯文本数据;
* 在发送和获取数据的过程中,无法实时获取进度信息,只能判断是否完成;

XMLHttpRequest Level 2中新增了以下功能:

* 可以发送跨域请求,在服务端允许的情况下;
* 支持发送和接收二进制数据;
* 新增formData对象,支持发送表单数据;
* 发送和获取数据时,可以获取进度信息;
* 可以设置请求的超时时间;

使用XMLHttpRequest对象来发送一个Ajax请求。

XMLHttpRequset对象

属性

属性功能
readyState存有服务器响应的状态信息,每当readyState改变时,onreadystatechange函数就会执行。
可能值有:
0,UNSENT,表示请求未初始化(在调用open()之前);
1,OPENED,请求已提出(调用send()之前);
2,HEADERS_RECEIVED,请求已发送(响应头和响应状态已返回);
3,LOADING,请求处理中(响应中通常有部分数据可用,但服务器还未完成响应);
4,DONE,请求已完成(可以访问服务器响应并使用它)
response
  • 服务器返回的数据
    * 默认值:空字符串”“
    * 当请求完成时,此属性才有值
    * 请求未完成时,此属性值可能是”“或null,与xhr.reponseType有关,当responseType为”“或者”text”时,值为”“,reponseTYpe为其他值时,值为null
responseText
  • 服务器返回的数据
    * 默认值为空字符串”“
    * 只有当 responseType 为”text”、”“时,xhr对象上才有此属性,此时才能调用xhr.responseText,否则抛错
    * 只有当请求成功时,才能拿到正确值。以下2种情况下值都为空字符串”“:请求未完成、请求失败
responseXML
  • 服务器返回的数据
    * 默认值为 null
    * 只有当 responseType 为”text”、”“、”document”时,xhr对象上才有此属性,此时才能调用xhr.responseXML,否则抛错
    * 只有当请求成功且返回数据被正确解析时,才能拿到正确值。以下3种情况下值都为null:请求未完成、请求失败、请求成功但返回数据无法被正确解析时
onreadystatechange存储函数(或函数名),每当readyState属性改变时,就会调用这函数
status200:”OK”
404:未找到页面
responseType(level 2新增)指定xhr.reponse的数据类型
timeout(level 2新增)
  • 超时,单位:milliseconds毫秒,默认值:0
    * 当调用xhr.send()方法时会触发xhr.onloadstart事件,表示请求开始,xhr.loadend事件触发请求结束
    * 可以在send()之后设置timeout,但计时起点仍为xhr.send()方法时刻
    * 当xhr为sync同步请求时,xhr.timeout必须设置为0,否则会报错。
withCredentials(认证信息)
upload对象,属性有target(EventTarget)、type(DOMString)、bubbles(boolean)、cancelable(boolean)、lengthComputable(boolean)、loaded(unsigned long(long))、total(unsigned long(long))

指定xhr.reponse数据类型

  1. xhr.overrideMimeType()

    • server返回document或xml文档
    • 设置xhr.overrideMimeType(‘text/xml; charset=utf-8’);
    • xhr.reponse得到一个DOM对象。
  2. xhr.responseType

reponseType值xhr.reponse数据类型说明
“”String字符串默认值
“text”String字符串
“document”Document对象希望返回XML数据时使用
“json”JavaScriptIE10/11不支持
“blob”Blob对象
“arrayBuffer”ArrayBuffer对象

获取response数据

XMLHttpRequest对象提供三个属性来获取请求返回数据,分别是:xhr.repsonse, xhr.reponseText, xhr.responseXML,
详情见XMLHttpRequest对象属性表。

发送同步请求

W3C的xhr标准中关于open()方法的说明:

Throws an "InvalidAccessError" exception if async is false, the JavaScript global environment is a document environment, and either the timeout attribute is not zero, the withCredentials attribute is true, or the responseType attribute is not the empty string.

当xhr为同步请求时,需满足如下条件:

  • xhr.timeout必须为0
  • xhr.withCredentials必须为false
  • xhr.responseType必须为”“

获取上传、下载进度

可以通过onporgress事件来实时显示进度,默认情况下50ms触发一次。

  • 上传触发的是xhr.upload对象的onprogress事件
  • 下载触发的是xhr对象的onprogress事件

方法

方法描述
abort()
getResponseHeader(name)
open(method,url,async)
  • 规定请求的类型、URL以及是否异步处理请求。
    * method,请求类型,GET或POST
    * url,文件在服务器上的位置
    * async:true(异步)或false(同步)
overrideMimeType()重写reponse的content-type
send(data)
  • 参数data可以是:ArrayBuffer、Blob、Document、DOMString、FormData、null
    * GET请求时,send()一般不传参或传null,最终data会被置为null
setRequestHeader(DOMString header, DOMString value)
  • 修改请求header;
    * 必须在open()方法之后,send()方法之前调用,否则会报错;
    * 可以调用多次,最终的值采用追加append方式

事件

事件描述
onloadstart调用xhr.send()方法后立即触发,未被调用则不会触发
onprogressxhr.upload.onprogress在上传阶段(即xhr.send()之后,xhr.readystate=2之前)触发,每50ms触发一次;xhr.onprogress在下载阶段(即xhr.readystate=3时)触发,每50ms触发一次。
onload请求成功时触发,xhr.readystate=4
onabort调用xhr.abort()后触发
onloadend请求结束(包括请求成功和请求失败)时触发
onerror在请求过程中,若发生Network error则会触发此事件(若发生Network error时,上传还没有结束,则会先触发xhr.upload.onerror,再触发xhr.onerror;若发生Network error时,上传已经结束,则只会触发xhr.onerror)。注意,只有发生了网络层级别的异常才会触发此事件,对于应用层级别的异常,如响应返回的xhr.statusCode是4xx时,并不属于Network error,所以不会触发onerror事件,而是会触发onload事件。
ontimeoutxhr.timeout不等于0,从请求开始onloadstart开始算起,当到达xhr.timeout所设置时间请求还未结束即onloadend,触发此事件
onreadystatechange每当xhr.readystate改变时触发,但xhr.readystate由非0值变为0时不会触发
XMLHttpRequest事件接口实现代码

interface XMLHttpRequestEventTarget : EventTarget {
  // event handlers
  attribute EventHandler onloadstart;
  attribute EventHandler onprogress;
  attribute EventHandler onabort;
  attribute EventHandler onerror;
  attribute EventHandler onload;
  attribute EventHandler ontimeout;
  attribute EventHandler onloadend;
};

interface XMLHttpRequestUpload : XMLHttpRequestEventTarget {

};

interface XMLHttpRequest : XMLHttpRequestEventTarget {
  // event handler
  attribute EventHandler onreadystatechange;
  readonly attribute XMLHttpRequestUpload upload;
};

XMLHttpRequest一共有8个事件:7个XMLHttpRequestEventTarget事件和一个onreadystatechange事件;XMLHttpRequestUpload只有7个XMLHttpRequesteEventTarget事件。

事件触发顺序

  1. 触发xhr.onreadystatechange(每次readyState变化时,都会触发一次)
  2. 触发xhr.onloadstart
    //上传阶段开始
  3. 触发xhr.upload.onloadstart
  4. 触发xhr.upload.onprogress
  5. 触发xhr.upload.onload
  6. 触发xhr.upload.onloadend
    //上传结束,下载阶段开始
  7. 触发xhr.onprogress
  8. 触发xhr.onload
  9. 触发xhr.onloadend

在哪个xhr事件中注册成功回调

  xhr.onreadystatechange = function(){
    if(xhr.readyState=4&&xhr.status==200){
        //do successCallback
    }
  }
  xhr.onload = function () {
    //如果请求成功
    if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
      //do successCallback
    }
  }

HTTP状态码

相关资料

  1. 你真的会使用XMLHttpRequest吗?
  2. XMLHttpRequest2 新技巧
  3. 【翻译】这个API很“迷人”——(新的Fetch API)
  4. W3C XMLHttpRequest标准
  5. XMLHttpRequest Level 2 使用指南
  6. MDN XMLHttpRequest
  • 1
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值