PHP教程：PHP+原生态ajax实现的省市联动功能详解
|
《PHP教程：PHP+原生态ajax实现的省市联动功能详解》要点： 本文实例讲述了PHP+原生态ajax实现的省市联动功能.分享给大家供大家参考,具体如下：PHP学习 Ajax的核心是JavaScript对象XmlHttpRequest.该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术.简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户.PHP学习 XMLHttpRequestPHP学习 XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端,但并不会打断用户当前的操作.使用XMLHttpRequest传送的数据可以是任何格式,虽然从名字上建议是XML格式的数据.PHP学习 开发人员应该已经熟悉了许多其他XML相关的技术.XPath可以访问XML文档中的数据,但理解XML DOM是必须的.类似的,XSLT是最简单而快速的从XML数据生成HTML或XML的方式.许多开发人员已经熟悉Xpath和XSLT,因此AJAX选择XML作为数据交换格式是有意义的.XSLT可以被用在客户端和服务端,它能够减少大量的用JavaScript编写的应用逻辑. Internet 5.0-6.0:PHP学习
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及以上:PHP学习 xmlhttp_request = new XMLHttpRequest(); 自动判断的代码:PHP学习
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类的方法写成如下形式：PHP学习
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;
}
发送请求PHP学习 可以调用HTTP请求类的open()和send()方法,如下所示：PHP学习
xmlhttp_request.open('GET',URL,true);
xmlhttp_request.send(null);
第二个参数是请求页面的URL.PHP学习 第三个参数设置请求是否为异步模式.如果是TRUE,JavaScript函数将继续执行,而不等待服务器响应.这就是"AJAX"中的"A".PHP学习 服务器的响应PHP学习 这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应.可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示：PHP学习 xmlhttp_request.onreadystatechange =FunctionName; FunctionName是用JavaScript创建的函数名,注意不要写成FunctionName(),当然我们也可以直接将JavaScript代码创建在onreadystatechange之后,例如：PHP学习
xmlhttp_request.onreadystatechange = function(){
// JavaScript代码段
};
首先要检查请求的状态.只有当一个完整的服务器响应已经收到了,函数才可以处理该响应.XMLHttpRequest 提供了readyState属性来对服务器响应进行判断.PHP学习 readyState的取值如下：PHP学习 0 (未初始化) 所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应.具体代码如下：PHP学习
if (http_request.readyState == 4) {
// 收到完整的服务器响应
}else {
// 没有收到完整的服务器响应
}
当readyState=4时,接着,函数会检查HTTP服务器响应的状态值.完整的状态取值可参见W3C文档.当HTTP服务器响应的值为200时,表示状态正常.PHP学习 处理从服务器得到的数据PHP学习 有两种方式可以得到这些数据：PHP学习 (1) 以文本字符串的方式返回服务器的响应 应用程序架构应用程序框架PHP学习 (小例子一)---------demo5.php--get传值方式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){
// 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.phpPHP学习
<?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);
?>
(小例子二)PHP学习 post传值方式demo6.phpPHP学习
<?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',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>
（编辑：安卓应用网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |