北京赛车 pk10开奖记录_Toyou热购彩票官网
香港高速VIP雲機房火爆上線啦!無需備案溫患,開通即用!配套《巔雲自助建站系統3.0》將帶給您飛一般的可視化拖拽建站體驗變,歡迎免費體驗僚賂天。

建站專題

PHP+原生態ajax實現的省市聯動功能詳解

一佰互聯網站開發設計(www.yinxi.net) 發布日期 2019-04-26 09:01:52 瀏覽數: 30

本文實例講述了PHP+原生態ajax實現的省市聯動功能裴。分享給大家供大家參考慫,具體如下輯色︰

Ajax的核心是JavaScript對象XmlHttpRequest籃婁撓。該對象在Internet Explorer 5中首次引入報倫,它是一種支持異步請求的技術琺挽。簡而言之劇痰,XmlHttpRequest使您可以使用JavaScript向服務器提出請求並處理響應綱,而不阻塞用戶吼戊巧。

XMLHttpRequest

XMLHttpRequest對象在大部分瀏覽器上已經實現而且擁有一個簡單的接口允許數據從客戶端傳遞到服務端攀扔黎,但並不會打斷用戶當前的操作芍。使用XMLHttpRequest傳送的數據可以是任何格式貓,雖然從名字上建議是XML格式的數據疇判。

開發人員應該已經熟悉了許多其他XML相關的技術維散臨。XPath可以訪問XML文檔中的數據慈歪,但理解XML DOM是必須的畢毛。類似的處,XSLT是最簡單而快速的從XML數據生成HTML或XML的方式姓我骯。許多開發人員已經熟悉Xpath和XSLT蝕擒,因此AJAX選擇XML作為數據交換格式是有意義的話蔑。XSLT可以被用在客戶端和服務端略,它能夠減少大量的用JavaScript編寫的應用邏輯浦臥某。對于Internet Explorer瀏覽器偉踩技︰

Internet 5.0-6.0:

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0,5.0xmlhttp_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");}

在實際應用中罷題,為了兼容多種不同版本的瀏覽器釋釋棟,一般將創建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;}

發送請求

可以調用HTTP請求類的open()和send()方法哨,如下所示扮︰

xmlhttp_request.open("GET",URL,true);xmlhttp_request.send(null);

open()第一個參數是HTTP請求方式—GET孩,POST或任何服務器所支持的您想調用的方式俱。按照HTTP規範礙培冕,該參數要大寫;否則浮,某些瀏覽器(如Firefox)可能無法處理請求柑。

第二個參數是請求頁面的URL邯欄歡。

第三個參數設置請求是否為異步模式扇邊嶺。如果是TRUE保喜劑,JavaScript函數將繼續執行捎侖扮,而不等待服務器響應勢濾。這就是"AJAX"中的"A"畝煎咎。

服務器的響應

這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應蘑哦。可以將對象的onreadystatechange屬性設置為要使用的JavaScript的函數名河,如下所示無稼鴕︰

xmlhttp_request.onreadystatechange =FunctionName;

FunctionName是用JavaScript創建的函數名幾垃,注意不要寫成FunctionName()彪,當然我們也可北京赛车“你覺得怎麼樣?”博弈點18以直接將JavaScript代碼創建在onreadystatechange之後盆啤,例如參儈︰

xmlhttp_request.onreadystatechange = function(){// JavaScript代碼段};

首先要檢查請求的狀態典夸。只有當一個完整的服務器響應已經收到了嫉卻,函數才可以處理該響應脾驕。XMLHttpRequest 提供了readyState屬性來對服務器響應進行判斷衡笆宿。

readyState的取值如下拉拿︰

0 (未初始化)1 (正在裝載)2 (裝載完畢)3 (交互中)4 (完成)

所以只有當readyState=4時歸,一個完整的服務器響應已經收到了眯欺攔,函數才可以處理該響應楮。具體代碼如下牛劍蛂J

if (http_request.readyState == 4) {// 收到完整的服務器響應}else {// 沒有收到完整的服務器響應}

當readyState=4時道,一個完整的服務器響應已經收到了炕,接著鞋扁滅,函數會檢查HTTP服務器響應的狀態值沫睫每。完整的狀態取值可參見W3C文檔垛衫賒。當HTTP服務器響應的值為200時佳熬,表示狀態正常吾稠阿。

處理從服務器得到的數據

有兩種方式可以得到這些數據默擄︰

(1) 以文本字符串的方式返回服務器的響應(2) 以XMLDocument對象方式返回響應

應用程序架構應用程序框架

(小例子一)---------demo5.php--get傳值方式

<?phpheader("content-type:text/html;charset=big5");?><html> <head>  <title>事件</title> </head> <body> <form action="#" method="post">  用戶名<input type="text" value="" name="uname" id="uname"/> <span id="msg" style="color:red;"></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:創建對象 xmlhttprequest 對象 if(window.XMLHttpRequest){ // FF GOOLE IE 8 9 10  http = new XMLHttpRequest(); }else{ //IE 6 7  http = new ActiveXObject("Micrsoft.XMLHTTP"); }//2:準備url地址與參數 ?? bug var url = "demo51_do.php?uname="+$("uname").value;//3:定義處理返回結果方法 http.onreadystatechange = result;//4:發送請求 http.open("GET",url,true);//異步 http.send(null); }; //5:接收服務器返回結果 function result(){//6:判斷狀態 接收完成 0 初始 1 發送 2處理 3 發送結果//4:發送結果結束//404 not found//200 ok 正確響就能//7:判斷狀態 數據正確 if(http.readyState == 4 && http.status == 200){ //8:接收返回結果 {text/xml} var rs = http.responseText; //9:顯示結果 var ms = ""; if(rs == 1){  ms = "己存在"; }else{  ms = "可以使用"; } $("msg").innerHTML = ms; }}</script> </body></html>

demo51_do.php

<?phpheader("content-type:text/html;charset=big5");$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

<?phpheader("content-type:text/html;charset=big5");?><html> <head>  <title>事件</title> </head> <body> <form action="#" method="post">  用戶名<input type="text" value="" name="uname" id="uname"/> <span id="msg" style="color:red;"></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:創建對象 xmlhttprequest 對象 if(window.XMLHttpRequest){  http = new XMLHttpRequest(); }else{  http = new ActiveXObject("Microsoft.XMLHTTP"); }//2:準備url地址與參數 var url = "demo6_do.php";//3:定義處理返回結果方法 http.onreadystatechange = result;//4:發送請求 http.open("POST",url,true); http.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); http.send("uname="+$("uname").value);};//5:接收服務器返回結果function result(){//6:判斷狀態 接收完成//7:判斷狀態 數據正確if(http.readyState == 4 && http.status == 200){ //8:接收返回結果 {text/xml} var rs = http.responseText; var ms = ""; if(rs == 1){  ms = "己存在"; }else{  ms = "可以使用"; } //9:顯示結果 $("msg").innerHTML = ms;}}</script> </body></html>

demo6_do.php

<?phpheader("content-type:text/html;charset=big5");$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

<?phpheader("content-type:text/html;charset=big5");?><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:創建對象 xmlhttprequest 對象 if(window.XMLHttpRequest){ http = new XMLHttpRequest(); }else{ http = new ActiveXObject("Microsoft.XMLHTTP"); }//2:準備url地址與參數 var url = "demo7_do.php?shen="+$("sel").value;//3:定義處理返回結果方法 http.onreadystatechange = result;//4:發送請求 http.open("GET",url,true); http.send(null); }; //5:接收服務器返回結果 function result(){//6:判斷狀態 接收完成//7:判斷狀態 數據正確 if(http.readyState == 4 && http.status == 200){ //8:接收返回結果 {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:顯示結果 } }</script> </body></html>

demo7_do.php

<?phpheader("content-type:text/xml;charset=big5");$shen = $_GET["shen"];if($shen == "1"){ $city = "<root><city>石家莊</city><city>保定</city><city>滄州</city></root>";}else if($shen == "2"){ $city = "<root><city>鄭州</city><city>新鄉</city><city>登封</city></root>";}else if($shen == "3"){ $city = "<root><city>東莞</city><city>中山</city><city>廣州</city></root>";}echo $city;?>

更多關于PHP相關內容感興趣的讀者可查看本站專題鋼朵︰《PHP+ajax技巧與應用小結》久葷隻、《PHP網絡編程技巧總結》茹紀炒、《PHP基本語法入門教程》北京赛车“光緒1“留言完畢。”額、《php面向對象程序設計入門教程》寵嫌虎、《php字符串(string)用法總結》活祭俺、《php+mysql數據庫操作入門教程》及《php常見數據庫操作技巧匯總》

希望本文所述對大家PHP程序設計有所幫助娩奴。

一佰互聯是全國知名建站品牌服務商,我們有九年網站建設塹、網站制作閥點藏、網頁設計魂、php開發和域名注冊及虛擬主機服務經驗錄暢胖,提供的自助建站服務更是全國有名許據 。近年來還整合團隊優勢自主開發了可視化多用戶”巔雲建站系統“3.0平台版澗,拖拽排版網站制作設計痛恨伺,輕松實現pc站棘幢諾、手機微網站灤憊冷、小程序癸、APP一體化全網營銷網站建設 娥,已成功的為全國上百家網絡公司提供自助建站平台搭建服務衡。

相關新聞more

11
04月
想提高面試通過率?這10個常見問題的標準答案

之前UI黑客發表了一篇《面試了50多位UI設計師實修普,我總結了這些求職技巧!》的文章尾非強,在網上得到很多設計師的認可爬。文章列舉了我在面試的時候經常問... >>詳情

26
04月
PHP/HTML混寫的四種方式總結

PHP作為一款後端語言伯灤,為了輸出給瀏覽器讓瀏覽器呈現出來旱茹,無可避免的要輸出HTML代碼結舅敵,下文介紹下我用過的三種PHP/HTML混編方法1峰蛙、單... >>詳情

25
04月
PHP實現隨機數字廂僳桅、字母的驗證碼功能

可自定義生成驗證碼文字的大小桑化、數量細粕、干擾項等等慰茄,也可以自定義驗證文字的字體焊。僻。咸喝胯。廢話不多說寵,直接上代碼胚︰1士、classgd.class.ph... >>詳情

26
04月
PHP 中常量的知識整理

PHP中的常量分為自定義常量和系統常量常量特點嚏︰ 在設定以後嗅得插,常量的值無法更改 常量名不需要開頭的美元符號 ($) 作用域不影響對常量... >>詳情

營業執照. cdn加速服務 備案系統認證 網絡安全協會 我們的支付方式AAA認證

7x24小時服務電話:18581389571 傳真:023-85725751 免費建站交流群壬毒沏︰236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 網站投訴:
重慶楚捷科技有限公司 一佰互聯©版權所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保護,網站法律顧問泌歌︰ITLAW-莊毅雄律師
中華人民共和國信息產業部網站備案號:渝ICP備12000592號
北京赛车热购彩票 pk10开奖