什么是AJAX？

AJAX

1. 同步异步
   所谓同步，指当浏览器访问一个新的地址时，在响应之前阻塞当前页面，直到响应回来后，阻塞结束展示结果。
   所谓异步，指当浏览器访问一个新的地址时，浏览器不被阻塞，继续工作，当响应回来后回调处理结果。
   浏览器通常的访问都是同步访问
   但，某些场景下有异步访问的需求，例如，注册时用户名已存在的校验。

2. AJAX
   a. 概述
   AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。
   可以使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，现在传输的数据不仅仅是XML）。
   b. 特点
   异步请求 局部刷新
   c. 应用场景

    百度搜索框
    直播弹幕
    网页qq
   

   …
   d. 原生js实现
   在DHTML中提供了XMLHttpRequest对象，可以用它来实现AJAX。
   i. 获取XMLHttpRequest对象

//1 创建XMLHttpRequest对象
function ajaxFunction(){
var xmlHttp;
try{
//现代浏览器（IE7+、Firefox、Chrome、Safari 和 Opera）都有内建的 XMLHttpRequest 对象
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
//IE6.0
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
//IE5.0及更早版本
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("...");
throw e;
}
}
}
}

ii. 设置回调函数
在ajax执行时，随着执行的过程，xmlHttpRequest对象中的readystate属性会经历如下几个状态的变化

0 : 代表未初始化。 还没有调用 open 方法
1 : 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 : 代表已加载完毕。send 已被调用。请求已经开始
3 : 代表交互中。服务器正在发送响应
4 : 代表完成。响应发送完毕

每次状态值变化都会出发onreadystatechange事件，开发者可以监听此事件，当状态转变为4的时候处理响应结果

var data = null;
var xmlHttp = ajaxFunction();
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200||xmlHttp.status==304){
data = xmlHttp.responseText;
}
}
}

可以通过xmlHttp.status获取服务器返回的状态码
可以通过xmlHttp.responseText获取返回的数据

iii. 发送ajax请求

1. 打开连接

    xmlHttp.open(method,url,asynch);
   

method：请求类型，类似"GET"或"POST"的字符串。
url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
asynch：表示请求是否要异步传输，默认值为true(异步)。

2. 设置请求头

    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   

3. 发送请求
   a. GET请求

    xmlHttp.send(null);
   

send方法参数为http请求的实体内容
GET请求没有实体内容，传入null即可

b. POST请求

xmlHttp.send("a=7&b=8");

send方法参数为http请求的实体内容
传入要传输的请求参数即可。
POST方式传输请求参数，必须设置头Content-Type为application/x-www-form-urlencoded

e. jquery实现AJAX
i. $.ajax(url, [data], [async], [callback]);

url -- 发送请求的URL地址
data -- 可选, 发送至服务器的key/value数据
async -- 可选, 默认为true, 表示异步交互
type -- 请求方式 , 默认为"GET"。
success -- 可选, 请求成功后执行的函数, 函数参数:
result -- 服务器返回的数据

ii. $(selector).load(url,data,callback);

selector -- 选择器, 将从服务器获取到的数据加载到指定的元素中
url -- 发送请求的URL地址
data -- 可选, 向服务器发送的数据 key/value数据
callback -- 可选, load方法完成后所执行的函数

iii. $.get(url[, data][, callback][, type]);
$.post(url[, data][, callback][, type]);