1. Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。前端最流行的 ajax 请求库, 2. react/vue 官方都推荐使用 axios 发 ajax 请求
1. 基于 promise 的异步 ajax 请求库,支持promise所有的API 2. 浏览器端/node 端都可以使用,浏览器中创建XMLHttpRequests 3. 支持请求/响应拦截器 4. 支持请求取消 5. 可以转换请求数据和响应数据,并对响应回来的内容自动转换成 JSON类型的数据 6. 批量发送多个请求 7. 安全性更高,客户端支持防御 XSRF,就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而采取正确的策略。
axios在浏览器端使用XMLHttpRequest
对象发送ajax请求;在node环境使用http
对象发送ajax请求。
var defaults.adapter = getDefaultAdapter();
function getDefaultAdapter () {
var adapter;
if (typeof XMLHttpRequest !== 'undefined') {
// 浏览器环境
adapter = require('./adapter/xhr');
} else if (typeof process !== 'undefined') {
// node环境
adapter = require('./adapter/http');
}
return adapter;
}
上面几行代码,可以看出:XMLHttpRequest 是一个 API,它为客户端提供了在客户端和服务器之间传输数据的功能;process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程。原来作者是通过判断XMLHttpRequest和process这两个全局变量来判断程序的运行环境的,从而在不同的环境提供不同的http请求模块,实现客户端和服务端程序的兼容。
ajax的缺点
浏览器把请求交给代理对象—XMLHttpRequest(绝大多数浏览器都内置了这个对象),由代理对象向服务器发起请求,接收、解析服务器响应的数据,并把数据更新到浏览器指定的控件上。从而实现了页面数据的局部刷新。异步请求使浏览器不用等待服务器处理请求,不用重新加载整个页面来展示服务器响应的数据,在异步请求发送的过程中浏览器还能进行其它的操作。
function xhrAjax({
url,
method = 'GET',
params = {},
data = {}
}) {
// 执行异步ajax请求
// 第一步,创建对象
const xhr = new XMLHttpRequest()
// 第二步,配置请求信息,参数一是请求的类型,参数二是请求的url,
xhr.open(method, url, true)
// 发送请求
if (method === 'GET' || method === 'DELETE') {
// 第三步,发送请求
xhr.send()
} else if (method === 'POST' || method === 'PUT') {
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
xhr.send('pageIndex=1&pageSize=5') // 发送json格式请求体参数
// 告诉服务器请求体的格式是json
// xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
// xhr.send(JSON.stringify(data)) // 发送json格式请求体参数
}
// 第四步,绑定状态改变的监听
xhr.onreadystatechange = function () {
// 如果请求没有完成, 直接结束
if (xhr.readyState !== 4) {
return
}
// 如果响应状态码在[200, 300)之间代表成功, 否则失败
const {status, statusText} = xhr
// 第五步,获取返回的数据
if (status >= 200 && status <= 299) { // 如果请求成功了, 调用resolve()
// 准备结果数据对象response
const response = {
data: JSON.parse(xhr.response),
status,
statusText
}
}
}
}
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新。
Ajax可以实现动态不刷新(局部刷新)就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。
通过XML数据或者字符串
XMLHttpRequest对象的responseXMl属性
有,IE6以下中通过new ActiveXObject()得到,Firefox中通过newXMLHttpRequest()得到
XML是扩展标记语言,能够用一系列简单的标记描述数据