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 相关文章推荐
最省空间的计数器
Oct 09 PHP
php 什么是PEAR?(第二篇)
Mar 19 PHP
深入分析php之面向对象
May 15 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
Jun 27 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
Aug 20 PHP
php中分页及SqlHelper类用法实例
Jan 12 PHP
自制PHP框架之路由与控制器
May 07 PHP
PHP使用PDO访问oracle数据库的步骤详解
Sep 29 PHP
thinkPHP3.2.2框架行为扩展及demo示例
Jun 19 PHP
PHP的PDO预处理语句与存储过程
Jan 27 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
Apr 15 PHP
php变量与字符串的增删改查操作示例
May 07 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
You might like
php将字符串转换成16进制的方法
2015/03/17 PHP
php限制ip地址范围的方法
2015/03/31 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
Node.js的包详细介绍
2015/01/14 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
Python实现FTP文件传输的实例
2019/07/07 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
django 类视图的使用方法详解
2019/07/24 Python
django中的图片验证码功能
2019/09/18 Python
python实现简单图书管理系统
2019/11/22 Python
Pytorch之Variable的用法
2019/12/31 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
管理站站长岗位职责
2013/11/27 职场文书
会计学生自我鉴定
2014/02/06 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
护校行动方案
2014/05/31 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
单位工作证明
2014/10/07 职场文书
走进毛泽东观后感
2015/06/04 职场文书
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript