1. AJAX的定义
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
2. AJAX工作原理
3. AJAX的四个步骤：
（1）创建XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
（2）向服务器发送请求
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）；
向服务器发送大量数据（POST 没有数据量限制；
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠；
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本；
当响应就绪后对响应进行处理；
（3）服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText 属性返回字符串形式的响应，因此您可以这样使用：
实例
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
实例
请求 cd_catalog.xml 文件，并解析响应：
（4）AJAX onreadystatechange事件
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
实例
（4）实例
1 function showCustomer(str) 2 { 3 var xmlhttp; 4 if (str=="") 5 { 6 document.getElementById("txtHint").innerHTML=""; 7 return; 8 } 9 if (window.XMLHttpRequest) 10 { 11 // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 12 xmlhttp=new XMLHttpRequest(); 13 } 14 else 15 { 16 // IE6, IE5 浏览器执行代码 17 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 18 } 19 xmlhttp.onreadystatechange=function() 20 { 21 if (xmlhttp.readyState==4 && xmlhttp.status==200) 22 { 23 document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 24 } 25 } 26 xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true); 27 xmlhttp.send(); 28 } 29 </script> 30 </head> 31 <body> 32 33 <form action=""> 34 <select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;"> 35 <option value="APPLE">Apple Computer, Inc.</option> 36 <option value="BAIDU ">BAIDU, Inc</option> 37 <option value="Canon">Canon USA, Inc.</option> 38 <option value="Google">Google, Inc.</option> 39 <option value="Nokia">Nokia Corporation</option> 40 <option value="SONY">Sony Corporation of America</option> 41 </select> 42 </form> 43 <br> 44 <div id="txtHint">客户信息将显示在这...</div> 45 46 </body> 47 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 table,th,td { 7 border : 1px solid black; 8 border-collapse: collapse; 9 } 10 th,td { 11 padding: 5px; 12 } 13 </style> 14 </head> 15 <body> 16 17 <h1>XMLHttpRequest 对象</h1> 18 19 <button type="button" onclick="loadDoc()">获取我收藏的 CD</button> 20 <br><br> 21 <table id="demo"></table> 22 23 <script> 24 function loadDoc() { 25 var xhttp = new XMLHttpRequest(); 26 xhttp.onreadystatechange = function() { 27 if (this.readyState == 4 && this.status == 200) { 28 myFunction(this); 29 } 30 }; 31 xhttp.open("GET", "cd_catalog.xml", true); 32 xhttp.send(); 33 } 34 function myFunction(xml) { 35 var i; 36 var xmlDoc = xml.responseXML; 37 var table="<tr><th>Artist</th><th>Title</th></tr>"; 38 var x = xmlDoc.getElementsByTagName("CD"); 39 for (i = 0; i <x.length; i++) { 40 table += "<tr><td>" + 41 x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + 42 "</td><td>" + 43 x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + 44 "</td></tr>"; 45 } 46 document.getElementById("demo").innerHTML = table; 47 } 48 </script> 49 50 </body> 51 </html>
1 if (window.XMLHttpRequest) 2 {// IE7+, Firefox, Chrome, Opera, Safari 代码 3 xmlhttp=new XMLHttpRequest(); 4 } 5 else 6 {// IE6, IE5 代码 7 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 8 } 9 xmlhttp.onreadystatechange=cfunc; 10 xmlhttp.open("GET",url,true); 11 xmlhttp.send(); 12 } 13 function myFunction() 14 { 15 loadXMLDoc("/try/ajax/ajax_info.txt",function() 16 { 17 if (xmlhttp.readyState==4 && xmlhttp.status==200) 18 { 19 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 20 } 21 }); 22 } 23 </script> 24 </head> 25 <body> 26 27 <div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div> 28 <button type="button" onclick="myFunction()">修改内容</button> 29 30 </body> 31 </html>