原生态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.0xmlHTTP_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,Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6,IE5xmlhttp=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',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","");
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',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;
?>

原生态ajax的省市联动

相关推荐