异步请求之XMLHttpRequest篇

denson 发布于2019-08-21 16:40 / 1063人阅读

摘要：简介对象可以实现页面无刷新来实现与服务端进行数据交互最先有微软公司设计，随后被等使用现在已成为异步请求的标准，几乎所有的浏览器都支持此对象它支持的异步请求协议包括，，为便于介绍后面我们将的实例对象称作实例注释部分可以单个放开进行测试请求成功

XMLHttpRequest 简介

XMLHttpRequest对象可以实现页面无刷新来实现与服务端进行数据交互.最先有微软公司设计，随后被Google,Mozilla等使用.现在已成为异步请求的标准，几乎所有的浏览器都支持此对象.它支持的异步请求协议包括HTTP，file，ftp.为便于介绍,后面我们将XMLHttpRequest的实例对象称作xhr.

实例

注释部分可以单个放开进行测试.

var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc&page=1&per_page=10";

xhr.open(method, url, true);
xhr.responseType = "json";

// xhr.timeout = 1000;
// xhr.overrideMimeType("text/xml");
xhr.onreadystatechange = function () {
  
  if(xhr.readyState === xhr.DONE) {
      if(xhr.status === 200){ // 请求成功
        console.log(xhr.response);
      // console.log(JSON.parse(xhr.responseText));
      // console.log(xhr.upload);
      
        //console.log(xhr.responseXML);
      //console.log(xhr.responseURL);
      //console.log(xhr.status);
      //console.log(xhr.statusText);
      //console.log("Content-Type:",xhr.getResponseHeader("Content-Type"));
      //console.log(xhr.responseURL);
      //console.log(xhr.getAllResponseHeaders());    
      }else{ // 请求失败
          console.log(xhr.response);
      }
    
  }
};
xhr.ontimeout = function(event){
  console.log("请求超时！");
}
xhr.setRequestHeader("Content-Type","application/json");
xhr.send();

// xhr.abort();  // 中断请求

属性 UNSENT,OPEND,HEADERS_RECEIVED,LOADING,DONE

这五个属性的值代表xhr.readyState可能存在的值

UNSENT: 值为 0,表示xhr实例已经创建.但尚未执行xhr.open()方法.

OPENED: 值为 1,表示xhr.open()已经执行.

HEADS_RECEIVED: 值为 2,表示xhr.send()已经执行,服务端已经获取到请求头.

LOADING: 值为 3,表示正在接受xhr.responseText,通俗讲就是正在获取服务端返回的数据.

DONE: 值为 4,表示整个请求流程已经完成.

onreadystatechange

从词面意思可以了解到此属性为事件处理程序,当xhr.readyState属性发生变化时，触发此事件.

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === xhr.DONE){
            if(xhr.status === 200){
                console.log("请求成功!");
            }else{
                console.log("请求失败!");
            }

            
        }
    }

readyState

只读属性,表示整个异步请求中的状态,其存在五个可能的值.

response

只读属性,此属性返回服务端的响应内容,客户端可以通过xhr.responseType指定响应内容的类型.

responseText

只读属性,此属性为xhr.response的一个特例,返回的响应内容为text类型.如果指定了xhr.responseType为非text类型,则读取此属性时会报错.

var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc&page=1&per_page=10";

xhr.open(method, url, true);
xhr.responseType = "json";
xhr.onreadystatechange = function () {

  if(xhr.readyState === xhr.DONE) {
      if(xhr.status === 200){ // 请求成功
          console.log(xhr.responseText); // 执行到这里会报错
            
      }else{ // 请求失败
          console.log(JSON.parse(xhr.response));
      }
    
  }
};
xhr.send();

由于我们指定了xhr.responseType的值为json,获取响应内容用xhr.response就OK了.

responseType

responseType定义响应内容(即xhr.response)的类型,其值为枚举类型,分别为:arraybuffer,blob,document,json,text.如果传入的值为空字符串,则默认为text.

responseURL

返回序列化后的响应URL.

responseXML

返回被转化为XML格式的响应内容,以下情况将返回null.

请求不成功

还未执行xhr.send()方法

响应内容不能被转换为XML或者HTML

status

返回响应的状态码,请求成功返回的状态码为200,状态码存在的可能值列表请点击状态码列表查看.

statusText

返回响应的状态码对应的文字描述,例如 200 对应 "OK".

timeout

设置请求的超时毫秒数，当请求的时长超出了响应的毫秒数,请求会自动中断.如果是在IE浏览器中,该属性的设置需要在open()方法之后和send()方法之前.

ontimeout

此属性为请求超时的事件处理程序,请求超时，触发此方法.

upload

只读属性,返回一个对象，对象包含了该xhr可以触发的事件.

console.log(xhr.uplaod);

withCredentials

此属性为一个布尔值,表示是否将验证信息(例如cookie)传入到header中.此属性只针对跨站请求有效.

onprogress,onabort,onerror,onload,onloadend,onloadstart

这些属性是xhr的事件处理程序.

onprogress:可能会在请求的过程中多次调用,在监测文件上传进度时可以使用此属性.

onerror:请求过程中发生错误时出发此事件处理程序.

onabort:请求中断会触发此事件处理处理程序.

onload:请求执行成功后会触发此事件处理程序.

onloadstart:请求开始时触发此事件处理程序.

onloadend:请求完成是触发此事件处理程序,onload是必须要成功才会调用.

方法 abort()

中断当前请求,当执行xhr.send()后此方法才能生效.

getAllResponseHeaders()

返回响应的header信息(String 类型)，以CRLF分割.如果没有接收到响应头,则返回null.

getResponseHeader(name)

获取某个header属性的值,name参数为需要获取属性值的key.如果header对象不存在此属性或者获取header对象失败,则返回null.

open(method,url,async)

初始化请求,要执行请求必选先执行此方法.

参数说明

method:HTTP(s)请求方法,例如GET,POST,PUT,DELETE .

url:请求的路径.

async:是否为异步请求,一般情况我们这个参数会传true.

ovverideMimeType(mimetype)

将服务端返回的信息强制转化为mimetype类型.

send()

发送请求,如果请求类型为异步请求,send()方法的返回值会立即返回.

setRequestHeader()

设置HTTP请求头.此方法需要在open()之后和send()之前执行.如果设置了不被支持的属性,请求可能会报错.

    var xhr = new XMLHttpRequest();
    xhr.setRequestHeader("Content-Type","application/json");

兼容性

以上提到的属性和方法在IE7+,Chorme,Firefox等主流浏览器都兼容，其中onprogress,onabort,onerror,onload,onloadend,onloadstart等事件处理程序在IE下需IE10+才能正常运行.

云服务器 GPU云服务器之基础篇异步请求 js异步请求数据 ajax的异步请求

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88581.html

前端面试题 -- JS篇

摘要：原始数据类型引用数据类型两者的区别值存储方式不同原始数据类型将变量名和值都存储在栈内存中引用数据类型将变量名存储在栈内存中，将值存储在堆内存中，并在栈内存中存储值的地址，该地址指向堆内存中的值。类型 1.js中有哪些数据类型，并解释清楚原始数据类型和引用数据类型 js中共有null,undefined, string,number,boolean,object六种数据类型。原始数据...

DangoSky 2019-08-19 18:18 评论0 收藏0
ajax请求相关

摘要：因为请求是异步的，我们无法获知请求的进度和响应状态，给我们提供了一个事件，我们可以通过监听这个时间来关注这种变化，所以下一步是注册事件。请求还没有被发送。方法已调用，请求已发送到服务器。到此，请求准备完全完成。上一篇单独写的是ajax跨域，这一篇就来详细说一说ajax，ajax是现代web开发中必不可少的一部分内容，非常基础也非常重要，这篇总结一下到目前为止我对ajax的理解。什么...

h9911 2019-08-30 14:00 评论0 收藏0
ajax请求相关

摘要：因为请求是异步的，我们无法获知请求的进度和响应状态，给我们提供了一个事件，我们可以通过监听这个时间来关注这种变化，所以下一步是注册事件。请求还没有被发送。方法已调用，请求已发送到服务器。到此，请求准备完全完成。上一篇单独写的是ajax跨域，这一篇就来详细说一说ajax，ajax是现代web开发中必不可少的一部分内容，非常基础也非常重要，这篇总结一下到目前为止我对ajax的理解。什么...

SolomonXie 2019-08-26 11:48 评论0 收藏0
ajax请求相关

摘要：因为请求是异步的，我们无法获知请求的进度和响应状态，给我们提供了一个事件，我们可以通过监听这个时间来关注这种变化，所以下一步是注册事件。请求还没有被发送。方法已调用，请求已发送到服务器。到此，请求准备完全完成。上一篇单独写的是ajax跨域，这一篇就来详细说一说ajax，ajax是现代web开发中必不可少的一部分内容，非常基础也非常重要，这篇总结一下到目前为止我对ajax的理解。什么...

Alliot 2019-08-01 18:36 评论0 收藏0
ajax入门

摘要：基于标准被广泛支持。这样的类最初是在中作为一个名为的对象引入的。请求还没有被发送。当为，这个属性返回目前已经接收的响应部分。由服务器返回的状态代码，如表示成功，而表示错误。方法取消当前响应，关闭连接并且结束任何未决的网络活动。前言总括：本文讲解了ajax的历史，工作原理以及优缺点，对XMLHttpRequest对象进行了详细的讲解，并使用原生js实现了一个ajax对象以方便日常开...

Fundebug 2019-08-20 13:51 评论0 收藏0