axios学习笔记（二）：轻松弄懂XHR的使用及如何封装简易axios

使用 XMLHttpRequest（XHR）对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。在 AJAX 编程中，XMLHttpRequest 被大量使用。

文章目录

1. 理解XHR
区别一般http请求与ajax请求
3. API
4. XHR的ajax封装，也算是简单版的axios
- 4.1 特点
- 4.2 简单版的axios源码

1. 理解XHR

使用XMLHttpRequest(XHR)对象可以与服务器交互，也就是发送ajax请求
前端可以获取到数据，而无需让整个页面刷新
这使得Web页面可以只更新页面的局部，而不影响用户的操作

区别一般http请求与ajax请求

ajax请求是一种特别的http请求
对服务器端来说，没有任何区别，区别在浏览器端
浏览器端发请求：只有XHR或fetch发出的才是ajax请求，其他的所有请求都是非ajax请求
浏览器端接收到响应
(1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面

(2) ajax 请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数

3. API

XMLHttpRequest():创建XHR对象的构造函数
status: 响应状态码值，比如200，404
statusText: 响应状态文本

readyState: 标识请求状态的只读属性

                0: 初始<br />                  1: open()之后<br />                  2: send()之后<br />                  3: 请求中<br />                        4: 请求完成

onreadystatechange: 绑定readyState改变监听
responseType: 指定相应数据，如果是’json’,得到响应后自动解析响应体数据
response: 响应体数据，类型取决于responseType的指定
timeout: 指定请求超时时间，默认为0代表没限制
ontimeout: 绑定超时的监听
onerror: 绑定请求网络错误的监听
open(): 初始化一个请求, 参数为: (method, url[, async])
send(data): 发送请求
abort(): 中断请求
getResponseHeader(name): 获取指定名称的响应头值
getAllResponseHeaders(): 获取所有响应头组成的字符串
16. setRequestHeader(name, value): 设置请求头

4. XHR的ajax封装，也算是简单版的axios

4.1 特点

函数的返回值promise,成功的结果为response,异常的结果为error
能处理多种类型的请求：GET/POST/PUT/DELETE
函数的参数为一个配置对象

{url: '', // 请求地址method: '', // 请求方式 GET/POST/PUT/DELETE params: {}, // GET/DELETE 请求的 query 参数 data: {}, // POST 或 DELETE 请求的请求体参数
}

响应json数据自动解析为js的对象/数组

4.2 简单版的axios源码

   function axios({url,method='GET',params={},data={}}) {// 返回一个promise对象return new Promise((resolve, reject) => {// 处理method(转大写)method = method.toUpperCase()// 处理query参数(拼接到url上)   id=1&xxx=abc/* {id: 1,xxx: 'abc'}*/let queryString = ''Object.keys(params).forEach(key => {queryString += `${key}=${params[key]}&`})if (queryString) { // id=1&xxx=abc&// 去除最后的&queryString = queryString.substring(0, queryString.length-1)// 接到urlurl += '?' + queryString}// 1. 执行异步ajax请求// 创建xhr对象const request = new XMLHttpRequest()// 打开连接(初始化请求, 没有请求)request.open(method, url, true)// 发送请求if (method==='GET' || method==='DELETE') {request.send()} else if (method==='POST' || method==='PUT'){request.setRequestHeader('Content-Type', 'application/json;charset=utf-8') // 告诉服务器请求体的格式是jsonrequest.send(JSON.stringify(data)) // 发送json格式请求体参数}// 绑定状态改变的监听request.onreadystatechange = function () {// 如果请求没有完成, 直接结束if (request.readyState!==4) {return}// 如果响应状态码在[200, 300)之间代表成功, 否则失败const {status, statusText} = request// 2.1. 如果请求成功了, 调用resolve()if (status>=200 && status<=299) {// 准备结果数据对象responseconst response = {data: JSON.parse(request.response),status,statusText}resolve(response)} else { // 2.2. 如果请求失败了, 调用reject()reject(new Error('request error status is ' + status))}}})}

axios学习笔记（二）：轻松弄懂XHR的使用及如何封装简易axios相关推荐

电脑自动关机是什么原因？为什么电脑会自动关机？轻松弄懂
电脑作为很多小伙伴学习.办公.娱乐的工具.在生活中已然是不可或缺的一部分,很多小伙伴在使用电脑的过程中,有时会碰到电脑自动关机的情况.电脑自动关机是什么原因?为什么电脑会自动关机?别担心,今天小编这篇 ...
qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）
原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7851 ...
[转载]dorado学习笔记(二)
原文地址:dorado学习笔记(二)作者:傻掛 ·isFirst, isLast在什么情况下使用?在遍历dataset的时候会用到 ·dorado执行的顺序,首先由jsp发送请求,调用相关的ViewM ...
PyTorch学习笔记(二)——回归
PyTorch学习笔记(二)--回归本文主要是用PyTorch来实现一个简单的回归任务. 编辑器:spyder 1.引入相应的包及生成伪数据 import torch import torch.nn ...
tensorflow学习笔记二——建立一个简单的神经网络拟合二次函数
tensorflow学习笔记二--建立一个简单的神经网络 2016-09-23 16:04 2973人阅读评论(2) 收藏举报分类: tensorflow(4) 目录(?)[+] 本笔记目的 ...
Scapy学习笔记二
Scapy学习笔记二 Scapy Sniffer的用法: http://blog.csdn.net/qwertyupoiuytr/article/details/54670489 Scapy Snif ...
Ethernet/IP 学习笔记二
Ethernet/IP 学习笔记二原文链接:http://wiki.mbalib.com/wiki/Ethernet/IP 1.通信模式不同于源/目的通信模式,EtherNet/IP 采用生产/消 ...
Java学习笔记二：数据类型
Java学习笔记二:数据类型 1. 整型:没有小数部分,允许为负数,Java整型分4种:int short long byte 1.1 Int最为常用,一个Int类型变量在内存中占用4个字节,取值范围 ...
吴恩达《机器学习》学习笔记二——单变量线性回归
吴恩达<机器学习>学习笔记二--单变量线性回归一. 模型描述二. 代价函数 1.代价函数和目标函数的引出 2.代价函数的理解(单变量) 3.代价函数的理解(两个参数) 三. 梯度下降- ...

axios学习笔记（二）：轻松弄懂XHR的使用及如何封装简易axios

文章目录

1. 理解XHR

区别一般http请求与ajax请求

3. API

4. XHR的ajax封装，也算是简单版的axios

4.1 特点

4.2 简单版的axios源码

axios学习笔记（二）：轻松弄懂XHR的使用及如何封装简易axios相关推荐

最新文章

热门文章