构造器

  var xhr = new XMLHttpRequest()

设置超时时间

xhr.ontimeout= 设置超时时间为 1s

设置超时时间(单位:ms)

0为永不超时

HTTP 请求的状态

xhr.readystate  从请求开始到完全结束,有5个状态分别对应不同的阶段,具体如下表:

当前阶段 状态码
new XMLHttpRequest() 0
xhr.open() 1
请求发出,未收到响应头 2
响应头接收ok,开始接收响应体 3
响应体接收完成 4

HTTP状态码

xhr.status HTTP状态码

1xx  信息
2xx  成功

200:请求成功

3xx  重定向

304:重定向到:使用缓存

4xx  客户端错误

404:客户端错误

5xx  服务器错误

500:服务器遇到未知错误

状态码描述

xhr.statusText 返回值状态码描述

默认值:''
默认编码:Unicode UTF-8

xhr.status === 200时,xhr.statusText === 'ok'

xhr.responseText:     请响应体body

xhr.responseXML

xhr.responseXML 对请求的响应,解析为 XML 并作为 Document 对象返回。

对象的方法

方法                                           解释
xhr.abord() 关闭这个请求,将readyState重置为0
xhr.open() 打开一个HTTP请求
xhr.send() 发送HTTP请求
xhr.setRequestHeader() 向一个打开但未发送的请求设置或添加一个http请求头部
xhr.getAllResponseHeaders() 将HTTP响应头作为未解析的字符串返回
xhr.getResponseHeder() 返回指定的HTTP响应头部的值

对象的事件

onreadystatechange

当readyState改变时,触发的事件。

ontimeout

  请求超时

onloadend

  请求结束

onerror

  请求出错

One Example

let xml = new XMLHttpRequest();
xml.timeout = 0; //设置超时时间:0永不超时
/**
* xml.open(method, url, async, username?, password?)
* 打开一个请求,但不发送
* 会重置readyState = 1、responseText、responseXML、status 以及 statusTex恢复默认值
* 删除之前指定的所有的请求头部和响应头部
*/
xml.open('get', 'http://localhost:3000/api1') /**
* xml.send(body?: string)
* 请求体
* post|put:string
* 其他:null,或者不传
*
* 发送open()时指定的mehods、URL、认证资格
* 指定的setRequestHeader()
* 传递body参数
*
* 请求发出,send()将readyState设置为2,并处触发onreadystatechange
*/
xml.onprogress = function () {
console.log( 111 )
}
xml.send()
xml.onloadend = function () {
console.log( 'loadend...' )
}
xml.onerror = function () {
console.log( 'onerror...' )
}
xml.onreadystatechange = function () {
console.log( xml, xml.responseText )
if(xml.readyState === 4){
if(xml.status === 200){
console.log( xml.responseText )
}
}
}

封装http请求函数

/**[接口域名] */
const BASE_URL = 'http://localhost:3000' export default http = {
/**
* [query方法传参]
*/
get (route, params) {
return this.request('GET', this.getUrl(route, params))
},
/**
* [body方法传参]
*/
post (route, params) {
return this.request('POST', this.getUrl(route), JSON.stringify(params))
},
/**
* [body方法传参]
*/
put (route, params) {
return this.request('PUT', this.getUrl(route), JSON.stringify(params))
},
/**
* [query方法传参]
*/
delete (route, params) {
return this.request('DELETE', this.getUrl(route, params))
},
/**
* [body方法传参]
*/
patch (route, params) {
return this.request('PATCH', this.getUrl(route), JSON.stringify(params))
},
request (method, url, params) {
return new Promise ((resolve, reject) => {
params = typeof params === 'undefined' ? null : params
const xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.send(params);
xhr.onreadystatechange = function () {
if( xhr.readyState === 4 ) {
if( xhr.status === 200 ){
resolve(JSON.parse(xhr.responseText))
} else {
new Error('请求失败,错误码为:' + xhr.status + '; 错误状态:' + xhr.statusText)
}
} else {
new Error('请求失败')
}
}
})
},
/**
* [获取URL]
*/
getUrl (route, params) {
const reg = /^http|https/
let url = '' if(!reg.test(route)){
url = BASE_URL + route
} else {
url = route
} return typeof params !== 'undefined' ? this.stringifyUrl(url, params) : url
},
/**[拼接参数] */
stringifyUrl (url, params) {
let paramsStr = '' Object.keys(params).forEach((key, i, arr) => {
if(i < arr.length-1){
paramsStr += key + '=' + params[key] + '&'
} else {
paramsStr += key + '=' + params[key]
}
}) if(url.indexOf('?') > -1){
url += '&' + paramsStr
} else {
url += '?' + paramsStr
} return url
}
}

初步了解XMLHttpRequest对象、http请求的封装的更多相关文章

  1. Ajax异步请求XMLHttpRequest对象Get请求

    $(function () { $("#btnGetDate").click(function () { var xhr; //第一步:创建异步请求的核心的对象: if (XMLH ...

  2. Ajax技术---核心XMLHttpRequest对象

    Ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. (一)ajax技术的意义 我 ...

  3. Ajax中的XMLHttpRequest对象详解

    XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...

  4. javascript XMLHttpRequest对象全面剖析

    转载:http://www.jb51.net/article/23175.htm 一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程 ...

  5. 全面剖析XMLHttpRequest对象

    XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础.尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用:但是,我们 ...

  6. Ajax中的XMLHttpRequest对象详解(转)

    XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...

  7. window.XMLHttpRequest对象详解

    来自:http://blog.csdn.net/lccone/article/details/7743946 window.XMLHttpRequest XMLHttpRequest对象是当今所有AJ ...

  8. 轻松掌握XMLHttpRequest对象------【这是.net 版本】

    轻松掌握XMLHttpRequest对象 XmlHttp是什么? 最通用的定义为:XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接 ...

  9. 轻松掌握XMLHttpRequest对象

    XmlHttp是什么? 最通用的定义为:XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHt ...

随机推荐

  1. join中级篇---------hash join & merge join & nested loop Join

    嵌套循环连接(Nested Loop Join) 循环嵌套连接是最基本的连接,正如其名所示那样,需要进行循环嵌套,嵌套循环是三种方式中唯一支持不等式连接的方式,这种连接方式的过程可以简单的用下图展示: ...

  2. elasticsearch 简单聚合查询示例

    因为懒癌犯了,查询语句使用的截图而不是文字,导致了发布随笔的时候提示少于150字的随笔不能发布. 我就很郁闷了. 下面的查询都是前段时间工作中使用过的查询语句. 开始的时候是使用nodejs构建es查 ...

  3. CSS相对|绝对(relative/absolute)定位

    1.破坏性和包裹性 position:absolute与float:left,两者有两大共性:包裹性,破坏性. 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是 ...

  4. Nginx之解压编译安装-yellowcong

    安装前准备 对于nginx编译安装需要先安装编译 的工具,然后再安装nginx依赖 yum -y install gcc gcc-c++ autoconf automake make yum -y i ...

  5. 版本名称SNAPSHOT、alpha、beta、release、GA含义

    Alpha:是内部测试版,一般不向外部发布,会有很多Bug.一般只有测试人员使用.Beta:也是测试版,这个阶段的版本会一直加入新的功能.在Alpha版之后推出.RC:(Release Candida ...

  6. 为什么在实际的 kaggle 比赛中 gbdt 和 random forest 效果非常好?

    https://www.zhihu.com/question/51818176/answer/127637712

  7. 2017SN多校D1T2 note:dp

    题意: 给你一个长度为n的字符串s,并且告诉你有m对字母不能相邻,问你最少在s中取出多少个字符能够使这个字符串合法. 题解: 表示状态: dp[i] = max num of letters 考虑到第 ...

  8. TP框架入门基础

    ThinkPHP目录: ThinkPHP主目录文件夹: Conf文件夹: Library文件夹: Library=>Think文件夹:

  9. 动态IP下群晖搭建DDNS服务

    转载地址:https://www.zimrilink.com/share/dsm_aliddns_server.html 通过阿里云API(php)搭建出DDNS动态域名解析服务器;不同的是本文的方法 ...

  10. Ajax处理后台返回的Json数据

    // 处理后台传来的Json字符串装换成Json对象 var dataJson = JSON.parse(data); // 此时可以从Json对象中取值 if(dataJson.result == ...