新用户注册恢复喜悦村十周年
1234
返回列表 回复 发帖
只爱一个人

论坛元老

Rank: 8Rank: 8
1#
打印
tT
发表于 2006-8-26 12:46 PM | 只看该作者

AJAX的实现

ajax可以说的上当今很火的技术啦.
在村子里经常看到有人问xajax的技术,说实话,我觉得那东西太麻烦,用起来太费事.

ajax本身实现的机制不是很难,难的应该是在后期的javascript处理返回的responseText,responseXml

ajax本身的操作过程无外是:

1.构建一个xmlHTTP对像
2.通过xmlHTTP的同步或是异步方式发送数据(大部分都是异步方式)
3.如果是异步方式检查xmlHttp的状态变化
4.当状态变到readyState==4,而且status==200说明发送数据成功
5.这时候再通过javascript处理xmlHTTP的responseText或是responseXml(这两者是同时存在的)

下面来实现这个过程
1.构建一个xmlHTTP的对像
  1. function createRequest(){
  2.         if(typeof XMLHttpRequest!="undefined")        {
  3.                 return new XMLHttpRequest();
  4.         }else if(typeof ActiveXObject!="undefined"){
  5.                 var xmlHttp_ver  = false;
  6.                 var xmlHttp_vers = ["MSXML2.XmlHttp.5.0","MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.3.0","MSXML2.XmlHttp","Microsoft.XmlHttp"];
  7.                 if(!xmlHttp_ver){
  8.                         for(var i=0;i<xmlHttp_vers.length;i++){
  9.                                 try{
  10.                                         new ActiveXObject(xmlHttp_vers[i]);
  11.                                         xmlHttp_ver = xmlHttp_vers[i];
  12.                                         break;
  13.                                 }catch(oError){;}
  14.                         }
  15.                 }
  16.                 if(xmlHttp_ver){
  17.                         return new ActiveXObject(xmlHttp_ver);
  18.                 }else{
  19.                         throw new Error("Could not create XML HTTP Request.");
  20.                 }
  21.         }else{
  22.                 throw new Error("Your browser doesn't support an XML HTTP Request.");
  23.         }
  24. }
复制代码
注意：xmlHttp_vers 应该从版本高的往版本低的写，这样建立对像的数据调用的是你机子上安装过的最高版本的MSXML2.XmlHttp


第二步发送数据
这里主要是调用xmlHttp的open方法和send方法来处理
xmlHTTP的方法可以到www.xmlhttp.cn查看（我以前发过一个chm的，但因为版权被村长删除啦，谁要是想要，回信，我发一下）
下面是用post的方法发送数据
  1. var xmlHttp;
  2. xmlHttp = createRequest();
  3. function sendPostRequest()
  4. {   
  5.         var shownum=document.getElementById("shownum").value;// html页面中一个id为shownum的input表单
  6.         var url = "show.php";//要发送到的URL
  7.         var queryString = "shownum" + "=" + shownum;
  8.         //向服务端发送请求
  9.         xmlHttp.open("post", url, true);//这里的第三个参数为true为异步方式处理
  10.         xmlHttp.onreadystatechange = showData;//异步方式处理，当状态改变时会调用onreadystatechange属性指定的回调函数showData
  11.         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");//这一句是用post方法发送的时候必须写的
  12.         xmlHttp.send(queryString);//发送你构建成的数据,如果为“get”方法时，这里可以写成xmlHttp.send(NULL);
  13. }
复制代码
第三步

当状态改变时会调用onreadystatechange属性指定的回调函数showData，来来检查状态变化

xmlHTTP.readyState 和xmlHTTP.status 可以去查手册，看一下就知道
  1. function showData()
  2. {
  3.         var msg=document.getElementById("status");
  4.                      //第４步
  5.         if(xmlHttp.readyState==4)
  6.         {
  7.                 if(xmlHttp.status==200)
  8.                 {
  9. 　　　　　　　　　　　　　　　　//只有当readyState为4并且status为200时，才表示符合要求
  10.                                                                //下面这一句话，就相当于上面说的第５步，处理返回的结果
  11.                         msg.innerHTML =  xmlHttp.responseText;
  12.                 }
  13.         }
  14.         else
  15.         {
  16.                 switch(xmlHttp.readyState)
  17.                 {
  18.                 case 0:
  19.                         msg.innerHTML="未初始化...";
  20.                         break;
  21.                 case 1:
  22.                         msg.innerHTML="加载中...";
  23.                         break;
  24.                 case 2:
  25.                         msg.innerHTML="连接完成...";
  26.                         break;
  27.                 case 3:
  28.                         msg.innerHTML="交换数据...";
  29.                         break;
  30.                 default:
  31.                         break;
  32.                 }
  33.         }
  34. }
复制代码
到这里就一次xmlhttp发送异步调用数据也就算完成啦
完整的代码是
  1. <html>
  2. <head>
  3. <title>
  4. ajax
  5. </title>
  6. <script language="javascript">
  7. function createRequest(){
  8.         if(typeof XMLHttpRequest!="undefined")        {
  9.                 return new XMLHttpRequest();
  10.         }else if(typeof ActiveXObject!="undefined"){
  11.                 var xmlHttp_ver  = false;
  12.                 var xmlHttp_vers = ["MSXML2.XmlHttp.5.0","MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.3.0","MSXML2.XmlHttp","Microsoft.XmlHttp"];
  13.                 if(!xmlHttp_ver){
  14.                         for(var i=0;i<xmlHttp_vers.length;i++){
  15.                                 try{
  16.                                         new ActiveXObject(xmlHttp_vers[i]);
  17.                                         xmlHttp_ver = xmlHttp_vers[i];
  18.                                         break;
  19.                                 }catch(oError){;}
  20.                         }
  21.                 }
  22.                 if(xmlHttp_ver){
  23.                         return new ActiveXObject(xmlHttp_ver);
  24.                 }else{
  25.                         throw new Error("Could not create XML HTTP Request.");
  26.                 }
  27.         }else{
  28.                 throw new Error("Your browser doesn't support an XML HTTP Request.");
  29.         }
  30. }

  32. var xmlHttp;

  34. function sendPostRequest()
  35. {   
  36.                      xmlHttp = createRequest();
  37.         var shownum=document.getElementById("shownum").value;// html页面中一个id为shownum的input表单
  38.         var url = "show.php";//要发送到的URL
  39.         var queryString = "shownum" + "=" + shownum;
  40.         //向服务端发送请求
  41.         xmlHttp.open("post", url, true);//这里的第三个参数为true为异步方式处理
  42.         xmlHttp.onreadystatechange = showData;//异步方式处理，当状态改变时会调用onreadystatechange属性指定的回调函数showData
  43.         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");//这一句是用post方法发送的时候必须写的
  44.         xmlHttp.send(queryString);//发送你构建成的数据,如果为“get”方法时，这里可以写成xmlHttp.send(NULL);
  45. }
  46. function showData()
  47. {
  48.         var msg=document.getElementById("status");
  49.                      //第４步
  50.         if(xmlHttp.readyState==4)
  51.         {
  52.                 if(xmlHttp.status==200)
  53.                 {
  54. 　　　　　　　　　　　　　　　　//只有当readyState为4并且status为200时，才表示符合要求
  55.                                                                //下面这一句话，就相当于上面说的第５步，处理返回的结果
  56.                         msg.innerHTML =  xmlHttp.responseText;
  57.                 }
  58.         }
  59.         else
  60.         {
  61.                 switch(xmlHttp.readyState)
  62.                 {
  63.                 case 0:
  64.                         msg.innerHTML="未初始化...";
  65.                         break;
  66.                 case 1:
  67.                         msg.innerHTML="加载中...";
  68.                         break;
  69.                 case 2:
  70.                         msg.innerHTML="连接完成...";
  71.                         break;
  72.                 case 3:
  73.                         msg.innerHTML="交换数据...";
  74.                         break;
  75.                 default:
  76.                         break;
  77.                 }
  78.         }
  79. }

  81. </script>
  82. </head>
  83. <body>
  84. <div>要发送的数据：<input name="shownum" id="shownum" type="text"><input type="button" name="search" value="发送" onClick="sendPostRequest()"></div>
  85. <div id="status"></div>
  86. </body>
  87. </html>
复制代码
同一目录下要有一个show.php
内容为
[php]
<?php
$shownum = $_POST["shownum"];
echo $shownum;
?>
[/php]
收藏 分享 评分
回复 引用

订阅 TOP

只爱一个人

论坛元老

Rank: 8Rank: 8
2#
发表于 2006-8-26 12:48 PM | 只看该作者
想了一下，这还是我来村子几年，第一次写东西
回复 引用

TOP

rjp_ww

注册会员

Rank: 2
3#
发表于 2006-8-26 02:10 PM | 只看该作者
村长的“金元政策”搞的不错，不少人都浮出水面，发帖，也出了很多好帖，不错，支持一下。
以后有空，也参与参与。
　乐色八
回复 引用

TOP

h058

新手上路

Rank: 1
4#
发表于 2006-8-26 07:46 PM | 只看该作者
不得不顶！！
回复 引用

TOP

unspace

版主

Rank: 7Rank: 7Rank: 7
5#
发表于 2006-8-28 06:35 PM | 只看该作者
不能不顶！
北京比上海好
回复 引用

TOP

游戏人间

版主

Rank: 7Rank: 7Rank: 7
6#
发表于 2006-8-29 09:11 AM | 只看该作者
对这个不熟悉正想看看.
风云山庄  群号：6025396/6025252/19520091 强者并非压倒一切，而是不被一切压倒!
回复 引用

TOP

qh663

高级会员

Rank: 4
7#
发表于 2006-8-29 10:19 AM | 只看该作者
谢谢“只爱一个人”的精彩文章!

赋值关键点在于，使用返回值改变原有值
document.getElementById("status").innerHTML =  xmlHttp.responseText;
在实际应用中，发现很少人使用js函数的参数作为引用ID名称与send地址。不知是不是由于js本身的习惯性问题还是出于其它原因。使用自定义函数的参数可以让程序更加通用吧，重用率比较高。
五百多篇PHP学习资料
喜悦村BLOG
php团队接兼职项目QQ：80031807
PHP群:768844
回复 引用

TOP

ChinaID

中级会员

Rank: 3Rank: 3
8#
发表于 2006-8-29 10:46 AM | 只看该作者
已经很久没有出这样文章了，今天总算是有点意思，看到不少新鲜点的东西。
虽然AJAX对做些小玩意儿有用，不过总算还是有用，支持一下（因为我的网站也用到的Ajax）。
free, take dream fly.
回复 引用

TOP

只爱一个人

论坛元老

Rank: 8Rank: 8
9#
发表于 2006-8-29 10:53 AM | 只看该作者
多谢大家支持,嘿嘿
回复 引用

TOP

tl84

乞丐
10#
发表于 2006-8-29 02:32 PM | 只看该作者
顶一下！！！
回复 引用

TOP

1234
返回列表