[TOC]
# 题1、什么是 Ajax？干什么用的？
答： Ajax （Asynchronous Javascript And XML）
翻译： 异步的 Javascript 和 XML。
用途：Javascript 这门语言来和其他计算机进行数据通信的技术。
俗称：调用服务器接口用的。
# 题2、JS 如何实现 Ajax？
答： 三种方法：
1. 使用 JS 原生的 Ajax 技术
2. 使用 jQuery 中封装好的 $.ajax 技术
3. 使用基于 Promise 的 axios 包， 使用这个包的好处是已经将Ajax都封装成 Promise 对象
# 题3、使用 JS 实现原生 Ajax 的流程？
答： 流程：
1. 创建 `XMLHttpRequest` 对象 （`浏览器` 中有一个XMLHttpRequest 对象，使用它来执行 Ajax的）
2. 配置这个对象： 提交地址、回调函数等
3. 发送请求
4. 根据请求的状态来执行不同的操作
代码演示：JS 执行原生 AJAX
~~~
// 1. 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest()
// 2. 设置回调函数，用来监听 AJAX 的状态变化
xhr.onreadystatechange = function() {
// 2.1. 根据不同的状态做不同的处理
// 判断是否连接服务器成功并且服务器返回状态码为 200
if(xhr.readyState == 4 && xhr.status == 200) {
// 2.2. 打印返回值
console.log( xhr.responseText )
}
}
// 3. 设置请求方式及请求地址
xhr.open('GET', 'http://xxxxx')
// 4. 发送请求
xhr.send()
~~~
# 题4、如何将原生的 AJAX 封装成 Promise 对象来使用？流程是什么？
答：首先创建一个函数，在函数中创建一个 Promise 对象并返回，在 Promise 对象中放一个回调函数，这个回调函数上有两个参数，第一个参数是在成功时调用设置返回的信息，第二个参数是在失败时调用设置失败信息。将异步代码放到这个回调函数中，然后判断如果异步代码执行成功就调用 Promise 的第一个参数的函数来设置返回值，如果异步失败就调用第二个参数的函数来设置失败信息。
代码演示：
~~~
// 封装一个发送 get 请求的函数
// 参数：请求地址
// 返回：Promise 对象
const xhr = new XMLHttpRequest()
function get(url) {
// 参数一、ok：函数，成功时设置返回值
// 参数二、err：函数，失败时设置失败的信息
return new Promise(function (ok, err) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
ok(xhr.responseText)
} else {
err("连接失败")
}
}
xhr.open('GET', url)
xhr.send()
})
}
// 用法一、ES6
get('http://xxxxxx').then(res => {
console.log(res.data)
})
// 用法二、ES8
async function getData() {
let { data } = await get('http://xxxxxx')
console.log(data)
}
getData()
~~~
# 题5、 什么是 Ajax 跨域？怎么解决？
答：出于安全考虑，浏览器会限制 Ajax 不允许跨域请求服务器。
什么情况出现跨域？
情况一、端口号不同 ： [http://localhost:9000](http://localhost:9000/) 和 [http://localhost:8000](http://localhost:8000/) 情况二、域名不同 ：[http://www.badiu.com](http://www.badiu.com/) 和 [http://www.jd.com](http://www.jd.com/)
3 种解决方法：
1. jsonp
优点：没有浏览器的限制（支持低端的 IE 浏览器）
缺点：只能发送 GET 请求
2. CORS （跨站资源共享）
优点： 由后端完成，前端完全不用写代码，支持各种请求（GET、POST、PUT、DELETE等）
缺点： 低端浏览器不支持 IE
3. 服务器代理
优点：没有任何限制
缺点：需要再写个代理服务器的程序
