什么是 AJAX ？
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
同步请求：返回的是整张页面，会刷新整个页面，他是串行的过程，只能同时做一件事。
异步请求：返回的是字符串（页面的部分信息），不会刷新整个页面，不会阻塞当前主线程。
AJAX通过核心对象XMLHttpRequest在后台发起子线程，该子线程负责此次的请求，会请求服务器，服务器会返回一个字符串，该字符串会封装在XMLHttpRequest里的responseText属性中，然后请求返回客户端，可通过xhr.responseText获取服务器返回的字符串，然后通过DOM技术修改DOM树。由于是子线程在发起请求，所以不会阻塞当前显示页面的主线程，即异步请求。由于返回的是字符串且是通过DOM技术在修改DOM树，所以不会刷新整张页面，即局部刷新，这就是我们所说的AJAX异步请求，局部刷新。
应用场景：需要请求服务器，但只需要更新局部页面信息时。
AJAX的开发流程
1、创建核心对象xhr(不同浏览器创建此对象的方式不同)
var xhr;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr=new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2、初始化xh---->目的：告知xhr以什么方式发送，发送到什么位置且携带什么参数。
get方式：xhr.open(“get”,url?传递参数);
post方式：xhr.open(“post”,url);，
若需要传递参数则需指定参数格式
xhr.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
3、发送异步请求
get方式：xhr.send();
post方式：若无参数xhr.send();
若需要传递参数，则xhr.send(“需要传递给服务器的参数”);
注：从请求发出到请求返回，xhr.readyState的属性（标识xhr的请求状态）会经历以下几个阶段的变化：
=0，表示初始化但并没有发送异步请求
=1，表示已发送异步请求
=2，表示已发送完毕
=3，表示开始返回
=4，表示返回完毕
4、设置监听，通过xhr.onreadystatechange属性
注：xhr.status为协议码，表示请求的状态（例：404,500），当其为200时，表示请求成功
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){//返回完整，请求成功
var res = xhr.responseText;//获取返回值
//拿到返回值后可对dom操作，局部刷新页面
}
}
代码：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body οnlοad="load()">
</body>
<script type="text/javascript">
function load(){
//1.创建核心对象xhr
var xhr;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr=new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.初始化xhr
xhr.open("GET","index.html");
//3.发送异步请求
xhr.send();
//4.设置监听
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){//返回完整，请求成功
var res = xhr.responseText;//获取返回值
//拿到返回值后可对dom操作，局部刷新页面
alert(res);
}
}
}
</script>
</html>
演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table id="testTable">
<tr>
<td>中国</td>
<td>秦国</td>
</tr>
</table>
<input type="button" value="异步刷新用户列表" οnclick="testAjax()"/>
</body>
<script src="jquery.1.9.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
function testAjax(){
$.ajax({
type:"get", //发送请求的方式，默认请求方式为get
url:"/Jquery/jason.txt", //发送到什么位置
success:function(res){//会在返回完整，请求成功时调用，其中的参数是返回值
for(var i=0;i<res.length;i++){
$("#testTable").append("<tr><td>"+res[i].id+"</td><td>"+res[i].name+"</td></tr>");
}
},
dataType:"json"
});
}
</script>
</html>