创建XMLHttpRequest 对象
variable=new XMLHttpRequest(); /*老版IE(IE5,IE6)*/ variable=new ActiveXObject("Microsoft.XMLHTTP");向服务器发送请求
xmlhttp.open("请求的类型","请求的URL","是否为异步")
/*GET请求*/ xmlhttp.open("GET","xxx.php",true); xmlhttp.send(); /*POST请求*/ xmlhttp.open("GET","xxx.php",true); xmlhttp.send();GET与POST请求的适用条件
大多数情况使用GET,因为GET请求简单快速
但以下情况使用POST
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
服务器响应
服务器响应有responseText和responseXML两种方式,常用responseXML
/*responseText,返回的是一个字符串*/ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; /*responseXML,返回的是一个XML对象*/ xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("TTL"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("myDiv").innerHTML=txt;状态响应事件
readyState表示XMLHttpRequest对象的状态
请求未初始化
服务器连接已建立
请求已接收
请求处理中
请求已完成，且响应已就绪
当状态发生改变时会触发onreadystatechange()事件
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } /*回调函数*/ xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { /*另一个函数*/ function() } }从数据库读取数据的步骤
客户端
function xx(str){
1.检查是否已选择某个数据,
2.根据浏览器类型创建 XMLHttpRequest 对象
3.当服务器响应就绪时执行所创建的函数
4.把请求发送到服务器上的文件
}
服务端
查询数据库然后对客户端的请求做出回应
<% response.expires=-1 sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID=" sql=sql & "'" & request.querystring("q") & "'" set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open(Server.Mappath("/db/northwind.mdb")) set rs=Server.CreateObject("ADODB.recordset") rs.Open sql,conn response.write("<table>") do until rs.EOF for each x in rs.Fields response.write("<tr><td><b>" & x.name & "</b></td>") response.write("<td>" & x.value & "</td></tr>") next rs.MoveNext loop response.write("</table>") %>读取XML文件
创建XMLHttpRequest对象x
调用x.onreadystatechange()函数进行状态检测
在x.onreadystatechange()函数中调用回调函数(如下)进行XML文档读取
function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var table="<tr><th>Artist</th><th>Title</th></tr>"; var x = xmlDoc.getElementsByTagName("CD"); for (i = 0; i <x.length; i++) { table += "<tr><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td></tr>"; } document.getElementById("demo").innerHTML = table; }一个简单的PHP实例
/*javascipt代码*/ function showHint(str) { var xmlhttp; if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true); xmlhttp.send(); } /*PHP代码*/ <?php // Fill up array with names $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella"; $a[]="Diana"; $a[]="Eva"; $a[]="Fiona"; $a[]="Gunda"; $a[]="Hege"; $a[]="Inga"; $a[]="Johanna"; $a[]="Kitty"; $a[]="Linda"; $a[]="Nina"; $a[]="Ophelia"; $a[]="Petunia"; $a[]="Amanda"; $a[]="Raquel"; $a[]="Cindy"; $a[]="Doris"; $a[]="Eve"; $a[]="Evita"; $a[]="Sunniva"; $a[]="Tove"; $a[]="Unni"; $a[]="Violet"; $a[]="Liza"; $a[]="Elizabeth"; $a[]="Ellen"; $a[]="Wenche"; $a[]="Vicky"; //get the q parameter from URL $q=$_GET["q"]; //lookup all hints from array if length of q>0 if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } } } // Set output to "no suggestion" if no hint were found // or to the correct values if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //output the response echo $response; ?>参考文献: