1. 创建XMLHttpRequest 对象
1 var XMLHttp=null 2 if (window.XMLHttpRequest) { 3 XMLHttp=new XMLHttpRequest() //适用除Internet Expoler以外的浏览器 4 } 5 else if (window.ActiveXObject){ 6 XMLHttp=new ActiveXObject("Microsoft.XMLHTTP") ////适用Internet Expoler 7 }
2. PHP使用AJAX实例
（1） 写HTML表单。它包含一个简单的 HTML 表单和指向 JavaScript 的链接
1 <html> 2 <head> 3 <script src="clienthint.js"></script> 4 </head> 5 6 <body> 7 8 <form> 9 First Name: 10 <input type="text" id="txt1" 11 onkeyup="showHint(this.value)"> //当用户在输入域中按下并松开按键时，会触发一个事件 12 //当该事件被触发时，执行名为 showHint() 的函数 13 </form> 14 15 <p>Suggestions: <span id="txtHint"></span></p> 16 //表单的下面是一个名为 "txtHint" 的 <span>。它用作 showHint() 函数所返回数据的占位符。 17 </body> 18 </html>
（2） JavaScript 代码存储在 "clienthint.js" 文件中，它被链接到 HTML 文档
1 var xmlHttp 2 function showHint(str) //每当在输入域中输入一个字符，该函数就会被执行一次。 3 { 4 if (str.length==0) 5 { 6 document.getElementById("txtHint").innerHTML="" 7 return 8 } 9 xmlHttp=GetXmlHttpObject() 10 if (xmlHttp==null) 11 { 12 alert ("Browser does not support HTTP Request") 13 return 14 } 15 var url="gethint.php" //定义要发送到服务器的 URL（文件名） 16 url=url+"?q="+str //把带有输入域内容的参数 (q) 添加到这个 URL 17 url=url+"&sid="+Math.random() //添加一个随机数，以防服务器使用缓存文件 18 xmlHttp.onreadystatechange=stateChanged //调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象，并在事件被触发时告知该对象执行名为 stateChanged 的函数 19 xmlHttp.open("GET",url,true) //用给定的 URL 来打开打开这个 XMLHTTP 对象 20 xmlHttp.send(null) //向服务器发送 HTTP 请求 21 } 22 23 function stateChanged() //每当 XMLHTTP 对象的状态发生改变，则执行该函数。 24 { 25 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") 26 //在状态变成 4 （或 "complete"）时，用响应文本填充 txtHint 占位符 txtHint 的内容。 27 { 28 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 29 } 30 } 31 32 function GetXmlHttpObject() //解决为不同浏览器创建不同 XMLHTTP 对象的问题。 33 { 34 var xmlHttp=null; 35 try 36 { 37 // Firefox, Opera 8.0+, Safari 38 xmlHttp=new XMLHttpRequest(); 39 } 40 catch (e) 41 { 42 // Internet Explorer 43 try 44 { 45 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 46 } 47 catch (e) 48 { 49 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 50 } 51 } 52 return xmlHttp; 53 }
（3） 被 JavaScript 代码调用的服务器页面是一个名为 "gethint.php" 的简单服务器页面。
"gethint.php" 中的代码会检查名字数组，然后向客户端返回对应的名字：
1 <?php 2 // Fill up array with names 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 //get the q parameter from URL 35 $q=$_GET["q"]; 36 37 //lookup all hints from array if length of 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 //Set output to "no suggestion" if no hint were found 58 //or to the correct values 59 if ($hint == "") 60 { 61 $response="no suggestion"; 62 } 63 else 64 { 65 $response=$hint; 66 } 67 68 //output the response 69 echo $response; 70 ?>
（*整理自W3School）