首页
所有分类
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 相关文章推荐
在mysql数据库原有字段后增加新内容
Nov 26 PHP
基于PHP CURL获取邮箱地址的详解
Jun 03 PHP
PHP中array_map与array_column之间的关系分析
Aug 19 PHP
又一个PHP实现的冒泡排序算法分享
Aug 21 PHP
php使用cookie实现记住登录状态
Apr 27 PHP
PHP预定义变量9大超全局数组用法详解
Apr 23 PHP
PHP生成短网址方法汇总
Jul 12 PHP
php自定义函数实现二维数组排序功能
Jul 20 PHP
PHP中include/require/include_once/require_once使用心得
Aug 28 PHP
PHP中创建和编辑Excel表格的方法
Sep 13 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
Sep 28 PHP
PHP抽象类与接口的区别实例详解
May 09 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
负载均衡(6) http(6) shell(3) 默认端口(3) 反向代理(2) 前后端分离(1) 动静分离(1) reload(1) 防盗链(1) 生成缩略图(1)
You might like
drupal 代码实现URL重写
2011/05/04 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
laravel入门知识点整理
2020/09/15 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
Python获取时间戳代码实例
2019/09/24 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
python 8种必备的gui库
2020/08/27 Python
MCAKE蛋糕官方网站：一直都是巴黎的味道
2018/02/06 全球购物
青年文明号事迹材料
2014/01/18 职场文书
学生宿舍管理制度
2014/01/30 职场文书
五一促销活动总结
2014/07/01 职场文书
授权委托书（法人单位用）
2014/09/29 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
新学期主题班会
2015/08/17 职场文书
如何写好开幕词？
2019/06/24 职场文书
Python办公自动化之Excel（中）
2021/05/24 Python
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS