AJAX 实例

本例演示与 XML 一起使用的 JavaScript (AJAX)。

使用 XMLHttpRequest 对象的实例

通过 XML HTTP 把文本文件载入 HTML 元素

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. var xmlhttp;
  5. function loadXMLDoc(url)
  6. {
  7. xmlhttp=null;
  8. if (window.XMLHttpRequest)
  9.   {// code for Firefox, Opera, IE7, etc.
  10.   xmlhttp=new XMLHttpRequest();
  11.   }
  12. else if (window.ActiveXObject)
  13.   {// code for IE6, IE5
  14.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  15.   }
  16. if (xmlhttp!=null)
  17.   {
  18.   xmlhttp.onreadystatechange=state_Change;
  19.   xmlhttp.open("GET",url,true);
  20.   xmlhttp.send(null);
  21.   }
  22. else
  23.   {
  24.   alert("Your browser does not support XMLHTTP.");
  25.   }
  26. }
  28. function state_Change()
  29. {
  30. if (xmlhttp.readyState==4)
  31.   {// 4 = "loaded"
  32.   if (xmlhttp.status==200)
  33.     {// 200 = "OK"
  34.     document.getElementById('T1').innerHTML=xmlhttp.responseText;
  35.     }
  36.   else
  37.     {
  38.     alert("Problem retrieving data:" + xmlhttp.statusText);
  39.     }
  40.   }
  41. }
  42. </script>
  43. </head>
  45. <body onload="loadXMLDoc('/example/ajax/test_xmlhttp.txt')">
  46. <div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br />
  47. <button onclick="loadXMLDoc('/example/ajax/test_xmlhttp2.txt')">Click</button>
  48. </body>
  50. </html>

通过 XML HTTP 加载 XML 文件

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. var xmlhttp;
  5. function loadXMLDoc(url)
  6. {
  7. xmlhttp=null;
  8. if (window.XMLHttpRequest)
  9.   {// code for IE7, Firefox, Opera, etc.
  10.   xmlhttp=new XMLHttpRequest();
  11.   }
  12. else if (window.ActiveXObject)
  13.   {// code for IE6, IE5
  14.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  15.   }
  16. if (xmlhttp!=null)
  17.   {
  18.   xmlhttp.onreadystatechange=state_Change;
  19.   xmlhttp.open("GET",url,true);
  20.   xmlhttp.send(null);
  21.   }
  22. else
  23.   {
  24.   alert("Your browser does not support XMLHTTP.");
  25.   }
  26. }
  28. function state_Change()
  29. {
  30. if (xmlhttp.readyState==4)
  31.   {// 4 = "loaded"
  32.   if (xmlhttp.status==200)
  33.     {// 200 = "OK"
  34.     document.getElementById('A1').innerHTML=xmlhttp.status;
  35.     document.getElementById('A2').innerHTML=xmlhttp.statusText;
  36.     document.getElementById('A3').innerHTML=xmlhttp.responseText;
  37.     }
  38.   else
  39.     {
  40.     alert("Problem retrieving XML data:" + xmlhttp.statusText);
  41.     }
  42.   }
  43. }
  44. </script>
  45. </head>
  47. <body>
  48. <h2>Using the HttpRequest Object</h2>
  50. <p><b>Status:</b>
  51. <span id="A1"></span>
  52. </p>
  54. <p><b>Status text:</b>
  55. <span id="A2"></span>
  56. </p>
  58. <p><b>Response:</b>
  59. <br /><span id="A3"></span>
  60. </p>
  62. <button onclick="loadXMLDoc('/example/xmle/note.xml')">Get XML</button>
  64. </body>
  65. </html>

通过 XML HTTP 进行一次 HEAD 请求

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. var xmlhttp;
  5. function loadXMLDoc(url)
  6. {
  7. xmlhttp=null;
  8. if (window.XMLHttpRequest)
  9.   {// code for Firefox, Mozilla, IE7, etc.
  10.   xmlhttp=new XMLHttpRequest();
  11.   }
  12. else if (window.ActiveXObject)
  13.   {// code for IE6, IE5
  14.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  15.   }
  16. if (xmlhttp!=null)
  17.   {
  18.   xmlhttp.onreadystatechange=state_Change;
  19.   xmlhttp.open("GET",url,true);
  20.   xmlhttp.send(null);
  21.   }
  22. else
  23.   {
  24.   alert("Your browser does not support XMLHTTP.");
  25.   }
  26. }
  28. function state_Change()
  29. {
  30. if (xmlhttp.readyState==4)
  31.   {// 4 = "loaded"
  32.   if (xmlhttp.status==200)
  33.     {// 200 = "OK"
  34.     document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();
  35.     }
  36.   else
  37.     {
  38.     alert("Problem retrieving data:" + xmlhttp.statusText);
  39.     }
  40.   }
  41. }
  42. </script>
  43. </head>
  44. <body>
  46. <p id="p1">
  47. The getAllResponseHeaders() function returns the headers of a resource.
  48. The headers contain file information like length,
  49. server-type, content-type, date-modified, etc.</p>
  51. <button onclick="loadXMLDoc('/example/ajax/test_xmlhttp.txt')">Get Headers</button>
  53. </body>
  54. </html>

通过 XML HTTP 进行一次指定的 HEAD 请求

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. var xmlhttp;
  5. function loadXMLDoc(url)
  6. {
  7. xmlhttp=null;
  8. if (window.XMLHttpRequest)
  9.   {// all modern browsers
  10.   xmlhttp=new XMLHttpRequest();
  11.   }
  12. else if (window.ActiveXObject)
  13.   {// for IE5, IE6
  14.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  15.   }
  16. if (xmlhttp!=null)
  17.   {
  18.   xmlhttp.onreadystatechange=state_Change;
  19.   xmlhttp.open("GET",url,true);
  20.   xmlhttp.send(null);
  21.   }
  22. else
  23.   {
  24.   alert("Your browser does not support XMLHTTP.");
  25.   }
  26. }
  28. function state_Change()
  29. {
  30. if (xmlhttp.readyState==4)
  31.   {// 4 = "loaded"
  32.   if (xmlhttp.status==200)
  33.     {// 200 = "OK"
  34.     document.getElementById('p1').innerHTML="This file was last modified on: " + xmlhttp.getResponseHeader('Last-Modified');
  35.     }
  36.   else
  37.     {
  38.     alert("Problem retrieving data:" + xmlhttp.statusText);
  39.     }
  40.   }
  41. }
  42. </script>
  43. </head>
  44. <body>
  46. <p id="p1">
  47. The getResponseHeader() function returns a header from a resource.
  48. Headers contain file information like length,
  49. server-type, content-type, date-modified, etc.</p>
  51. <button onclick="loadXMLDoc('/example/ajax/test_xmlhttp.txt')">Get "Last-Modified"</button>
  53. </body>
  54. </html>

把 XML 文件显示为 HTML 表格

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. var xmlhttp;
  6. function loadXMLDoc(url)
  7. {
  8. xmlhttp=null;
  9. if (window.XMLHttpRequest)
  10.   {// code for IE7, Firefox, Mozilla, etc.
  11.   xmlhttp=new XMLHttpRequest();
  12.   }
  13. else if (window.ActiveXObject)
  14.   {// code for IE5, IE6
  15.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  16.   }
  17. if (xmlhttp!=null)
  18.   {
  19.   xmlhttp.onreadystatechange=onResponse;
  20.   xmlhttp.open("GET",url,true);
  21.   xmlhttp.send(null);
  22.   }
  23. else
  24.   {
  25.   alert("Your browser does not support XMLHTTP.");
  26.   }
  27. }
  29. function onResponse()
  30. {
  31. if(xmlhttp.readyState!=4) return;
  32. if(xmlhttp.status!=200)
  33.   {
  34.   alert("Problem retrieving XML data");
  35.   return;
  36.   }
  38. txt="<table border='1'>";
  39. x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
  40. for (i=0;i<x.length;i++)
  41.   {
  42.   txt=txt + "<tr>";
  43.   xx=x[i].getElementsByTagName("TITLE");
  44.     {
  45.     try
  46.       {
  47.       txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
  48.       }
  49.     catch (er)
  50.       {
  51.       txt=txt + "<td> </td>";
  52.       }
  53.     }
  54.   xx=x[i].getElementsByTagName("ARTIST");
  55.     {
  56.     try
  57.       {
  58.       txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
  59.       }
  60.     catch (er)
  61.       {
  62.       txt=txt + "<td> </td>";
  63.       }
  64.     }
  65.   txt=txt + "</tr>";
  66.   }
  67. txt=txt + "</table>";
  68. document.getElementById('copy').innerHTML=txt;
  69. }
  71. </script>
  72. </head>
  74. <body>
  75. <div id="copy">
  76. <button onclick="loadXMLDoc('/example/xmle/cd_catalog.xml')">Get CD info</button>
  77. </div>
  78. </body>
  79. </html>

例子解释

当用户键入文本时，通过使用 XML HTTP 与服务器进行在线通信

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  5. var xmlHttp=null;
  7. function showHint(str)
  8. {
  9. if (str.length==0)
  10.   { 
  11.   document.getElementById("txtHint").innerHTML="";
  12.   return;
  13.   }
  14. try
  15.   {// Firefox, Opera 8.0+, Safari, IE7
  16.   xmlHttp=new XMLHttpRequest();
  17.   }
  18. catch(e)
  19.   {// Old IE
  20.   try
  21.     {
  22.     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  23.     }
  24.   catch(e)
  25.     {
  26.     alert ("Your browser does not support XMLHTTP!");
  27.     return;  
  28.     }
  29.   }
  30. var url="/ajax/gethint.asp?q=" + str;
  31. url=url+"&sid="+Math.random();
  32. xmlHttp.open("GET",url,false);
  33. xmlHttp.send(null);
  34. document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
  35. }
  36. </script> 
  37. </head>
  38. <body><form> 
  39. First Name:
  40. <input type="text" id="txt1"
  41. onkeyup="showHint(this.value)">
  42. </form><p>Suggestions: <span id="txtHint"></span></p> </body>
  43. </html>

例子解释