前言
对于WEB应用程序：用户浏览器发送请求，服务器接收并处理请求，然后返回结果，往往返回就是字符串（HTML），浏览器将字符串（HTML）渲染并显示浏览器上。
而在传统的Web应用中，一个简单操作需要重新加载全局数据；
而AJAX就改变了这种方式
什么是AJAX？
AJAX，Asynchronous JavaScript and XML (异步的JavaScript和XML)，一种创建交互式网页应用的网页开发技术方案，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
异步的JavaScript：使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求，当服务端处理完请求之后，【自动执行某个JavaScript的回调函数】。
XML：XML是一种标记语言，是Ajax在和后台交互时传输数据的格式之一
AJAX的工作原理
AJAX是基于现有的Internet标准，并且联合使用它们：
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)
AJAX的应用场景
注册时，自动检测用户是否已经存在；登录时，提示用户名密码错误原因等等
XmlHttpRequest对象
关于XMLHttpRequest
XMLHttpRequest 是 AJAX 的基础。
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象，老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
XHR-服务器请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();
XmlHttpRequest对象的主要方法介绍：
open(String method,String url,Boolen async) # 用于创建请求 参数： method： 请求方式（字符串类型），如：POST、GET、DELETE... url： 要请求的地址（字符串类型） async： 是否异步（布尔类型） send(String body) # 仅用于POST发送请求 参数： body： 要发送的数据（字符串类型） setRequestHeader(String header,String value) # 用于设置请求头 参数： header： 请求头的key（字符串类型） vlaue： 请求头的value（字符串类型） getAllResponseHeaders() # 获取所有响应头 返回值： 响应头数据（字符串类型） getResponseHeader(String header) #获取响应头中指定header的值 参数： header： 响应头的key（字符串类型） 返回值： 响应头中指定的header对应的值 abort() #终止请求
GET和POST的区别：
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
在以下情况中，使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
XHR-服务器响应
如果需要获得来自服务器的响应，那就使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText # 获得字符串形式的响应数据。 responseXML # 获得 XML 形式的响应数据。
举个栗子：
# responseText document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务；每当 readyState 改变时，就会触发 onreadystatechange 事件；readyState 属性存有 XMLHttpRequest 的状态信息。
onreadystatechange # 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 readyState # 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 status 200: "OK" 404: 未找到页面
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
实例：
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数，若上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
function myFunction() { loadXMLDoc("ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); }
简单的AJAX实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send('wdadawd');
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
你成功的修改了文本的内容
JQuery Ajax
JQuery其实就是一个JavaScript的类库，其将复杂的功能做了上层封装，使得开发者可以在其基础上写更少的代码实现更多的功能。
JQuery Ajax本质 XMLHttpRequest 或 ActiveXObject ；
jQuery.get(...) 所有参数： url: 待载入页面的URL地址 data: 待发送 Key/value 参数。 success: 载入成功时回调函数。 dataType: 返回内容格式，xml, json, script, text, html jQuery.post(...) 所有参数： url: 待载入页面的URL地址 data: 待发送 Key/value 参数 success: 载入成功时回调函数 dataType: 返回内容格式，xml, json, script, text, html jQuery.getJSON(...) 所有参数： url: 待载入页面的URL地址 data: 待发送 Key/value 参数。 success: 载入成功时回调函数。 jQuery.getScript(...) 所有参数： url: 待载入页面的URL地址 data: 待发送 Key/value 参数。 success: 载入成功时回调函数。 jQuery.ajax(...) 部分参数： url：请求地址 type：请求方式，GET、POST（1.9.0之后用method） headers：请求头 data：要发送的数据 contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8") async：是否异步 timeout：设置请求超时时间（毫秒） beforeSend：发送请求前执行的函数(全局) complete：完成之后执行的回调函数(全局) success：成功之后执行的回调函数(全局) error：失败之后执行的回调函数(全局) accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型 dataType：将服务器端返回的数据转换成指定类型 "xml": 将服务器端返回的内容转换成xml格式 "text": 将服务器端返回的内容转换成普通文本格式 "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。 "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式 "json": 将服务器端返回的内容转换成相应的JavaScript对象 "jsonp": JSONP 格式 使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数 如果不指定，jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string converters： 转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数 $.ajax({ accepts: { mycustomtype: 'application/x-some-custom-type' }, // Expect a `mycustomtype` back from server dataType: 'mycustomtype' // Instructions for how to deserialize a `mycustomtype` converters: { 'text mycustomtype': function(result) { // Do Stuff return newresult; } }, }); jQuery Ajax 方法列表
跨域Ajax
由于浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。
由于同源策略是浏览器的限制，所以请求的发送和响应是可以进行，只不过浏览器不接受罢了。
跨域，跨域名访问，如：http://www.a.com 域名向 http://www.b.com域名发送请求。
1、JSONP实现跨域请求
JSONP（JONP - JSON with Padding是JSON的一种“使用模式”)，利用script标签的src属性（浏览器允许script标签跨域）
2、CORS
随着技术的发展，现在的浏览器可以支持主动设置从而允许跨域请求，即：跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器允许跨域请求。