什么是 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 ?>