初步了解XMLHttpRequest对象、http请求的封装
构造器
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 返回值状态码描述
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请求的封装的更多相关文章
- Ajax异步请求XMLHttpRequest对象Get请求
$(function () { $("#btnGetDate").click(function () { var xhr; //第一步:创建异步请求的核心的对象: if (XMLH ...
- Ajax技术---核心XMLHttpRequest对象
Ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. (一)ajax技术的意义 我 ...
- Ajax中的XMLHttpRequest对象详解
XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...
- javascript XMLHttpRequest对象全面剖析
转载:http://www.jb51.net/article/23175.htm 一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程 ...
- 全面剖析XMLHttpRequest对象
XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础.尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用:但是,我们 ...
- Ajax中的XMLHttpRequest对象详解(转)
XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...
- window.XMLHttpRequest对象详解
来自:http://blog.csdn.net/lccone/article/details/7743946 window.XMLHttpRequest XMLHttpRequest对象是当今所有AJ ...
- 轻松掌握XMLHttpRequest对象------【这是.net 版本】
轻松掌握XMLHttpRequest对象 XmlHttp是什么? 最通用的定义为:XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接 ...
- 轻松掌握XMLHttpRequest对象
XmlHttp是什么? 最通用的定义为:XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHt ...
随机推荐
- join中级篇---------hash join & merge join & nested loop Join
嵌套循环连接(Nested Loop Join) 循环嵌套连接是最基本的连接,正如其名所示那样,需要进行循环嵌套,嵌套循环是三种方式中唯一支持不等式连接的方式,这种连接方式的过程可以简单的用下图展示: ...
- elasticsearch 简单聚合查询示例
因为懒癌犯了,查询语句使用的截图而不是文字,导致了发布随笔的时候提示少于150字的随笔不能发布. 我就很郁闷了. 下面的查询都是前段时间工作中使用过的查询语句. 开始的时候是使用nodejs构建es查 ...
- CSS相对|绝对(relative/absolute)定位
1.破坏性和包裹性 position:absolute与float:left,两者有两大共性:包裹性,破坏性. 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是 ...
- Nginx之解压编译安装-yellowcong
安装前准备 对于nginx编译安装需要先安装编译 的工具,然后再安装nginx依赖 yum -y install gcc gcc-c++ autoconf automake make yum -y i ...
- 版本名称SNAPSHOT、alpha、beta、release、GA含义
Alpha:是内部测试版,一般不向外部发布,会有很多Bug.一般只有测试人员使用.Beta:也是测试版,这个阶段的版本会一直加入新的功能.在Alpha版之后推出.RC:(Release Candida ...
- 为什么在实际的 kaggle 比赛中 gbdt 和 random forest 效果非常好?
https://www.zhihu.com/question/51818176/answer/127637712
- 2017SN多校D1T2 note:dp
题意: 给你一个长度为n的字符串s,并且告诉你有m对字母不能相邻,问你最少在s中取出多少个字符能够使这个字符串合法. 题解: 表示状态: dp[i] = max num of letters 考虑到第 ...
- TP框架入门基础
ThinkPHP目录: ThinkPHP主目录文件夹: Conf文件夹: Library文件夹: Library=>Think文件夹:
- 动态IP下群晖搭建DDNS服务
转载地址:https://www.zimrilink.com/share/dsm_aliddns_server.html 通过阿里云API(php)搭建出DDNS动态域名解析服务器;不同的是本文的方法 ...
- Ajax处理后台返回的Json数据
// 处理后台传来的Json字符串装换成Json对象 var dataJson = JSON.parse(data); // 此时可以从Json对象中取值 if(dataJson.result == ...