axios 是什么
- Axios 是一个基于
promise
的 HTTP 库,可以用在浏览器和 node.js 中。前端最流行的ajax
请求库, react/vue
官方都推荐使用axios
发ajax
请求
axios 特点
- 基于
promise
的异步ajax
请求库,支持promise
所有的API - 浏览器端
/node
端都可以使用,浏览器中创建XMLHttpRequests
- 支持请求/响应拦截器
- 支持请求取消
- 可以转换请求数据和响应数据,并对响应回来的内容自动转换成 JSON类型的数据
- 批量发送多个请求
- 安全性更高,客户端支持防御
XSRF
,就是让你的每个请求都带一个从cookie
中拿到的key
, 根据浏览器同源策略,假冒的网站是拿不到你cookie
中得key
的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而采取正确的策略。
axios 常用语法
axios(config)
: 通用/最本质的发任意类型请求的方式axios(url[, config])
: 可以只指定 url 发 get 请求axios.request(config)
: 等同于 axios(config)axios.get(url[, config])
: 发 get 请求axios.delete(url[, config])
: 发 delete 请求axios.post(url[, data, config])
: 发 post 请求axios.put(url[, data, config])
: 发 put 请求axios.defaults.xxx
: 请求的默认全局配置axios.interceptors.request.use()
: 添加请求拦截器axios.interceptors.response.use()
: 添加响应拦截器axios.create([config])
: 创建一个新的 axios(它没有下面的功能)axios.Cancel()
: 用于创建取消请求的错误对象axios.CancelToken()
: 用于创建取消请求的 token 对象axios.isCancel()
: 是否是一个取消请求的错误axios.all(promises)
: 用于批量执行多个异步请求axios.spread()
: 用来指定接收所有成功数据的回调函数的方法
axios为什么既能在浏览器环境运行又能在服务器(node)环境运行?
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
请求模块,实现客户端和服务端程序的兼容。
axios相比原生ajax的优点
ajax的缺点
- 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
- 基于原生的XHR开发,XHR本身的架构不清晰。
- JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
- 不符合关注分离(Separation of Concerns)的原则
- 配置和调用方式非常混乱,而且基于事件的异步模型不友好。
什么是AJAX
- AJAX的全称是Asynchronous JavaScript And XML.,是异步的 JavaScript和XML,可以在无需重新加载整个网页的情况下,更新部分网页内容的技术。是用于创建快速动态网页的技术。
- 依赖于浏览器提供的
XMLHttpRequest
对象,这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新的情况下和服务器进行数据交互。
为什么要用ajax
- 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
- ajax实现页面和 web 服务器之间数据的异步传输。通过异步模式,提升了用户体验
- 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
- Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
ajax的缺点
- ajax不支持浏览器back按钮。
- 安全问题 AJAX暴露了与服务器交互的细节。
- 对搜索引擎的支持比较弱。
- 破坏了程序的异常机制。
- 不容易调试。
AJAX异步请求原理
浏览器把请求交给代理对象—XMLHttpRequest
(绝大多数浏览器都内置了这个对象),由代理对象向服务器发起请求,接收、解析服务器响应的数据,并把数据更新到浏览器指定的控件上。从而实现了页面数据的局部刷新。异步请求使浏览器不用等待服务器处理请求,不用重新加载整个页面来展示服务器响应的数据,在异步请求发送的过程中浏览器还能进行其它的操作。
AJAX异步请求的流程
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
}
}
}
}
请介绍一下XMLhttprequest
对象。
Ajax的核心是JavaScript对象XmlHttpRequest
。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest
使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。通过XMLHttpRequest
对象,Web开发人员可以在页面加载以后进行页面的局部更新。
AJAX最大的特点是什么。
Ajax可以实现动态不刷新(局部刷新)就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。
Ajax包含下列技术:
- 基于web标准(standards-basedpresentation)XHTML+CSS的表示;
- 使用 DOM(Document ObjectModel)进行动态显示及交互;
- 使用 XML 和 XSLT 进行数据交换及相关操作;
- 使用
XMLHttpRequest
进行异步数据查询、检索; - 使用 JavaScript 将所有的东西绑定在一起。
AJAX应用和传统Web应用有什么不同
- 在传统的Javascript编程中,如果想得到服务器端数据库或文件上的信息,或者发送客户端信息到服务器,需要建立一个HTML
form
然后GET
或者POST
数据到服务器端。用户需要点击”Submit”按钮来发送或者接受数据信息,然后等待服务器响应请求,页面重新加载。 - 因为服务器每次都会返回一个新的页面, 所以传统的web应用有可能很慢而且用户交互不友好。
- 使用AJAX技术, 就可以使Javascript通过
XMLHttpRequest
对象直接与服务器进行交互。 - 通过HTTP
Request
,一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面),展示给用户的还是通一个页面,用户感觉页面刷新,也看不到到Javascript后台进行的发送请求和接受响应。
AJAX请求总共有多少种CALLBACK
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException
Ajax和javascript的区别
- javascript是一种在浏览器端执行的脚本语言,Ajax是一种创建交互式网页应用的开发技术,它是利用了一系列相关的技术其中就包括javascript。
- 在一般的web开发中,javascript是在浏览器端执行的,我们可以用javascript控制浏览器的行为和内容。
在Ajax应用中信息是如何在浏览器和服务器之间传递的
通过XML数据或者字符串
在浏览器端如何得到服务器端响应的XML数据。
XMLHttpRequest
对象的responseXMl
属性
XMLHttpRequest
对象在IE和Firefox中创建方式有没有不同
有,IE6以下中通过new ActiveXObject()
得到,Firefox中通过new XMLHttpRequest()
得到
介绍一下XMLHttpRequest
对象的常用方法和属性
open(“method”,”URL”)
建立对服务器的调用,第一个参数是HTTP请求方式可以为GET,POST或任何服务器所支持的您想调用的方式。- 第二个参数是请求页面的URL。
send()
方法,发送具体请求abort()
方法,停止当前请求readyState
属性请求的状态 有5个可取值0=未初始化 ,1=正在加载 2=以加载,3=交互中,4=完成responseText
属性服务器的响应,表示为一个串reponseXML
属性 服务器的响应,表示为XMLstatus
服务器的HTTP状态码,200对应ok 400对应not found
什么是XML
XML是扩展标记语言,能够用一系列简单的标记描述数据
XML的解析方式
- 常用的用
dom
解析和sax解析。dom解析是一次性读取xml
文件并将其构造为DOM
对象供程序使用,优点是操作方便,但是比较耗内存。 - Sax是按事件驱动的方式解析的,占用内存少,但是编程复杂