为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序:
| <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 应用程序包含一个 div 和一个按钮。
div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：
| <!DOCTYPE html> |
| <html> |
| <body> |
| <div id="myDiv"><h2>Let AJAX change this text</h2></div> |
| <button type="button" onclick="loadXMLDoc()">Change Content</button> |
| </body> |
| </html> |
| <head> |
| <script> |
| function loadXMLDoc() |
| { |
| .... AJAX script goes here ... |
| } |
| </script> |
| </head> |
