這篇文章主要介紹了PHP 原始生態ajax實現的省市聯動功能,較為詳細的分析了ajax交互的原理、實現方法以及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.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"); }
在實際應用中,為了相容於多種不同版本的瀏覽器,一般將建立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);
的
第一個參數
是請求頁面的URL。
第三個參數
伺服器的回應
這需要告訴HTTP請求物件用哪一個JavaScript函數處理這個回應。可以將物件的onreadystatechange屬性設定為要使用的JavaScript的函數名,如下所示:
#
xmlhttp_request.onreadystatechange =FunctionName;
xmlhttp_request.onreadystatechange = function(){ // JavaScript代码段 };
#首先要檢查請求的狀態。只有當一個完整的伺服器回應已經收到了,函數才可以處理該回應。 XMLHttpRequest 提供了readyState屬性來對伺服器回應進行判斷。
readyState的取值如下:0 (未初始化)
1 (正在裝載)2 (裝載完畢)
3 (交互中)4 (完成)
if (http_request.readyState == 4) { // 收到完整的服务器响应 }else { // 没有收到完整的服务器响应 }
#當readyState=4時,一個完整的伺服器回應已經收到了,接著,函數會檢查HTTP伺服器回應的狀態值。完整的狀態取值可參考W3C文檔。當HTTP伺服器回應的值為200時,表示狀態正常。
有兩種方式可以得到這些資料:
(2) 以XMLDocument物件方式回傳回應
應用程式架構應用程式框架
(小範例一)------- --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" 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
<?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); ?>
<?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" 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>
<?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); ?>
<?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:创建对象 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>
<?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>新乡</city><city>登封</city></root>"; }else if($shen == "3"){ $city = "<root><city>东莞</city><city>中山</city><city>广州</city></root>"; } echo $city; ?>
#
以上是PHP+ajax實現的省市連動功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!