溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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);open()的第一個參數是HTTP請求方式—GET，POST或任何服務器所支持的您想調用的方式。按照HTTP規范，該參數要大寫；否則，某些瀏覽器(如Firefox)可能無法處理請求。
第二個參數是請求頁面的URL。
第三個參數設置請求是否為異步模式。如果是TRUE，JavaScript函數將繼續執行，而不等待服務器響應。這就是"AJAX"中的"A"。
服務器的響應
這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。可以將對象的onreadystatechange屬性設置為要使用的JavaScript的函數名，如下所示：
xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript創建的函數名，注意不要寫成FunctionName()，當然我們也可以直接將JavaScript代碼創建在onreadystatechange之后，例如：
xmlhttp_request.onreadystatechange = function(){
// JavaScript代碼段
};首先要檢查請求的狀態。只有當一個完整的服務器響應已經收到了，函數才可以處理該響應。XMLHttpRequest 提供了readyState屬性來對服務器響應進行判斷。
readyState的取值如下：
0 (未初始化)
1 (正在裝載)
2 (裝載完畢)
3 (交互中)
4 (完成)
所以只有當readyState=4時，一個完整的服務器響應已經收到了，函數才可以處理該響應。具體代碼如下：
if (http_request.readyState == 4) {
// 收到完整的服務器響應
}else {
// 沒有收到完整的服務器響應
}當readyState=4時，一個完整的服務器響應已經收到了，接著，函數會檢查HTTP服務器響應的狀態值。完整的狀態取值可參見W3C文檔。當HTTP服務器響應的值為200時，表示狀態正常。
處理從服務器得到的數據
有兩種方式可以得到這些數據：
(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" ></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);
?>(小例子二)
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:創建對象 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
<?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:創建對象 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
<?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;
?>1、執行速度快。2、具有很好的開放性和可擴展性。3、PHP支持多種主流與非主流的數據庫。4、面向對象編程：PHP提供了類和對象。5、版本更新速度快。6、具有豐富的功能。7、可伸縮性。8、功能全面，包括圖形處理、編碼與解碼、壓縮文件處理、xml解析等。
以上是“PHP+原生態ajax如何實現的省市聯動功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
