当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status |
200: "OK" 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
| <html><!DOCTYPE html> |
| <html> |
| <head> |
| <script> |
| function loadXMLDoc() |
| { |
| 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"); |
| } |
| xmlhttp.onreadystatechange=function() |
| { |
| if (xmlhttp.readyState==4 && xmlhttp.status==200) |
| { |
| document.getElementById("myDiv").innerHTML=xmlhttp.responseText; |
| } |
| } |
| xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); |
| xmlhttp.send(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> |
| <button type="button" onclick="loadXMLDoc()">修改内容</button> |
| </body> |
| </html> |
回调函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
| <!DOCTYPE html> |
| <html> |
| <head> |
| <script> |
| var xmlhttp; |
| function loadXMLDoc(url,cfunc) |
| { |
| if (window.XMLHttpRequest) |
| {// IE7+, Firefox, Chrome, Opera, Safari 代码 |
| xmlhttp=new XMLHttpRequest(); |
| } |
| else |
| {// IE6, IE5 代码 |
| xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); |
| } |
| xmlhttp.onreadystatechange=cfunc; |
| xmlhttp.open("GET",url,true); |
| xmlhttp.send(); |
| } |
| function myFunction() |
| { |
| loadXMLDoc("/try/ajax/ajax_info.txt",function() |
| { |
| if (xmlhttp.readyState==4 && xmlhttp.status==200) |
| { |
| document.getElementById("myDiv").innerHTML=xmlhttp.responseText; |
| } |
| }); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div> |
| <button type="button" onclick="myFunction()">修改内容</button> |
| </body> |
| </html> |
