首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

PHP+原生态ajax实现的省市联动功能详解

Posted in PHP onAugust 15, 2017

本文实例讲述了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" 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);
?>

(小例子二)

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:创建对象 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;
?>

希望本文所述对大家PHP程序设计有所帮助。

PHP+原生态ajax实现的省市联动功能详解

- Author -

风火程序员

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
初学者入门：细述PHP4的核心Zend
Sep 05 PHP
不用数据库的多用户文件自由上传投票系统(2)
Oct 09 PHP
新手学PHP之数据库操作详解及乱码解决！
Jan 02 PHP
Ping服务的php实现方法,让网站快速被收录
Feb 04 PHP
php比较多维数组中值的大小排序实现代码
Sep 08 PHP
PHP rawurlencode与urlencode函数的深入分析
Jun 08 PHP
php对二维数组按指定键值key排序示例代码
Nov 26 PHP
PHP判断上传文件类型的解决办法
Oct 20 PHP
开启PHP的伪静态模式
Dec 31 PHP
thinkPHP简单实现多个子查询语句的方法
Dec 05 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
Jun 21 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
Jul 10 PHP
laravel学习笔记之模型事件的几种用法示例
Aug 15 #PHP
PHP实现的回溯算法示例
Aug 15 #PHP
php简单中奖算法(实例)
Aug 15 #PHP
PHP实现的随机红包算法示例
Aug 14 #PHP
详解PHP中的 input属性（隐藏 只读 限制）
Aug 14 #PHP
IOS 开发之NSDictionary转换成JSON字符串
Aug 14 #PHP
PHP+AjaxForm异步带进度条上传文件实例代码
Aug 14 #PHP
沙特阿拉伯购物网站(9) 卡塔尔购物网站(3) 波兰购物网站(52) 秘鲁购物网站(1) 新西兰购物网站(42) 菲律宾购物网站(13) 斯洛伐克购物网站(7) 捷克购物网站(26) 智利购物网站(5) 匈牙利购物网站(11)
You might like
一个显示天气预报的程序
2006/10/09 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
onpropertypchange
2006/07/01 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
js实现鼠标拖曳效果
2020/12/30 Javascript
Django查询数据库的性能优化示例代码
2017/09/24 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
Python Serial串口基本操作（收发数据）
2020/11/06 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
夜大自我鉴定
2013/10/31 职场文书
初三政治教学反思
2014/01/30 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python