小編給大家分享一下PHP+原生態(tài)ajax如何實現(xiàn)的省市聯(lián)動功能,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
曹妃甸網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,曹妃甸網(wǎng)站設(shè)計制作,有大型網(wǎng)站制作公司豐富經(jīng)驗。已為曹妃甸數(shù)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢,請找那個售后服務(wù)好的曹妃甸做網(wǎng)站的公司定做!具體如下:
Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入,它是一種支持異步請求的技術(shù)。簡而言之,XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請求并處理響應(yīng),而不阻塞用戶。
XMLHttpRequest
XMLHttpRequest對象在大部分瀏覽器上已經(jīng)實現(xiàn)而且擁有一個簡單的接口允許數(shù)據(jù)從客戶端傳遞到服務(wù)端,但并不會打斷用戶當前的操作。使用XMLHttpRequest傳送的數(shù)據(jù)可以是任何格式,雖然從名字上建議是XML格式的數(shù)據(jù)。
開發(fā)人員應(yīng)該已經(jīng)熟悉了許多其他XML相關(guān)的技術(shù)。XPath可以訪問XML文檔中的數(shù)據(jù),但理解XML DOM是必須的。類似的,XSLT是最簡單而快速的從XML數(shù)據(jù)生成HTML或XML的方式。許多開發(fā)人員已經(jīng)熟悉Xpath和XSLT,因此AJAX選擇XML作為數(shù)據(jù)交換格式是有意義的。XSLT可以被用在客戶端和服務(wù)端,它能夠減少大量的用JavaScript編寫的應(yīng)用邏輯。
對于Internet Explorer瀏覽器:
Internet 5.0-6.0:
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0,5.0 xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP"); xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
Internet 7.0及以上:
xmlhttp_request = new XMLHttpRequest();
自動判斷的代碼:
var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
在實際應(yīng)用中,為了兼容多種不同版本的瀏覽器,一般將創(chuàng)建XMLHttpRequest類的方法寫成如下形式:
try { if (window.ActiveXObject) { for (var i = 5; i; i--) { try { if (i == 2) { xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP"); } else { xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP." + i + ".0"); xmlhttp_request.setRequestHeader("Content-Type", "text/xml"); xmlhttp_request.setRequestHeader("Charset", "gb2312"); } break; } catch(e) { xmlhttp_request = false; } } } else if (window.XMLHttpRequest) { xmlhttp_request = new XMLHttpRequest(); if (xmlhttp_request.overrideMimeType) { xmlhttp_request.overrideMimeType('text/xml'); } } } catch(e) { xmlhttp_request = false; }
發(fā)送請求
可以調(diào)用HTTP請求類的open()和send()方法,如下所示:
xmlhttp_request.open('GET',URL,true); xmlhttp_request.send(null);
open()
的第一個參數(shù)是HTTP請求方式—GET,POST或任何服務(wù)器所支持的您想調(diào)用的方式。按照HTTP規(guī)范,該參數(shù)要大寫;否則,某些瀏覽器(如Firefox)可能無法處理請求。
第二個參數(shù)是請求頁面的URL。
第三個參數(shù)設(shè)置請求是否為異步模式。如果是TRUE,JavaScript函數(shù)將繼續(xù)執(zhí)行,而不等待服務(wù)器響應(yīng)。這就是"AJAX"中的"A"。
服務(wù)器的響應(yīng)
這需要告訴HTTP請求對象用哪一個JavaScript函數(shù)處理這個響應(yīng)。可以將對象的onreadystatechange屬性設(shè)置為要使用的JavaScript的函數(shù)名,如下所示:
xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript創(chuàng)建的函數(shù)名,注意不要寫成FunctionName(),當然我們也可以直接將JavaScript代碼創(chuàng)建在onreadystatechange之后,例如:
xmlhttp_request.onreadystatechange = function(){ // JavaScript代碼段 };
首先要檢查請求的狀態(tài)。只有當一個完整的服務(wù)器響應(yīng)已經(jīng)收到了,函數(shù)才可以處理該響應(yīng)。XMLHttpRequest 提供了readyState屬性來對服務(wù)器響應(yīng)進行判斷。
readyState的取值如下:
0 (未初始化)
1 (正在裝載)
2 (裝載完畢)
3 (交互中)
4 (完成)
所以只有當readyState=4時,一個完整的服務(wù)器響應(yīng)已經(jīng)收到了,函數(shù)才可以處理該響應(yīng)。具體代碼如下:
if (http_request.readyState == 4) { // 收到完整的服務(wù)器響應(yīng) }else { // 沒有收到完整的服務(wù)器響應(yīng) }
當readyState=4時,一個完整的服務(wù)器響應(yīng)已經(jīng)收到了,接著,函數(shù)會檢查HTTP服務(wù)器響應(yīng)的狀態(tài)值。完整的狀態(tài)取值可參見W3C文檔。當HTTP服務(wù)器響應(yīng)的值為200時,表示狀態(tài)正常。
處理從服務(wù)器得到的數(shù)據(jù)
有兩種方式可以得到這些數(shù)據(jù):
(1) 以文本字符串的方式返回服務(wù)器的響應(yīng)
(2) 以XMLDocument對象方式返回響應(yīng)
應(yīng)用程序架構(gòu)應(yīng)用程序框架
(小例子一)---------demo5.php--get傳值方式
<?php header("content-type:text/html;charset=utf-8"); ?> <html> <head> <title>事件</title> </head> <body> <form action="#" method="post"> 用戶名<input type="text" value="" name="uname" id="uname"/> <span id="msg" ></span><br /> 密碼<input type="password" value="" name="upwd" id="upwd"/> <br /> <input type="submit" value="注冊"/> <br /> </form> <script type="text/javascript"> function $(id){ return document.getElementById(id); } //全局對象 var http = null; var uname = $("uname"); uname.onblur = function(){ //1:創(chuàng)建對象 xmlhttprequest 對象 if(window.XMLHttpRequest){ // FF GOOLE IE 8 9 10 http = new XMLHttpRequest(); }else{ //IE 6 7 http = new ActiveXObject("Micrsoft.XMLHTTP"); } //2:準備url地址與參數(shù) ?? bug var url = "demo51_do.php?uname="+$("uname").value; //3:定義處理返回結(jié)果方法 http.onreadystatechange = result; //4:發(fā)送請求 http.open('GET',url,true);//異步 http.send(null); }; //5:接收服務(wù)器返回結(jié)果 function result(){ //6:判斷狀態(tài) 接收完成 0 初始 1 發(fā)送 2處理 3 發(fā)送結(jié)果 //4:發(fā)送結(jié)果結(jié)束 //404 not found //200 ok 正確響就能 //7:判斷狀態(tài) 數(shù)據(jù)正確 if(http.readyState == 4 && http.status == 200){ //8:接收返回結(jié)果 {text/xml} var rs = http.responseText; //9:顯示結(jié)果 var ms = ""; if(rs == 1){ ms = "己存在"; }else{ ms = "可以使用"; } $("msg").innerHTML = ms; } } </script> </body> </html>
demo51_do.php
<?php header("content-type:text/html;charset=utf-8"); $uname = $_GET['uname']; $link = mysql_connect("127.0.0.1","root",""); mysql_query("set names utf8"); mysql_select_db("test"); $sql = "select count(*) from t_user where name = '{$uname}'"; $rs = mysql_query($sql); if($row = mysql_fetch_array($rs)){ if($row[0] == 1){ echo "1";//己存在 }else{ echo "0";//不存在可以使用 } } mysql_free_result($rs); mysql_close($link); ?>
(小例子二)
post傳值方式demo6.php
<?php header("content-type:text/html;charset=utf-8"); ?> <html> <head> <title>事件</title> </head> <body> <form action="#" method="post"> 用戶名<input type="text" value="" name="uname" id="uname"/> <span id="msg" ></span><br /> 密碼<input type="password" value="" name="upwd" id="upwd"/> <br /> <input type="submit" value="注冊"/> <br /> </form> <script type="text/javascript"> function $(id){ return document.getElementById(id); } var http = null; var uname = $("uname"); uname.onblur = function(){ //1:創(chuàng)建對象 xmlhttprequest 對象 if(window.XMLHttpRequest){ http = new XMLHttpRequest(); }else{ http = new ActiveXObject("Microsoft.XMLHTTP"); } //2:準備url地址與參數(shù) var url = "demo6_do.php"; //3:定義處理返回結(jié)果方法 http.onreadystatechange = result; //4:發(fā)送請求 http.open('POST',url,true); http.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); http.send("uname="+$("uname").value); }; //5:接收服務(wù)器返回結(jié)果 function result(){ //6:判斷狀態(tài) 接收完成 //7:判斷狀態(tài) 數(shù)據(jù)正確 if(http.readyState == 4 && http.status == 200){ //8:接收返回結(jié)果 {text/xml} var rs = http.responseText; var ms = ""; if(rs == 1){ ms = "己存在"; }else{ ms = "可以使用"; } //9:顯示結(jié)果 $("msg").innerHTML = ms; } } </script> </body> </html>
demo6_do.php
<?php header("content-type:text/html;charset=utf-8"); $uname = $_POST['uname']; $link = mysql_connect("127.0.0.1","root",""); mysql_query("set names utf8"); mysql_select_db("test"); $sql = "select count(*) from t_user where name = '{$uname}'"; $rs = mysql_query($sql); if($row = mysql_fetch_array($rs)){ if($row[0] == 1){ echo "1";//己存在 }else{ echo "0";//不存在可以使用 } } mysql_free_result($rs); mysql_close($link); ?>
(小例子三)----xml
demo7.php
<?php header("content-type:text/html;charset=utf-8"); ?> <html> <head> <title>事件</title> </head> <body> <form action="#"> 省 <select name="sel" id="sel"> <option value='0'>--請選擇--</option> <option value='1'>--河北--</option> <option value='2'>--河南--</option> <option value='3'>--廣東--</option> </select> 市 <select name="city" id="city"> <option value='0'>--請選擇--</option> </select> </form> <script type="text/javascript"> function $(id){ return document.getElementById(id); } var http = null; var sel = $("sel"); sel.onchange = function(){ //1:創(chuàng)建對象 xmlhttprequest 對象 if(window.XMLHttpRequest){ http = new XMLHttpRequest(); }else{ http = new ActiveXObject("Microsoft.XMLHTTP"); } //2:準備url地址與參數(shù) var url = "demo7_do.php?shen="+$("sel").value; //3:定義處理返回結(jié)果方法 http.onreadystatechange = result; //4:發(fā)送請求 http.open('GET',url,true); http.send(null); }; //5:接收服務(wù)器返回結(jié)果 function result(){ //6:判斷狀態(tài) 接收完成 //7:判斷狀態(tài) 數(shù)據(jù)正確 if(http.readyState == 4 && http.status == 200){ //8:接收返回結(jié)果 {text/xml} var rs = http.responseXML; var citys = rs.getElementsByTagName("city"); for(var i = 0;i < citys.length;i++){ var o = document.createElement("option"); o.value = ""+(i+1); o.text = citys[i].firstChild.data; $("city").add(o,null); } //9:顯示結(jié)果 } } </script> </body> </html>
demo7_do.php
<?php header("content-type:text/xml;charset=utf-8"); $shen = $_GET['shen']; if($shen == "1"){ $city = "<root><city>石家莊</city><city>保定</city><city>滄州</city></root>"; }else if($shen == "2"){ $city = "<root><city>鄭州</city><city>新鄉(xiāng)</city><city>登封</city></root>"; }else if($shen == "3"){ $city = "<root><city>東莞</city><city>中山</city><city>廣州</city></root>"; } echo $city; ?>
1、執(zhí)行速度快。2、具有很好的開放性和可擴展性。3、PHP支持多種主流與非主流的數(shù)據(jù)庫。4、面向?qū)ο缶幊蹋篜HP提供了類和對象。5、版本更新速度快。6、具有豐富的功能。7、可伸縮性。8、功能全面,包括圖形處理、編碼與解碼、壓縮文件處理、xml解析等。
以上是“PHP+原生態(tài)ajax如何實現(xiàn)的省市聯(lián)動功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁標題:PHP+原生態(tài)ajax如何實現(xiàn)的省市聯(lián)動功能-創(chuàng)新互聯(lián)
分享URL:http://jinyejixie.com/article34/dsiope.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站制作、移動網(wǎng)站建設(shè)、品牌網(wǎng)站制作、全網(wǎng)營銷推廣、網(wǎng)站設(shè)計、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容