1.ajax 是什么：
AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest对象与服务器通信。 它可以使用JSON，XML，HTML和文本等多种格式发送和接收。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，更新页面。
你可以使用AJAX最主要的两个特性做下列事：
- 在不重新加载页面的情况下发送请求给服务器。
- 接受并使用从服务器发来的数据。
2.原生js ajax请求步骤:
Step 1 – 怎样发送http请求
var httpAjax = new XMLHttpRequest();
//规定请求的类型、URL 以及是否异步处理请求。
ajax.open('GET',url,true);
注意：
a.open() 的第一个参数是HTTP请求方法 - 有GET，POST，HEAD以及服务器支持的其他方法。 保证这些方法一定要是大写字母，否则其他一些浏览器（比如FireFox）可能无法处理这个请求。
b.第三个参数是可选的，用于设置请求是否是异步的。如果设为 true (默认设置)，JavaScript执行会持续，并且在服务器还没有响应的情况下与页面进行交互
c.如果你使用 POST 数据，那就需要设置请求的MIME类型。比如，在调用 send() 方法获取表单数据前要有下面这个：
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Step 2 – 处理服务器响应
//接受服务器响应数据
在发送请求时，你提供的JavaScript函数名负责处理响应：
httpRequest.onreadystatechange = nameOfTheFunction;
这个函数应该做什么？首先，函数要检查请求的状态。如果状态的值是 XMLHttpRequest.DONE （对应的值是4），意味着服务器响应收到了并且是没问题的，然后就可以继续执行。
if (httpRequest.readyState === XMLHttpRequest.DONE) {
// Everything is good, the response was received.
} else {
// Not ready yet.
}
全部readyState状态值都在 XMLHTTPRequest.readyState，如下也是：
- 0 (未初始化) or (请求还未初始化)
- 1 (正在加载) or (已建立服务器链接)
- 2 (加载成功) or (请求已接受)
- 3 (交互) or (正在处理请求)
- 4 (完成) or (请求已完成并且响应已准备好)
Step 3 – 业务处理逻辑
通过检查响应码 200 OK 区别对待成功和不成功的AJAX调用。
其余状态码详细参考：http://www.runoob.com/http/http-status-codes.html
if (httpRequest.status === 200) {
// Perfect!
} else {
// There was a problem with the request.
// For example, the response may have a 404 (Not Found)
// or 500 (Internal Server Error) response code.
}
在检查完请求状态和HTTP响应码后， 你就可以用服务器返回的数据做任何你想做的了。你有两个方法去访问这些数据：
- httpRequest.responseText – 服务器以文本字符的形式返回
- httpRequest.responseXML – 以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理
3.跨域问题：
a.什么是跨域？
不同源会造成跨域,哪些是不同源：
a.跨域解决方案？
JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。
JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。
JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
动态创建<script>标签，设置其src，回调函数在src中设置：
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来来操作数据。
function handleResponse(response){ // 对response数据进行操作代码 }
了解了JSONP的基本使用方法，我们在实现上面通过ajax调用豆瓣接口的需求，实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP实现跨域2</title>
</head>
<body>
<div id="mydiv">
<button id="btn">点击</button>
</div>
</body>
<script type="text/javascript">
function handleResponse(response){
console.log(response);
}
</script>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
};
};
</script>
</html>
在控制台，我们可以查看到返回的response数据格式为JSON对象格式的，具体需要取出哪些参数，可以根据自己的需要：
JSONP目前还是比较流行的跨域方式，虽然JSONP使用起来方便，但是也存在一些问题：
首先， JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃 JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的 Web 服务时，一定得保证它安全可靠。
其次，要确定 JSONP 请求是否失败并不容易。虽然 HTML5 给<script>元素新增了一个 onerror事件处理程序，但目前还没有得到任何浏览器支持。为此，开发人员不得不使用计时器检测指定时间内是否接收到了响应。
b:CORS：跨域资源共享
- 原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求
- 限制：浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上
需要后台设置
Access-Control-Allow-Origin: * //允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com //只允许所有域名访问
c:代理，让跨域变成同域 比如nginx
使用Nginx作为反向代理服务器。在使用Nginx作为代理服务器，并在配置中对应的location下添加上如下的设置：
- add_header 'Access-Control-Allow-Origin' '*';
- add_header 'Access-Control-Allow-Credentials' 'true';
通过这两个配置，前端就可以跨域访问数据接口了
