AJAX 防google 的Suggest提示框
AJAX 防google 的Suggest提示框
在HTML表单
这是HTML网页。它包含一个简单的HTML表格,并链接到一个JavaScript :
<html> <head> <script src="clienthint.js"></script> </head>
<body>
<form> First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)"> </form>
<p>Suggestions: <span id="txtHint"></span></p>
</body> </html>
例如解释-的H TML表单
正如你可以看到, HTML网页上面载有一个简单的HTML表单的输入外地所谓“ txt1 ” 。
作品的形式像这样:
事件触发当使用者按下,并发布了关键领域的投入
当事件触发的功能要求showHint ( )被处决。
下面的形式是一个<span>所谓的“ txtHint ” 。这是作为一个占位符返回的数据showHint ( )函数。
-------------------------------------------------- ------------------------------
的JavaScript
JavaScript代码是储存在“ clienthint.js ”和相关的HTML文件:var xmlHttp function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML="" return } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="gethint.php" url=url+"?q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } }function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }例如解释
该showHint ( )函数
此函数执行每次一个字符输入的输入栏位。
如果有一些投入,在文本字段( str.length “ 0 )的功能执行如下:
界定了网址(档)传送给服务器
添加一个参数( Q )的网址的内容,输入栏位
添加一个随机数字,以防止服务器使用快取档案
吁请GetXmlHttpObject函数创建一个XMLHTTP物件,并讲述了对象执行的功能要求时stateChanged变化是触发
开幕XMLHTTP物件与特定网址。
发送一个HTTP请求到服务器
如果输入栏位是空的,功能简单清除的内容txtHint预留位置。
该stateChanged ( )函数
此函数执行每一次的状态的XMLHTTP对象的变化。
当状态的改变,以4 (或“完成” )的内容txtHint占位充满响应文本。
该GetXmlHttpObject ( )函数
AJAX应用程序只能运行在网页浏览器与完整的XML支持。
上述的程式码所谓的功能要求GetXmlHttpObject ( ) 。
的宗旨职能是解决这个问题创造不同的XMLHTTP对象不同的浏览器。
这是解释在前一章。
-------------------------------------------------- ------------------------------
PHP页面
网页服务器要求的JavaScript代码是一个简单的PHP文件名为“ gethint.php ” 。
该代码在“ gethint.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; ?>转载请注明来自http://www.226511.cn/wy/yw.html
补充:网页制作,XNL/XSLT