PHP+原生態(tài)ajax實現(xiàn)的省市聯(lián)動功能詳解

更新時間：2017年08月15日 10:21:38 作者：風火程序員

這篇文章主要介紹了PHP+原生態(tài)ajax實現(xiàn)的省市聯(lián)動功能,較為詳細的分析了ajax交互的原理、實現(xiàn)方法以及php結合ajax實現(xiàn)省市聯(lián)動下拉菜單功能的相關操作技巧,需要的朋友可以參考下

本文實例講述了PHP+原生態(tài)ajax實現(xiàn)的省市聯(lián)動功能。分享給大家供大家參考，具體如下：

Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務器提出請求并處理響應，而不阻塞用戶。

XMLHttpRequest

XMLHttpRequest對象在大部分瀏覽器上已經(jīng)實現(xiàn)而且擁有一個簡單的接口允許數(shù)據(jù)從客戶端傳遞到服務端，但并不會打斷用戶當前的操作。使用XMLHttpRequest傳送的數(shù)據(jù)可以是任何格式，雖然從名字上建議是XML格式的數(shù)據(jù)。

開發(fā)人員應該已經(jīng)熟悉了許多其他XML相關的技術。XPath可以訪問XML文檔中的數(shù)據(jù)，但理解XML DOM是必須的。類似的，XSLT是最簡單而快速的從XML數(shù)據(jù)生成HTML或XML的方式。許多開發(fā)人員已經(jīng)熟悉Xpath和XSLT，因此AJAX選擇XML作為數(shù)據(jù)交換格式是有意義的。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");
}

在實際應用中，為了兼容多種不同版本的瀏覽器，一般將創(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ā)送請求

可以調用HTTP請求類的open()和send()方法，如下所示：

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

open()的第一個參數(shù)是HTTP請求方式—GET，POST或任何服務器所支持的您想調用的方式。按照HTTP規(guī)范，該參數(shù)要大寫；否則，某些瀏覽器(如Firefox)可能無法處理請求。

第二個參數(shù)是請求頁面的URL。

第三個參數(shù)設置請求是否為異步模式。如果是TRUE，JavaScript函數(shù)將繼續(xù)執(zhí)行，而不等待服務器響應。這就是"AJAX"中的"A"。

服務器的響應

這需要告訴HTTP請求對象用哪一個JavaScript函數(shù)處理這個響應?？梢詫ο蟮膐nreadystatechange屬性設置為要使用的JavaScript的函數(shù)名，如下所示：

xmlhttp_request.onreadystatechange =FunctionName;

FunctionName是用JavaScript創(chuàng)建的函數(shù)名，注意不要寫成FunctionName()，當然我們也可以直接將JavaScript代碼創(chuàng)建在onreadystatechange之后，例如：

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

首先要檢查請求的狀態(tài)。只有當一個完整的服務器響應已經(jīng)收到了，函數(shù)才可以處理該響應。XMLHttpRequest 提供了readyState屬性來對服務器響應進行判斷。

readyState的取值如下：

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

所以只有當readyState=4時，一個完整的服務器響應已經(jīng)收到了，函數(shù)才可以處理該響應。具體代碼如下：

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

當readyState=4時，一個完整的服務器響應已經(jīng)收到了，接著，函數(shù)會檢查HTTP服務器響應的狀態(tài)值。完整的狀態(tài)取值可參見W3C文檔。當HTTP服務器響應的值為200時，表示狀態(tài)正常。

處理從服務器得到的數(shù)據(jù)

有兩種方式可以得到這些數(shù)據(jù)：

(1) 以文本字符串的方式返回服務器的響應
(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:創(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:定義處理返回結果方法
 http.onreadystatechange = result;
//4:發(fā)送請求
 http.open('GET',url,true);//異步
 http.send(null);
 };
 //5:接收服務器返回結果
 function result(){
//6:判斷狀態(tài) 接收完成 0 初始 1 發(fā)送 2處理 3 發(fā)送結果
//4:發(fā)送結果結束
//404 not found
//200 ok 正確響就能
//7:判斷狀態(tài) 數(shù)據(jù)正確
 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);
?>

(小例子二)

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" 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:創(chuàng)建對象 xmlhttprequest 對象
 if(window.XMLHttpRequest){
  http = new XMLHttpRequest();
 }else{
  http = new ActiveXObject("Microsoft.XMLHTTP");
 }
//2:準備url地址與參數(shù)
 var url = "demo6_do.php";
//3:定義處理返回結果方法
 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:接收服務器返回結果
function result(){
//6:判斷狀態(tài) 接收完成
//7:判斷狀態(tài) 數(shù)據(jù)正確
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

<?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:定義處理返回結果方法
 http.onreadystatechange = result;
//4:發(fā)送請求
 http.open('GET',url,true);
 http.send(null);
 };
 //5:接收服務器返回結果
 function result(){
//6:判斷狀態(tài) 接收完成
//7:判斷狀態(tài) 數(shù)據(jù)正確
 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

<?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;
?>

更多關于PHP相關內容感興趣的讀者可查看本站專題：《PHP+ajax技巧與應用小結》、《PHP網(wǎng)絡編程技巧總結》、《PHP基本語法入門教程》、《php面向對象程序設計入門教程》、《php字符串(string)用法總結》、《php+mysql數(shù)據(jù)庫操作入門教程》及《php常見數(shù)據(jù)庫操作技巧匯總》

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

您可能感興趣的文章:

PHP防盜鏈代碼實例
這篇文章主要介紹了PHP防盜鏈的實現(xiàn)方法,是非常實用的技巧,需要的朋友可以參考下
2014-08-08
php中socket的用法詳解
這篇文章主要介紹了php中socket的用法,詳細講述了PHP進行socket通信的完整步驟,非常具有參考借鑒價值,需要的朋友可以參考下
2014-10-10
PHP函數(shù)之error_reporting(E_ALL ^ E_NOTICE)詳細說明
在看帝國cms的connect.php是發(fā)現(xiàn)第一句是error_reporting(E_ALL ^ E_NOTICE);以前也沒注意過這個語句，知道是設置錯誤提示的，但不清楚具體怎樣設置使用。下面從網(wǎng)上摘抄了些東西，總結了一下。
2011-07-07
PHP生成圖片縮略圖類示例
這篇文章主要介紹了PHP生成圖片縮略圖類,可實現(xiàn)針對圖形文件的屬性獲取、轉換、文件生成等功能,非常簡便實用,需要的朋友可以參考下
2017-01-01
PHP處理JSON字符串key缺少雙引號的解決方法
這篇文章主要介紹了PHP處理JSON字符串key缺少雙引號的解決方法,是非常常見的一類錯誤處理情況,需要的朋友可以參考下
2014-09-09
PHP中array_merge和array相加的區(qū)別分析
今天處理一個這樣的問題：如何獲取字符鍵名相同值不同的兩個數(shù)組值集合，用array_merge和數(shù)組相加都不可行，讓我認真比較了下PHP中array_merge和array相加的區(qū)別
2013-06-06
PHP數(shù)組操作簡單案例分析
這篇文章主要介紹了PHP數(shù)組操作,結合簡單實例形式分析了php數(shù)組轉換、排序、移除等相關操作技巧,需要的朋友可以參考下
2016-10-10
PHP的JSON封裝、轉變及輸出操作示例
這篇文章主要介紹了PHP的JSON封裝、轉變及輸出操作,結合實例形式分析了php常見的json封裝、解析、打印輸出相關操作技巧,需要的朋友可以參考下
2019-09-09
PHP 通過Socket收發(fā)十六進制數(shù)據(jù)的實現(xiàn)代碼
以下是對PHP中通過Socket收發(fā)十六進制數(shù)據(jù)的實現(xiàn)代碼進行了分析介紹。需要的朋友可以過來參考下
2013-08-08
ThinkPHP php 框架學習筆記
花了兩個多鐘在看 ThinkPHP 框架，不想太過深入的知道它的所有高深理論。單純想知道怎么可以用起來，可以快捷的搭建一個網(wǎng)站。所以是有選擇的看，二個鐘后還是一頭霧水。于是決定改變學習策略，上官方論壇看其它高人寫的民間教程，果然比官方的通俗易懂多了。
2009-10-10