1、首先,要了解什么是 Ajax :
Ajax是asynchronous javascript and xml 缩写,意思是异步的JavaScript 与 XML。这是一种使用客户端脚本与web服务器交换数据的web应用开发方法,可以与JSP、ASP、PHP、Python和CGI脚本交互,不用关心服务器是什么。
对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。Ajax能够在不刷新页面的情况下,通过 XMLHttpRequest 对象向服务器发送请求,得到服务器回应后,在不需要重新载入整个页面的情况下。即可将服务器传送过来的数据处理后显示在页面上。
Ajax开发过程中,要使用客户端脚本(主要是JavaScript)发送 XMLHttpRequest 请求并处理和显示服务器回应的数据,使用服务器端脚本来相应客户端的 XMLHttpRequest 请求。通过 AJAX,JavaScript 无需等待服务器的响应,而是:在等待服务器响应时执行其他脚本,当响应就绪后对响应进行处理。
2、接下来,了解如何使用 XMLHttpRequest 对象:
XMLHttpRequest 对象用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
所有现代浏览器均支持 XMLHttpRequest 对象,IE7+、Firefox、Chrome、Safari 以及 Opera均内建 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveX 对象)。
异步传送过程中的数据格式,过去常常使用XML。但是在服务器或者客户端,对于XML文档的生成和解析都会导致复杂的代码,降低了开发的效率。基于这些原因,现在很多人喜欢用JSON(一种轻量级的数据格式)来组织数据。
创建 XMLHttpRequest 对象的语法: variable=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象: variable=new ActiveXObject("Microsoft.XMLHTTP");
我们来看看一具体例子:
index.HTML代码
<!DOCTYPE html> <html> <head> <script type="text/javascript"> function showHint(str) { var xmlhttp; if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+,Firefox,Chrome,Opera,Safari xmlhttp=new XMLHttpRequest(); } else {// code for 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","gethint.PHP?q="+str,true); xmlhttp.send(); } </script> </head> <body> <h3>please input(A - Z): </h3> <form action=""> last name: <input type="text" id="txt1" onkeyup="showHint(this.value)" /> </form> <p>suggest: <span id="txtHint"></span></p> </body> </html>
<?PHP // 用名字来填充数组 $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"; //获得来自 URL 的 q 参数 $q=$_GET["q"]; //如果 q 大于 0,则查找数组中的所有提示 if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint.",".$a[$i]; } } } } // 如果未找到提示,则把输出设置为 "no suggestion" // 否则设置为正确的值 if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //输出响应 echo $response; ?>
运行结果如下: