一、概念
AJAX全称Asynchronous JavaScript and XML，即异步的 JavaScript 和 XML。不是新的编程语言，而是一种使用现有标准的新方法。在不重新加载整个页面的情况下，AJAX 可以与服务器交换数据并更新部分网页。
总而言之，AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。可以通过在后台与服务器进行少量数据交换，使网页实现异步更新。
二、XMLHttpRequest
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
1、原生js ajax请求流程
//1、创建 XMLHttpRequest 对象 var ajax = new XMLHttpRequest(); //2、规定请求的类型、URL 以及是否异步处理请求。 ajax.open('GET',url,true); //3、发送信息至服务器时内容编码类型 ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //4、发送请求 ajax.send(null); //5、接受服务器响应数据 ajax.onreadystatechange = function () { if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) { } };
我们来看下XHR内部API
| 方法 | 描述 |
|---|---|
|
void open(String method,String url,Boolen async) |
用于创建请求，规定请求的类型、URL 以及是否异步处理请求。
|
|
void send(String body) |
用于将请求发送到服务器。
|
|
void setRequestHeader(String header,String value) |
用于向请求添加 HTTP 头。
|
|
String getAllResponseHeaders() |
获取所有响应头
|
|
String getResponseHeader(String header) |
获取响应头中指定header的值
|
|
void abort() |
终止请求 |
XHR的主要属性有
| 属性 | 描述 |
|
Number readyState |
状态值（整数），可以确定请求/响应过程的当前活动阶段
|
| Function onreadystatechange | 当readyState的值改变时自动触发执行其对应的函数（回调函数） |
|
String responseText |
作为响应主体被返回的文本（字符串类型） |
|
XmlDocument responseXML |
服务器返回的数据（Xml对象） |
|
Number states |
状态码（整数），如：200、404... |
|
String statesText |
状态文本（字符串），如：OK、NotFound... |
Js中XHR示例：
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject），因为老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象，所以在创建XHR对象时要兼容，如下：
var xhr; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xhr=new XMLHttpRequest(); } else {// code for IE6, IE5 xhr=new ActiveXObject("Microsoft.XMLHTTP"); }
创建XHR对象后，接着要调用一个初始化方法open()，如下：
// 指定连接方式、请求地址和异步请求 xhr.open('get', "/test/", true);
调用open()方法并不会真正发送请求，而只是启动一个请求准备发送。要真正发送请求要使用send()方法，send()方法接受一个参数，即要作为请求主体发送的数据，如果不需要通过请求主体发送数据，我们必须传递一个null值。在调用send()之后，请求就会被分派到服务器，代码如下：
//发送请求
xhr.send('n1=1;n2=2;');
在发送异步请求后，那么在请求过程中javascript代码会继续执行，这时可以通过readyState属性判断请求的状态，当readyState = 4时，表示收到全部响应数据，属性值的定义如下：
// 定义回调函数 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ // 已经接收到全部响应数据，执行以下操作 var data = xhr.responseText; console.log(data); } };
完整的示例代码如下：
function XmlPostRequest(){ var xhr; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xhr=new XMLHttpRequest(); } else {// code for IE6, IE5 xhr=new ActiveXObject("Microsoft.XMLHTTP"); } // 定义回调函数 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ // 已经接收到全部响应数据，执行以下操作 var data = xhr.responseText; console.log(data); } }; // 指定连接方式、请求地址和异步请求 xhr.open('POST', "/test/", true); // 设置请求头 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); // 发送请求 xhr.send('n1=1;n2=2;'); }
三、jquery ajax
jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject 。如果没有 jQuery，AJAX 编程还是有些难度的。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
| 函数 | 描述 |
|---|---|
| jQuery.ajax() | 执行异步 HTTP (Ajax) 请求。 |
| .ajaxComplete() | 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
| .ajaxError() | 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。 |
| .ajaxSend() | 在 Ajax 请求发送之前显示一条消息。 |
| jQuery.ajaxSetup() | 设置将来的 Ajax 请求的默认值。 |
| .ajaxStart() | 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。 |
| .ajaxStop() | 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
| .ajaxSuccess() | 当 Ajax 请求成功完成时显示一条消息。 |
| jQuery.get() | 使用 HTTP GET 请求从服务器加载数据。 |
| jQuery.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码数据。 |
| jQuery.getScript() | 使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。 |
| .load() | 从服务器加载数据，然后把返回到 HTML 放入匹配元素。 |
| jQuery.param() | 创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。 |
| jQuery.post() | 使用 HTTP POST 请求从服务器加载数据。 |
| .serialize() | 将表单内容序列化为字符串。 |
| .serializeArray() | 序列化表单元素，返回 JSON 数据结构数据。 |
四、跨域ajax
1、什么是同源策略？
XMLHttpRequest会遵守同源策略(same-origin policy)，即脚本只能访问相同协议/相同主机名/相同端口的资源。
2、为什么要遵守同源策略？
设置同源策略的主要目的是为了安全，如果没有同源限制，在浏览器中的cookie等其他数据可以任意读取，不同域下的DOM任意操作，ajax任意请求其他网站的数据，包括隐私数据。需要注意的是浏览器同源策略并不是对所有的请求均制约：
- 制约： XmlHttpRequest
- 不制约： img、iframe、script等具有src属性的标签
3、JSONP实现跨域请求
原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
步骤：
- 去创建一个script标签
- script的src属性设置接口地址
- 接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
- 通过定义函数名去接收后台返回数据
前端代码：
//去创建一个script标签
var script = document.createElement("script");
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据
function jsonpCallback(data){
//注意 jsonp返回的数据是json对象可以直接使用
//ajax 取得数据是json字符串需要转换成json对象才可以使用。
}
4、CORS：跨域资源共享
原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求
限制：浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上
需要后台设置 Access-Control-Allow-Origin: * //允许所有域名访问 Access-Control-Allow-Origin: http://a.com //只允许a.com域名访问
扩展了解HTTP OPTIONS跨域请求