[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:8000
情况二、域名不同 ：http://www.badiu.com 和 http://www.jd.com
解决办法有 3 种：
1. jsonp
优点：没有浏览器的限制（低端的 IE 也支持）
缺点：只能发送 GET 请求
2. CORS（跨站资源共享）
优点：由后端完成，前端完全不用改代码，支持各种请求（GET、POST、PUT、DELETE等）
缺点：低端IE不支持
3. 服务器代理
优点：没有任何限制
缺点：需要再写个代理服务器的程序
