构造器

  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. "静态方法里仅仅能调用静态变量和静态方法"具体解释

    静态方法里能够调用静态方法和静态变量,同一时候也能调用非静态方法和非静态变量. public class Test { public Test() {}; public Test(int i) {th ...

  2. 简单通俗解释内外网IP与端口映射

    IP:分为外网IP和内网IP 也就是我们说的外网IP属于实体IP 实体IP,它是独一无二的,在网络的世界里,每一部计算机的都有他的位置,一个 IP 就好似一个门牌!例如,你要去百度的网站的话,就要去『 ...

  3. html5实现进度条功能效果非常和谐

    1. [图片] html5.jpg ​2. [代码][HTML]代码  <script type="text/javascript">    var i = 0;    ...

  4. legend2---开发日志15(功能需求明确,设计好类和结构的好处是)

    legend2---开发日志15(功能需求明确,设计好类和结构的好处是) 一.总结 一句话总结: 极快简化编程,节约大量时间 1.多个类型的物品,比如商店和寻宝的丹药,装备,特性书,英雄石等等 应该怎 ...

  5. 线程池ThreadPool的常用方法介绍

    线程池ThreadPool的常用方法介绍 如果您理解了线程池目的及优点后,让我们温故下线程池的常用的几个方法: 1. public static Boolean QueueUserWorkItem(W ...

  6. 使用js获取当前页面的url网址信息。

    1.设置或获取整个 URL 为字符串: window.location.href 2.设置或获取与 URL 关联的端口号码: window.location.port 3.设置或获取 URL 的协议部 ...

  7. Workerman安装流程

    第一步检测安装环境 curl -Ss http://www.workerman.net/check.php | php 操作结果显示 报错了  需要找到php.ini文件 解决办法如下: 打开 php ...

  8. Dat.gui 使用教程

    官方站点:http://workshop.chromeexperiments.com/examples/gui/ Dat.gui 使用教程:Dat.gui 是一个 GUI 组件,他可以为你的 demo ...

  9. linux命令学习笔记(54):ping命令

    Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说“ping一下某机器, 看是不是开着”.不能打开网页时会说“你先ping网关地址192.168.1.1试试” ...

  10. 「NOIP2013」「LuoguP1967」货车运输(最大生成树 倍增 LCA

    题目描述 AA国有nn座城市,编号从 11到nn,城市之间有 mm 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 qq 辆货车在运输货物, 司机们想知道每辆车在不超过车辆限重的情况下,最 ...