AJAX小记

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

1 var xmlhttp;
2 if (window.XMLHttpRequest)
3   {// code for IE7+, Firefox, Chrome, Opera, Safari
4   xmlhttp=new XMLHttpRequest();
5   }
6 else
7   {// code for IE6, IE5
8   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
9   }

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

实例演示：

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 function showHint(str)
 5 {
 6 var xmlhttp;
 7 if (str.length==0)
 8   { 
 9   document.getElementById("txtHint").innerHTML="";
10   return;
11   }
12 if (window.XMLHttpRequest)
13   {// code for IE7+, Firefox, Chrome, Opera, Safari
14   xmlhttp=new XMLHttpRequest();
15   }
16 else
17   {// code for IE6, IE5
18   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
19   }
20 xmlhttp.onreadystatechange=function()
21   {
22   if (xmlhttp.readyState==4 && xmlhttp.status==200)
23     {
24     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
25     }
26   }
27 xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);
28 xmlhttp.send();
29 }
30 </script>
31 </head>
32 <body>
33 
34 <h3>请在下面的输入框中键入字母（A - Z）：</h3>
35 <form action=""> 
36 姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />
37 </form>
38 <p>建议：<span id="txtHint"></span></p> 
39 
40 </body>
41 </html>

php文件

 1 <?php
 2 // 用名字来填充数组
 3 $a[]="Anna";
 4 $a[]="Brittany";
 5 $a[]="Cinderella";
 6 $a[]="Diana";
 7 $a[]="Eva";
 8 $a[]="Fiona";
 9 $a[]="Gunda";
10 $a[]="Hege";
11 $a[]="Inga";
12 $a[]="Johanna";
13 $a[]="Kitty";
14 $a[]="Linda";
15 $a[]="Nina";
16 $a[]="Ophelia";
17 $a[]="Petunia";
18 $a[]="Amanda";
19 $a[]="Raquel";
20 $a[]="Cindy";
21 $a[]="Doris";
22 $a[]="Eve";
23 $a[]="Evita";
24 $a[]="Sunniva";
25 $a[]="Tove";
26 $a[]="Unni";
27 $a[]="Violet";
28 $a[]="Liza";
29 $a[]="Elizabeth";
30 $a[]="Ellen";
31 $a[]="Wenche";
32 $a[]="Vicky";
33 
34 //获得来自 URL 的 q 参数
35 $q=$_GET["q"];
36 
37 //如果 q 大于 0，则查找数组中的所有提示
38 if (strlen($q) > 0)
39   {
40   $hint="";
41   for($i=0; $i<count($a); $i++)
42     {
43     if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
44       {
45       if ($hint=="")
46         {
47         $hint=$a[$i];
48         }
49       else
50         {
51         $hint=$hint." , ".$a[$i];
52         }
53       }
54     }
55   }
56 
57 // 如果未找到提示，则把输出设置为 "no suggestion"
58 // 否则设置为正确的值
59 if ($hint == "")
60   {
61   $response="no suggestion";
62   }
63 else
64   {
65   $response=$hint;
66   }
67 
68 //输出响应
69 echo $response;
70 ?>