一 AJAX的简介：
AJAX是“Asynchronous Javascript And XML”（异步JavaScript和XML），通过后台与服务器实现少量的数据交换，可以使页面实现更新。而且是在不加载整个页面的情况下实现网页上某个部分的更新。其本质是在HTTP协议的基础上以异步的方式与服务器通信。
认识什么是异步：
异步是指某段程序执行时不会影响其他程序的执行，其表现形式为程序的执行顺序不依赖于程序本身的书写顺序，否则为同步。
二 AJAX常见应用场景：
AJAX的常见用处有浏览器搜索，如百度关键字检索。还有各个网站的登录，比如京东的登录用户名验证。以及网页上的分页，常见的有百度图片里的瀑布流分页。
三 JavaScript中AJAX的实现方式
总结为四步：
第一：创建AJAX对象
标准模式：XMLHttpRequest
IE6： ActiveXObject("Microsoft.XMLHTTP"); （考虑兼容问题）
//第一步：创建AJAX对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest(); //标准模式
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP") //IE6
}
第二步：连接服务器 xhr.open(请求方式get或post,请求路径,是否异步);
//第二步：连接服务器
//Xhr.open(“GET”,”handler.php?random=”+Math.random()+”&name=张三&age=12”,true);
xhr.open("POST","handler.php",true);
//若是post请求则需要如下设置
var data = "name=张三&pwd=1234565";
//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
第三步：发送请求
发送请求 xhr.send(); //post请求需要传参数。Get请求不用传参数
xhr.send(data); //POST请求若有提交的数据则传
// Xhr.send(null);//get请求不需要传实参
第四步：接收响应的内容 xhr.onreadystatechange 事件（若异步则注册该事件）
if(xhr.readyState==4){ //读取完成（并不是成功）
if(xhr.status==200){ //状态码 代表成功
var data = eval(xhr.responseText)
alert(data[0].name);
}else{ //代表失败
alert("失败")
}
}
补充：
1.用GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
2.xhr.readyState 请求状态
readyState是一个只读属性，用一个整数和对应的常量，表示XMLHttpRequest请求当前所处的状态。
- 0，对应常量UNSENT，表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。
- 1，对应常量OPENED，表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息。
- 2，对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已经收到。
- 3，对应常量LOADING，表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。
- 4，对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了。
xhr.responseText; 服务端返回的内容
3.Xhr.status HTTP状态码
status属性为只读属性，表示本次请求所得到的HTTP状态码，它是一个整数。一般来说，如果通信成功的话，这个状态码是200。
- 200, OK，访问正常
- 301, Moved Permanently，永久移动
- 302, Move temporarily，暂时移动
- 304, Not Modified，未修改
- 307, Temporary Redirect，暂时重定向
- 401, Unauthorized，未授权
- 403, Forbidden，禁止访问
- 404, Not Found，未发现指定网址
- 500, Internal Server Error，服务器发生错误
基本上，只有2xx和304的状态码，表示服务器返回是正常状态。
四 AJAX的封装：
/*
ajax工具库：
method:请求方式，get或post;
url:请求的路径；
isAsync:是否异步请求，true或false
data:发送的请求数据
success:成功时候的要执行的函数。
error:请求失败的时候要执行的函数
*/
function ajax(o){
//第一步：创建AJAX对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest(); //标准模式
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP") //IE6
}
//第二步 和服务器建立连接
if(o.method.toLowerCase()=="get"){ //如果是get请求方式
if(o.data){ //如果有发送数据
o.url= o.url + "?random=" + Math.random() + "&" + urlParmsHandler(o.data);
xhr.open("get",o.url,o.isAsync)
}else{
o.url = o.url + "?random=" + Math.random(); //随机地址，用来更新
xhr.open("get",o.url,o.isAsync)
}
///xhr.open(“get”,,true);
//发送请求
xhr.send();
}else{ //如果是post请求
xhr.open("post",o.url,o.isAsync);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //模拟表单提交
//发送请求
xhr.send(urlParmsHandler(o.data));
}
//是否是异步
if(o.isAsync){
//注册状态监听事件
xhr.onreadystatechange = function(){
responsetHandler();
}
}else{
responsetHandler();
}
/*处理响应*/
function responsetHandler(){
if(xhr.readyState==4){ //读取完成（并不是成功）
if(xhr.status==200){ //状态码 代表成功
o.success(xhr.responseText);
}else{ //代表失败
o.error(xhr.statusText);
}
}
}
}
/*
数据处理工具
*/
function urlParmsHandler(obj){
var arr = []; //定义一个数组存放数据
/*遍历对象的属性和值并添加的数组中*/
for(var key in obj){
//属性名 ： 属性值
arr.push(key + "=" + obj[key]);
}
//将arr数组中的数据用join方法组合成字符串
return arr.join("&");
}
五 JQ使用AJAX：
jQuery Ajax在web应用开发中很常用，它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法，在处理复杂的ajax请求时，jQuery使用jQuery.ajax()方法进行处理。在jQuery中有一些简单的方法，它对jQuery.ajax()方法进行了封装，使得我们在处理一些简单的Ajax事件时，不需要使用jQuery.ajax()方法
以下5个方法执行一般Ajax请求的简短形式：
1.load(url,[data],[callback])
载入远程HTML文件代码并插入至DOM中，默认使用GET方式，传递参数时自动转换为POST方式。
url:要载入的远程url地址
data:发送至服务器的key/value 数据
callback:载入成功时的回调函数
示例代码如下：
|
//无参数、无回调函数 |
2.$.get(url, [data], [callback])
使用get方式从服务器端获取数据。
发送请求的URL地址
要发送给服务器的数据
载入成功时回调函数
示例代码如下：
|
$.get("jqueryget.htm", { "id": this.id }, |
3.使用POST方式来进行异步请求。同$.get()相比，差别在于请求的方式，所以这里不做特别的说明了，使用方法同$.get()相似。
4.$.getScript(url,[callback])
通过 GET 方式请求载入并执行一个JavaScript文件。也是jQuery.ajax的一种简单的使用方法，可以看看ajax加载js，所以在这里也不做特别的说明了。
5.$.getJSON(url,[data],[callback])
通过get方式获取json格式的数据。
6.参数列表：
|
参数名 |
类型 |
描述 |
|
url |
String |
(默认: 当前页地址) 发送请求的地址。 |
|
type |
String |
(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 |
|
timeout |
Number |
设置请求超时时间（毫秒）。此设置将覆盖全局设置。 |
|
async |
Boolean |
(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 |
|
beforeSend |
Function |
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 function (XMLHttpRequest) { this; // the options for this ajax request} |
|
cache |
Boolean |
(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。 |
|
complete |
Function |
请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 function (XMLHttpRequest, textStatus) { this; // the options for this ajax request} |
|
contentType |
String |
(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 |
|
data |
Object, |
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 |
|
dataType |
String |
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值: "xml": 返回 XML 文档，可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
|
|
error |
Function |
(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request} |
|
global |
Boolean |
(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
|
ifModified |
Boolean |
(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。 |
|
processData |
Boolean |
(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。 |
|
success |
Function |
请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request} |
这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的。
|
$.ajax({ |
7.$.ajax()
使用$.ajax()方法获取数据，下边给个常用写法，并做了相应的注释。
|
$.ajax({ |
$.ajax的实际应用例子
|
//1.$.ajax带json数据的异步请求 |
六 HTML5中使用AJAX：
此方法是对原生js中的AJAX的增强，方法更为简洁。主要实现了之前原生的AJAX不能跨域请求的难题，
(function(){
var xhr = new XMLHttpRequest();
xhr.open("POST","02.json");
var form = new FormData();
xhr.send(); //form
xhr.onload = function(){
console.log(xhr.responseText);
}
})()