AJAX 实例

为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序。

实例

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function loadXMLDoc()
  5. {
  6. .... AJAX script goes here ...
  7. }
  8. </script>
  9. </head>
  10. <body>
  12. <div id="myDiv"><h3>Let AJAX change this text</h3></div>
  13. <button type="button" onclick="loadXMLDoc()">Change Content</button>
  15. </body>
  16. </html>

AJAX 实例解释

上面的 AJAX 应用程序包含一个 div 和一个按钮。

div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：

  1. <html>
  2. <body>
  3.  
  4. <div id="myDiv"><h3>Let AJAX change this text</h3></div>
  5. <button type="button" onclick="loadXMLDoc()">Change Content</button>
  6.  
  7. </body>
  8. </html>

接下来，在页面的 head 部分添加一个 <script> 标签。该标签中包含了这个 loadXMLDoc() 函数：

  1. <head>
  2. <script type="text/javascript">
  3. function loadXMLDoc()
  4. {
  5. .... AJAX script goes here ...
  6. }
  7. </script>
  8. </head>

下面的章节会为您讲解 AJAX 的工作原理。