前言：
Ajax是Asynchronous JavaScript and XML的缩写，其核心是通过XMLHttpRequest对象，以一种异步的方式，向服务器发送数据请求，并通过该对象接收请求返回的数据，从而完成人机交互的数据操作。在jQuery中，有大量的函数和方法为Ajax技术提供支持。
一. 加载异步数据
我们先看下传统的js方法实现Ajax功能
创建两个新页面a.html和b.html，前者单击加载按钮后，在不刷新页面的情况下，将后者页面里的内容加载进来进行显示。
实现代码
a.html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>传统的JavaScript方法实现Ajax功能</title>
<style type="text/css">
body{font-size:13px}
.divFrame{width:260px;border:solid 1px #666}
.divFrame .divTitle{padding:5px;background-color:#eee}
.divFrame .divContent{padding:8px}
.divFrame .divContent .clsShow{font-size:14px}
.btn {border:#666 1px solid;padding:2px;width:80px;}
</style>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" onclick="GetSendData()" class="btn" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
<script type="text/javascript">
var objXmlHttp = null; //声明一个空的XMLHTTP变量
function CreateXMLHTTP() {
//根据浏览器的不同，返回该变量的实体对象
if (window.ActiveXObject) {
objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE标准
} else {
if (window.XMLHttpRequest) {
objXmlHttp = new XMLHttpRequest();//W3C标准
}
else {
alert("初始化XMLHTTP错误！");
}
}
}
function GetSendData() {
document.getElementById("divTip").innerHTML = "<img alt='' title='正在加载中...' src='images/Loading.gif' />"; //初始化内容
var strSendUrl = "b.html"; //设置发送地址变量并赋初始值
CreateXMLHTTP(); //实例化XMLHttpRequest对象
objXmlHttp.open("GET", strSendUrl, true); //open方法初始化XMLHttpRequest，true表示异步
objXmlHttp.send(); //send发送设置的请求
objXmlHttp.onreadystatechange = function() { //回调事件函数
if (objXmlHttp.readyState == 4) { //如果请求完成加载
if (objXmlHttp.status == 200) { //如果响应已成功
//显示获取的数据
document.getElementById("divTip").innerHTML = objXmlHttp.responseText;//objXmlHttp.responseText为接收到的响应结果
}
}
}
}
</script>
</body>
</html>
b.html中
<div class="clsShow">姓名：缘灭<br />性别：男<br />邮箱：[email protected]</div>
1. jQuery中的load( )方法
load( )方法可以轻松实现获取异步数据的功能，语法格式为：
load(url, [data], [callback])
其中参数url为被加载的页面地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value。另一个可选项[callback]参数表示加载成功后，返回至加载页的回调函数。下面举例说明：
a.html中改为以下代码
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" class="btn" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() { //按钮点击事件
$("#divTip").load("b.html"); //load()方法加载数据
})
})
</script>
</body>
注意：
在load（）方法中，参数url还可以用于过滤页面中的某些类别的元素，如代码"$("#divTip").load(“b.html .divContent”)"，则表示获取页面b.html中类别名为divContent的全部元素。
2. jQuery中的全局函数getJSON( )方法
getJSON( )方法用于调用JSON格式的数据，语法格式为：
$.getJSON(url, [data], [callback])
其中参数url为被加载的页面地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value。另一个可选项[callback]参数表示加载成功后，返回至加载页的回调函数。下面举例说明
a.html中改为以下代码
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" class="btn" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开文件，并通过回调函数处理获取的数据
$.getJSON("json/UserInfo.json", function(data) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$.each(data, function(index, item) { //遍历获取的数据
strHTML += "姓名：" + item["name"] + "<br>";
strHTML += "性别：" + item["sex"] + "<br>";
strHTML += "邮箱：" + item["email"] + "<hr>";
})
$("#divTip").html(strHTML); //显示处理后的数据
})
})
})
</script>
</body>
UserInfo.json中
[
{
"name": "缘灭",
"sex": "男",
"email": "[email protected]"
},
{
"name": "李xx",
"sex": "女",
"email": "[email protected]"
}
]
页面效果图：
3. jQuery中的全局函数getScript( )方法
getScript( )方法用于获取.js文件的内容，语法格式为：
$.getScript(url, [callback])
其中参数url为被加载的JS文件地址，可选项[callback]参数表示加载成功后执行的回调函数。下面举例说明
a.html中改为以下代码
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" class="btn" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开已获取返回数据的文件
$.getScript("js/UserInfo.js");
})
})
</script>
</body>
UserInfo.js中
var data = [
{
"name": "缘灭",
"sex": "男",
"email": "[email protected]"
},
{
"name": "李xx",
"sex": "女",
"email": "[email protected]"
}
];
var strHTML = ""; //初始化保存内容变量
$.each(data, function() { //遍历获取的数据
strHTML += "姓名：" + this["name"] + "<br>";
strHTML += "性别：" + this["sex"] + "<br>";
strHTML += "邮箱：" + this["email"] + "<hr>";
})
$("#divTip").html(strHTML); //显示处理后的数据
4. jQuery中的全局函数get( )方法
getJSON( )方法用于获取XML文档数据，语法格式为：
$.get(url, [data], [callback], [type])
其中参数url为被加载的数据地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value。另一个可选项[callback]参数表示加载成功后，返回至加载页的回调函数，可选项[type]参数表示返回数据的格式，如html,xml,js,json,text等。下面举例说明
a.html中改为以下代码
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" class="btn" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开文件，并通过回调函数处理获取的数据
$.get("UserInfo.xml", function(data) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$(data).find("User").each(function() { //遍历获取的数据
var $strUser = $(this);
strHTML += "姓名：" + $strUser.find("name").text() + "<br>";
strHTML += "性别：" + $strUser.find("sex").text() + "<br>";
strHTML += "邮箱：" + $strUser.find("email").text() + "<hr>";
})
$("#divTip").html(strHTML); //显示处理后的数据
})
})
})
</script>
</body>
UserInfo.xml中
<?xml version="1.0" encoding="utf-8" ?>
<Info>
<User id="1">
<name>缘灭11112222</name>
<sex>男</sex>
<email>[email protected]</email>
</User>
<User id="2">
<name>李xx</name>
<sex>女</sex>
<email>[email protected]</email>
</User>
</Info>