ajax&axios

341 阅读7分钟

1、什么是AJAX,为什么要使用Ajax(请谈一下你对Ajax的认识)

什么是ajax:

AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。

Ajax包含下列技术:

基于web标准(standards-basedpresentation)XHTML+CSS的表示;

使用 DOM(Document ObjectModel)进行动态显示及交互;

使用 XML 和 XSLT 进行数据交换及相关操作;

使用 XMLHttpRequest 进行异步数据查询、检索;

使用 JavaScript 将所有的东西绑定在一起。

2、为什么要用ajax:

Ajax应用程序的优势在于:

1. 通过异步模式,提升了用户体验

2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用

3. Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。

2、AJAX最大的特点是什么。

Ajax可以实现动态不刷新(局部刷新)

就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。

3、AJAX技术体系的组成部分有哪些。

HTML,css,dom,xml,xmlHttpRequest,javascript

4、AJAX应用和传统Web应用有什么不同。

在传统的Javascript编程中,如果想得到服务器端数据库或文件上的信息,或者发送客户端信息到服务器,需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击”Submit”按钮来发送或者接受数据信息,然后等待服务器响应请求,页面重新加载。

因为服务器每次都会返回一个新的页面, 所以传统的web应用有可能很慢而且用户交互不友好。

使用AJAX技术, 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。

通过HTTP Request, 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面),展示给用户的还是通一个页面,用户感觉页面刷新,也看不到到Javascript后台进行的发送请求和接受响应。

5、AJAX请求总共有多少种CALLBACK。

6、介绍一下XMLHttpRequest对象的常用方法和属性。

open(“method”,”URL”) 建立对服务器的调用,第一个参数是HTTP请求 方式可以为GET,POST或任何服务器所支持的您想调用的方式。

第二个参数是请求页面的URL。

send()方法,发送具体请求

abort()方法,停止当前请求

readyState属性 请求的状态 有5个可取值0=未初始化 ,1=正在加载
2=以加载,3=交互中,4=完成

responseText 属性 服务器的响应,表示为一个串

reponseXML 属性 服务器的响应,表示为XML

status 服务器的HTTP状态码,200对应ok 400对应not found

7、什么是XML

XML是扩展标记语言,能够用一系列简单的标记描述数据

8、AJAX都有哪些优点和缺点?

1、最大的一点是页面无刷新,用户的体验非常好。

2、使用异步方式与服务器通信,具有更加迅速的响应能力。

3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。

ajax的缺点

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。

9、axios的特点有哪些?

一、Axios 是一个基于 promise 的 HTTP 库,支持promise所有的API
二、它可以拦截请求和响应
三、它可以转换请求数据和响应数据,并对响应回来的内容自动转换成 JSON类型的数据
四、安全性更高,客户端支持防御 XSRF

10、axios有哪些常用方法?

一、axios.get(url[, config]) //get请求用于列表和信息查询
二、axios.delete(url[, config]) //删除
三、axios.post(url[, data[, config]]) //post请求用于信息的添加
四、axios.put(url[, data[, config]]) //更新操作

由于axios源码中有很多不是很重要的方法,而且很多方法为了考虑兼容性,并没有考虑到用es6 的语法去写。本篇主要是带你去梳理axios的主要流程,并用es6重写简易版axios

  • 拦截器

  • 适配器

  • 取消请求

拦截器

一个axios实例上有两个拦截器,一个是请求拦截器, 然后响应拦截器。我们下看下官网的用法:

添加拦截器

移除拦截器

其实源码中就是,所有拦截器的执行 所以说肯定有一个forEach方法。

思路理清楚了,现在我们就开始去写吧。代码我就直接发出来,然后我在下面注解。

拦截器这个类我们已经初步实现了,现在我们去实现axios 这个类,还是先看下官方文档,先看用法,再去分析。

axios(config)

Axios 这个类最核心的方法其实还是 request 这个方法。我们先看下实现吧

这里其实就是体现了axios设计的巧妙, 维护一个栈结构 + promise 的链式调用 实现了 拦截器的功能

blog.csdn.net/xgangzai/ar…

11、说下你了解的axios相关配置属性?

url是用于请求的服务器URL

method是创建请求时使用的方法,默认是get

baseURL将自动加在url前面,除非url是一个绝对URL。它可以通过设置一个baseURL便于为axios实例的方法传递相对URL

transformRequest允许在向服务器发送前,修改请求数据,只能用在'PUT','POST'和'PATCH'这几个请求方法

headers是即将被发送的自定义请求头
headers:{'X-Requested-With':'XMLHttpRequest'},

params是即将与请求一起发送的URL参数,必须是一个无格式对象(plainobject)或URLSearchParams对象
params:{
ID:12345
},

auth表示应该使用HTTP基础验证,并提供凭据
这将设置一个Authorization头,覆写掉现有的任意使用headers设置的自定义Authorization
auth:{
username:'janedoe',
password:'s00pers3cret'
},

'proxy'定义代理服务器的主机名称和端口
auth表示HTTP基础验证应当用于连接代理,并提供凭据
这将会设置一个Proxy-Authorization头,覆写掉已有的通过使用header设置的自定义Proxy-Authorization头。
proxy:{
host:'127.0.0.1',
port:9000,
auth::{
username:'mikeymike',
password:'rapunz3l'
}
},

12、api和ajax,fetch API 和 Ajax(XMLHttpRequest)的差异

一、Ajax

Ajax的本质是使用XMLHttpRequest对象来请求数据,下面简单贴下原生js实现:

二、fetch

fetch 是全局量 window 的一个方法,它的主要特点有:
1、第一个参数是URL:
2、第二个是可选参数,可以控制不同配置的 init 对象
3、使用了 JavaScript Promises 来处理结果/回调:

三、fetch规范与jQuery.ajax()主要有两种方式的不同,牢记:

1、从 fetch()返回的 Promise 将不会拒绝HTTP错误状态, 即使响应是一个 HTTP 404 或 500。相反,它会正常解决 (其中ok状态设置为false), 并且仅在网络故障时或任何阻止请求完成时,它才会拒绝。
可以做简单的封装

2、默认情况下, fetch在服务端不会发送或接收任何 cookies, 如果站点依赖于维护一个用户会话,则导致未经认证的请求(要发送 cookies,必须发送凭据头).
这一点也可以做一些处理:
如果想要在同域中自动发送cookie,加上 credentials 的 same-origin 选项

same-origin值使得fetch处理Cookie与XMLHttpRequest类似。 否则,Cookie将不会被发送,导致这些请求不保留认证会话。

对于CORS请求,使用include值允许将凭据发送到其他域:

四、总结

最后fetch采用了Promise的异步处理机制,使用比ajax更加简单,有可能会逐渐代替ajax,对于新技术大家还是要积极探索最好。