什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
AJAX 工作原理
AJAX是基于现有的Internet标准
AJAX是基于现有的Internet标准，并且联合使用它们：
-
XMLHttpRequest 对象 (异步的与服务器交换数据)
-
JavaScript/DOM (信息显示/交互)
-
CSS (给数据定义样式)
-
XML (作为转换数据的格式)
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
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"); }
向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true); //"ajax_info.txt"为自定义文本，支持txt/asp/php/xml格式
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) |
规定请求的类型、URL 以及是否异步处理请求。
|
| send(string) |
将请求发送到服务器。
|
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
-
无法使用缓存文件（更新服务器上的文件或数据库）
-
向服务器发送大量数据（POST 没有数据量限制）
-
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：
xmlhttp.open("GET","ajax_test.html",true);
对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
-
在等待服务器响应时执行其他脚本
-
当响应就绪后对响应进行处理
AJAX - 服务器 响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
AJAX - onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status | 200: "OK" 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
AJAX实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Ajax</title> 6 <script> 7 function loadXMLDoc(){ 8 var xmlhttp; 9 if(window.XMLHttpRequest){ 10 // code for IE7+, Firefox, Chrome, Opera, Safari 11 xmlhttp = new XMLHttpRequest(); 12 }else{ 13 // code for IE6, IE5 14 xmlhttp = new ActiveXObiect("Microsoft.XMLHTTP"); 15 } 16 17 // //同步 18 // xmlhttp.open("GET","ajax_info.txt",false); 19 // xmlhttp.send(); 20 // document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 21 // 22 // 异步 23 xmlhttp.onreadystatechange = function(){ 24 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ 25 document.getElementById("myDiv").innerHTML = xmlhttp.responseText; 26 } 27 } 28 xmlhttp.open("GET","ajax_info.txt",true); 29 xmlhttp.send(); 30 } 31 </script> 32 </head> 33 <body> 34 <div id="myDiv"><h2>使用Ajax改变这个文本。</h2></div> 35 <button type="button" onclick="loadXMLDoc()">改变文本</button> 36 </body> 37 </html>
使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script> 5 var xmlhttp; 6 function loadXMLDoc(url,cfunc) 7 { 8 if (window.XMLHttpRequest) 9 {// IE7+, Firefox, Chrome, Opera, Safari 代码 10 xmlhttp=new XMLHttpRequest(); 11 } 12 else 13 {// IE6, IE5 代码 14 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 15 } 16 xmlhttp.onreadystatechange=cfunc; 17 xmlhttp.open("GET",url,true); 18 xmlhttp.send(); 19 } 20 function myFunction() 21 { 22 loadXMLDoc("ajax_info.txt",function() 23 { 24 if (xmlhttp.readyState==4 && xmlhttp.status==200) 25 { 26 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 27 } 28 }); 29 } 30 </script> 31 </head> 32 <body> 33 34 <div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div> 35 <button type="button" onclick="myFunction()">修改内容</button> 36 37 </body> 38 </html>