1. 简介
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
2. 创建对象
XMLHttpRequest 是 AJAX 的基础。
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据。
创建 XMLHttpRequest 对象的语法：
除IE5和IE6以外的浏览器:
variable = newXMLHttpRequest();
IE5和IE6:
variable = newActiveXObjec(“Microsoft.XMLHTTP”);
为应对所有浏览器，可先检查是否支持XMLHttpRequest，如支持则创建，不支持，创建ActiveXObject：
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
3. 发请求
XMLHttpRequest 对象用于和服务器交换数据。
请求方式：
参数1：请求方式（get/post，get方式地址可跟参数），参数2：请求url，参数3：是否异步（不推荐使用false）
xmlhttp.open("GET","test1.txt?fileName=AAA&fileId=BBB",true);
xmlhttp.send();//get方式时，不含参数
xmlhttp.open("post","test1.txt?fileName=’’&fileId=’’",true)
//post传参时使用，参数1：规定头的名称，参数2：给定头的值
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(“fileName=AAA&fileId=BBB”);//post时：可含参数，为string
不建议使用get请求方式的情况：
· 无法使用缓存文件（更新服务器上的文件或数据库）
· 向服务器发送大量数据（POST 没有数据量限制）
· 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
注意：
ajax向服务器发送请求后获取的数据会存入浏览器缓存中，由于页面不刷新，相同页面相同请求的结果可能你直接从浏览器缓存中获取，从而造成数据不更新问题，避免方式（使每次请求都不相同）：
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
4. 服务器响应
使用XMLRequest对象的responseText或responseXML获取服务器响应：
l responseText：获得字符串形式的响应数据，可直接写入元素中
l responseXML：获得XML形式的响应数据，需要遍历
5. onreadystatechange事件
用于处理基于响应的过程中的操作
XMLHttpRequest或ActiveXObject("Microsoft.XMLHTTP")对象中包含onreadystatechange、readState和status三种属性，意义如下：
l onreadystatechange：存储函数（或函数名），每当readyState发生改变时调用对应函数
l readyState：存有XMLHttpRequset的状态，从0到4发生变化，0：请求未初始化，1：客户端和服务器建立连接，2：服务器请求接受完成，3：服务器处理请求4：客户端请求完成，且响应已就绪
l status：请求是否存在异常，200：正常，404：未找到请求地址
可用于处理请求响应后执行的函数（回调函数）即在服务器响应已完成时处理响应数据的函数：
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
6. 使用实例
6.1. 文本框输入内容时提示相关信息（加载asp文件）
<html>
<head>
<script type="text/javascript">
function showHint(str){
var xmlhttp;
if (str.length==0){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>请在下面的输入框中键入字母（A - Z）：</h3>
<form action="">
//onkeyup：键盘按下松开时触发
姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>建议：<span id="txtHint"></span></p>
</body>
</html>
6.2. 输入内容后显示相关信息
<html>
<head>
<script type="text/javascript">
function showCustomer(str){
var xmlhttp;
if (str==""){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="" style="margin-top:15px;">
<label>请选择一位客户：
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</label>
</form>
<br />
<div id="txtHint">客户信息将在此处列出 ...</div>
</body>
</html>
6.3. 下拉框选中后提示相关信息（读取xml文件）
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url){
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++){
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}catch (er){
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}catch (er){
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('/example/xmle/cd_catalog.xml')">获得 CD 信息</button>
</div>
</body>
</html>
7. jQuery操作Ajax
7.1. ajax()---执行异步 HTTP(Ajax) 请求。
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。
参数说明：
$.ajax({
options: Object，
async: Boolean,默认true，处理请求是否异步，false时为同步加载，这时发送请求会锁死浏览器，必须等请求完成后再会解锁。
beforeSend(XHR): function,用于在发送请求前修改XMLHttpRequest对象的函数，返回false时，取消本次请求。
cache: Boolean，默认true，dataType为script和jsonp时默认为false，判断请求加载的数据是否从缓存中获取，false时将不缓存此页面，即不存缓存中加载。
complete(XHR,TS): function，请求完成后执行的函数（请求失败或成功都调用），是一个ajax事件，参数： XMLHttpRequest 对象和一个描述请求类型的字符串。
contentType: String，默认”application/x-www-form-urlencoded”，即发送服务器的信息内容的编码类型
context: object，用于设置ajax相关回调函数的上下文，也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。
$.ajax({ url: "test.html", context: document.body, success: function(){$(this).addClass("done");
}};
data: String，发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]}转换为'&foo=bar1&foo=bar2'。
dataFilter: function，给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data是Ajax 返回的原始数据，type 是调用jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType: String，预期服务器返回的数据类型。如果不指定，jQuery 将自动根据HTTP 包 MIME 信息来智能判断，比如 XMLMIME 类型就被识别为 XML。在 1.4 中，JSON就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
· "xml": 返回XML 文档，可用 jQuery 处理。
· "html": 返回纯文本HTML 信息；包含的 script 标签会在插入 dom 时执行。
· "script": 返回纯文本JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的script标签来加载）
· "json": 返回JSON 数据 。
· "jsonp": JSONP 格式。使用JSONP 形式调用函数时，如"myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
· "text": 返回纯文本字符串
error: function，请求失败是调用次函数，自动判断xml和text，有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error","notmodified" 和 "parsererror"。这是一个Ajax 事件。
global: Boolean，是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或ajaxStop 可用于控制不同的 Ajax 事件。
ifModified:Boolean，仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
jsonp: String，为jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。
jsonpCallback:String，为jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。
username:String，用于响应HTTP 访问认证请求的用户名。
password: String，用于响应HTTP 访问认证请求的密码。
scriptCharset: String，只有当请求时 dataType 为"jsonp" 或 "script"，并且type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
success: Function，请求成功后的回调函数。参数：由服务器返回，并根据dataType 参数进行处理后的数据；描述状态的字符串。这是一个 Ajax 事件。
traditional:Boolean，如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的jQuery.param 方法。
timeout:Number，设置请求超时时间（毫秒）。此设置将覆盖全局设置。
type:String，默认值:"GET")。请求方式 ("POST" 或"GET")， 默认为"GET"。注意：其它 HTTP 请求方法，如 PUT 和DELETE 也可以使用，但仅部分浏览器支持。
url:String，默认值:当前页地址。发送请求的地址。
processData: Boolean，默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
xhr:Function，需要返回一个 XMLHttpRequest 对象。默认在 IE 下是ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。
});
注意：
如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用 jsonp 类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名，以便完成一个有效的 JSONP 请求。如果要指定回调函数的参数名来取代默认的 callback，可以通过设置$.ajax() 的 jsonp 参数。JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。如果指定了 script 或者 jsonp 类型，那么当从服务器接收到数据时，实际上是用了<script> 标签而不是XMLHttpRequest 对象。这种情况下，$.ajax()不再返回一个 XMLHttpRequest 对象，并且也不会传递事件处理函数，比如beforeSend。
7.2. .ajaxComplete()---AJAX请求完成时执行函数
Complete() 方法在 AJAX 请求完成时执行函数。它是一个 Ajax 事件。与 ajaxSuccess() 不同，通过 ajaxComplete() 方法规定的函数会在请求完成时运行，即使请求并未成功。
语法：
.jQueryajaxComplete(function(event,xhr,options))
event：包含event对象
xhr：包含XMLHttpRequest对象
options：包含ajax请求中使用的选项
eg：
当 AJAX 请求正在进行时显示“正在加载”的指示：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#txt").ajaxStart(function(){
$("#wait").css("display","block");
});
$("#txt").ajaxComplete(function(){
$("#wait").css("display","none");
});
$("button").click(function(){
$("#txt").load("/example/jquery/demo_ajax_load.asp");
});
});
</script>
</head>
<body>
<div id="txt"><h2>通过 AJAX 改变文本</h2></div>
<button>改变内容</button>
<div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;">
<img src='/i/demo_wait.gif' width="64" height="64" />
<br />加载中 ...
</div>
</body>
</html>
jQuery-Ajax参考手册：
http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
函数 |
描述 |
执行异步 HTTP (Ajax) 请求。 |
|
当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
|
当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。 |
|
在 Ajax 请求发送之前显示一条消息。 |
|
设置将来的 Ajax 请求的默认值。 |
|
当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。 |
|
当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
|
当 Ajax 请求成功完成时显示一条消息。 |
|
使用 HTTP GET 请求从服务器加载数据。 |
|
使用 HTTP GET 请求从服务器加载 JSON 编码数据。 |
|
使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。 |
|
从服务器加载数据，然后把返回到 HTML 放入匹配元素。 |
|
创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。 |
|
使用 HTTP POST 请求从服务器加载数据。 |
|
将表单内容序列化为字符串。 |
|
序列化表单元素，返回 JSON 数据结构数据。 |