在下面的 AJAX 例子中,我們將演示當(dāng)用戶向 web 表單中輸入數(shù)據(jù)時(shí),網(wǎng)頁(yè)如何與在線的 web 服務(wù)器進(jìn)行通信。
公司主營(yíng)業(yè)務(wù):網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對(duì)我們的高要求,感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出西充免費(fèi)做網(wǎng)站回饋大家。
First Name:
Suggestions:
這個(gè)例子包括三張頁(yè)面:
一個(gè)簡(jiǎn)單的 HTML 表單一段 JavaScript一張 PHP 頁(yè)面這是 HTML 表單。它包含一個(gè)簡(jiǎn)單的 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> 例子解釋 - HTML 表單正如您看到的,上面的 HTML 頁(yè)面含有一個(gè)簡(jiǎn)單的 HTML 表單,其中帶有一個(gè)名為 "txt1" 的輸入字段。
該表單是這樣工作的:
當(dāng)用戶在輸入域中按下并松開按鍵時(shí),會(huì)觸發(fā)一個(gè)事件當(dāng)該事件被觸發(fā)時(shí),執(zhí)行名為 showHint() 的函數(shù)表單的下面是一個(gè)名為 "txtHint" 的 <span>。它用作 showHint() 函數(shù)所返回?cái)?shù)據(jù)的占位符。JavaScript 代碼存儲(chǔ)在 "clienthint.js" 文件中,它被鏈接到 HTML 文檔:
var xmlHttpfunction 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="+strurl=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() 函數(shù)每當(dāng)在輸入域中輸入一個(gè)字符,該函數(shù)就會(huì)被執(zhí)行一次。
如果文本框中有內(nèi)容 (str.length > 0),該函數(shù)這樣執(zhí)行:
定義要發(fā)送到服務(wù)器的 URL(文件名)把帶有輸入域內(nèi)容的參數(shù) (q) 添加到這個(gè) URL添加一個(gè)隨機(jī)數(shù),以防服務(wù)器使用緩存文件調(diào)用 GetXmlHttpObject 函數(shù)來(lái)創(chuàng)建 XMLHTTP 對(duì)象,并在事件被觸發(fā)時(shí)告知該對(duì)象執(zhí)行名為 stateChanged 的函數(shù)用給定的 URL 來(lái)打開打開這個(gè) XMLHTTP 對(duì)象向服務(wù)器發(fā)送 HTTP 請(qǐng)求如果輸入域?yàn)榭眨瑒t函數(shù)簡(jiǎn)單地清空 txtHint 占位符的內(nèi)容。
stateChanged() 函數(shù)每當(dāng) XMLHTTP 對(duì)象的狀態(tài)發(fā)生改變,則執(zhí)行該函數(shù)。
在狀態(tài)變成 4 (或 "complete")時(shí),用響應(yīng)文本填充 txtHint 占位符 txtHint 的內(nèi)容。
GetXmlHttpObject() 函數(shù)AJAX 應(yīng)用程序只能運(yùn)行在完整支持 XML 的 web 瀏覽器中。
上面的代碼調(diào)用了名為 GetXmlHttpObject() 的函數(shù)。
該函數(shù)的作用是解決為不同瀏覽器創(chuàng)建不同 XMLHTTP 對(duì)象的問(wèn)題。
這一點(diǎn)在上一節(jié)中已經(jīng)解釋過(guò)了。
被 JavaScript 代碼調(diào)用的服務(wù)器頁(yè)面是一個(gè)名為 "gethint.php" 的簡(jiǎn)單服務(wù)器頁(yè)面。
"gethint.php" 中的代碼會(huì)檢查名字?jǐn)?shù)組,然后向客戶端返回對(duì)應(yīng)的名字:
<?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>0if (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 valuesif ($hint == ""){$response="no suggestion";}else{$response=$hint;}//output the responseecho $response;?>如果存在從 JavaScript 送來(lái)的文本 (strlen($q) > 0),則:
找到與 JavaScript 所傳送的字符相匹配的名字如果找到多個(gè)名字,把所有名字包含在 response 字符串中如果沒(méi)有找到匹配的名字,把 response 設(shè)置為 "no suggestion"如果找到一個(gè)或多個(gè)名字,把 response 設(shè)置為這些名字把 response 發(fā)送到 "txtHint" 占位符
網(wǎng)站欄目:PHP和AJAX請(qǐng)求-6.3PHP和AJAX
鏈接URL:http://newbst.com/article37/dghhosj.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、面包屑導(dǎo)航、電子商務(wù)、Google、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)