在下面的 AJAX 例子中,我们将演示当用户向 web 表单中输入数据时,网页如何与在线的 web 服务器进行通信。
Suggestions:
这个例子包括三张页面:
这是 HTML 表单。它包含一个简单的 HTML 表单和指向 JavaScript 的链接:
</>code
- <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>
正如您看到的,上面的 HTML 页面含有一个简单的 HTML 表单,其中带有一个名为 "txt1" 的输入字段。
该表单是这样工作的:
JavaScript 代码存储在 "clienthint.js" 文件中,它被链接到 HTML 文档:
</>code
- 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;
- }
每当在输入域中输入一个字符,该函数就会被执行一次。
如果文本框中有内容 (str.length > 0),该函数这样执行:
如果输入域为空,则函数简单地清空 txtHint 占位符的内容。
每当 XMLHTTP 对象的状态发生改变,则执行该函数。
在状态变成 4 (或 "complete")时,用响应文本填充 txtHint 占位符 txtHint 的内容。
AJAX 应用程序只能运行在完整支持 XML 的 web 浏览器中。
上面的代码调用了名为 GetXmlHttpObject() 的函数。
该函数的作用是解决为不同浏览器创建不同 XMLHTTP 对象的问题。
这一点在上一节中已经解释过了。
被 JavaScript 代码调用的服务器页面是一个名为 "gethint.php" 的简单服务器页面。
"gethint.php" 中的代码会检查名字数组,然后向客户端返回对应的名字:
</>code
- <?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;
- ?>
如果存在从 JavaScript 送来的文本 (strlen($q) > 0),则:
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛
Powered by 365建站网 RSS地图 HTML地图
copyright © 2013-2024 版权所有 鄂ICP备17013400号