喜悦国际村 
» 游客:  注册 | 登录 | 搜索 | 统计 | 喜悦证交所 | 帮助

RSS 订阅当前论坛  

【村长请吃饭啊】 ---北京诚聘--- 【你还在犹豫吗?】

上一主题 下一主题
 34  1/4  1  2  3  4  > 
     
标题: [原创] AJAX的实现  
 
只爱一个人 (只爱一个人)
论坛元老
Rank: 8Rank: 8
超级管理员



UID 29639
精华 0
积分 3815
帖子 1604
金钱 3815 喜悦币
威望 0
人脉 0
阅读权限 90
注册 2004-6-26
状态 离线
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的对像

function createRequest(){
        if(typeof XMLHttpRequest!="undefined")        {
                return new XMLHttpRequest();
        }else if(typeof ActiveXObject!="undefined"){
                var xmlHttp_ver  = false;
                var xmlHttp_vers = ["MSXML2.XmlHttp.5.0","MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.3.0","MSXML2.XmlHttp","Microsoft.XmlHttp"];
                if(!xmlHttp_ver){
                        for(var i=0;i<xmlHttp_vers.length;i++){
                                try{
                                        new ActiveXObject(xmlHttp_vers[i]);
                                        xmlHttp_ver = xmlHttp_vers[i];
                                        break;
                                }catch(oError){;}
                        }
                }
                if(xmlHttp_ver){
                        return new ActiveXObject(xmlHttp_ver);
                }else{
                        throw new Error("Could not create XML HTTP Request.");
                }
        }else{
                throw new Error("Your browser doesn't support an XML HTTP Request.");
        }
}
注意:xmlHttp_vers 应该从版本高的往版本低的写,这样建立对像的数据调用的是你机子上安装过的最高版本的MSXML2.XmlHttp


第二步发送数据
这里主要是调用xmlHttp的open方法和send方法来处理
xmlHTTP的方法可以到www.xmlhttp.cn查看(我以前发过一个chm的,但因为版权被村长删除啦,谁要是想要,回信,我发一下)
下面是用post的方法发送数据

var xmlHttp;
xmlHttp = createRequest();
function sendPostRequest()
{   
        var shownum=document.getElementById("shownum").value;// html页面中一个id为shownum的input表单
        var url = "show.php";//要发送到的URL
        var queryString = "shownum" + "=" + shownum;
        //向服务端发送请求
        xmlHttp.open("post", url, true);//这里的第三个参数为true为异步方式处理
        xmlHttp.onreadystatechange = showData;//异步方式处理,当状态改变时会调用onreadystatechange属性指定的回调函数showData
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");//这一句是用post方法发送的时候必须写的
        xmlHttp.send(queryString);//发送你构建成的数据,如果为“get”方法时,这里可以写成xmlHttp.send(NULL);
}
第三步

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

xmlHTTP.readyState 和xmlHTTP.status 可以去查手册,看一下就知道

function showData()
{
        var msg=document.getElementById("status");
                     //第4步
        if(xmlHttp.readyState==4)
        {
                if(xmlHttp.status==200)
                {
                //只有当readyState为4并且status为200时,才表示符合要求
                                                               //下面这一句话,就相当于上面说的第5步,处理返回的结果
                        msg.innerHTML =  xmlHttp.responseText;
                }
        }
        else
        {
                switch(xmlHttp.readyState)
                {
                case 0:
                        msg.innerHTML="未初始化...";
                        break;
                case 1:
                        msg.innerHTML="加载中...";
                        break;
                case 2:
                        msg.innerHTML="连接完成...";
                        break;
                case 3:
                        msg.innerHTML="交换数据...";
                        break;
                default:
                        break;
                }
        }
}
到这里就一次xmlhttp发送异步调用数据也就算完成啦
完整的代码是

<html>
<head>
<title>
ajax
</title>
<script language="javascript">
function createRequest(){
        if(typeof XMLHttpRequest!="undefined")        {
                return new XMLHttpRequest();
        }else if(typeof ActiveXObject!="undefined"){
                var xmlHttp_ver  = false;
                var xmlHttp_vers = ["MSXML2.XmlHttp.5.0","MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.3.0","MSXML2.XmlHttp","Microsoft.XmlHttp"];
                if(!xmlHttp_ver){
                        for(var i=0;i<xmlHttp_vers.length;i++){
                                try{
                                        new ActiveXObject(xmlHttp_vers[i]);
                                        xmlHttp_ver = xmlHttp_vers[i];
                                        break;
                                }catch(oError){;}
                        }
                }
                if(xmlHttp_ver){
                        return new ActiveXObject(xmlHttp_ver);
                }else{
                        throw new Error("Could not create XML HTTP Request.");
                }
        }else{
                throw new Error("Your browser doesn't support an XML HTTP Request.");
        }
}

var xmlHttp;

function sendPostRequest()
{   
                     xmlHttp = createRequest();
        var shownum=document.getElementById("shownum").value;// html页面中一个id为shownum的input表单
        var url = "show.php";//要发送到的URL
        var queryString = "shownum" + "=" + shownum;
        //向服务端发送请求
        xmlHttp.open("post", url, true);//这里的第三个参数为true为异步方式处理
        xmlHttp.onreadystatechange = showData;//异步方式处理,当状态改变时会调用onreadystatechange属性指定的回调函数showData
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");//这一句是用post方法发送的时候必须写的
        xmlHttp.send(queryString);//发送你构建成的数据,如果为“get”方法时,这里可以写成xmlHttp.send(NULL);
}
function showData()
{
        var msg=document.getElementById("status");
                     //第4步
        if(xmlHttp.readyState==4)
        {
                if(xmlHttp.status==200)
                {
                //只有当readyState为4并且status为200时,才表示符合要求
                                                               //下面这一句话,就相当于上面说的第5步,处理返回的结果
                        msg.innerHTML =  xmlHttp.responseText;
                }
        }
        else
        {
                switch(xmlHttp.readyState)
                {
                case 0:
                        msg.innerHTML="未初始化...";
                        break;
                case 1:
                        msg.innerHTML="加载中...";
                        break;
                case 2:
                        msg.innerHTML="连接完成...";
                        break;
                case 3:
                        msg.innerHTML="交换数据...";
                        break;
                default:
                        break;
                }
        }
}

</script>
</head>
<body>
<div>要发送的数据:<input name="shownum" id="shownum" type="text"><input type="button" name="search" value="发送" onClick="sendPostRequest()"></div>
<div id="status"></div>
</body>
</html>
同一目录下要有一个show.php
内容为

<?php
$shownum 
$_POST["shownum"];
echo 
$shownum;
?>
2006-8-26 12:46 PM#1
查看资料  访问主页  Blog  发短消息  顶部
 
只爱一个人 (只爱一个人)
论坛元老
Rank: 8Rank: 8
超级管理员



UID 29639
精华 0
积分 3815
帖子 1604
金钱 3815 喜悦币
威望 0
人脉 0
阅读权限 90
注册 2004-6-26
状态 离线
[推荐阅读] xajax上传图片??
想了一下,这还是我来村子几年,第一次写东西
2006-8-26 12:48 PM#2
查看资料  访问主页  Blog  发短消息  顶部
 
rjp_ww
注册会员
Rank: 2
初级会员


UID 67694
精华 0
积分 159
帖子 416
金钱 159 喜悦币
威望 0
人脉 0
阅读权限 20
注册 2006-1-2
状态 离线
[推荐阅读] ajax的问题
村长的“金元政策”搞的不错,不少人都浮出水面,发帖,也出了很多好帖,不错,支持一下。
以后有空,也参与参与。
2006-8-26 02:10 PM#3
查看资料  发短消息  顶部
 
h058 (h058)
新手上路
Rank: 1
初级会员



UID 30667
精华 0
积分 33
帖子 37
金钱 33 喜悦币
威望 0
人脉 0
阅读权限 10
注册 2004-8-24
状态 离线
[推荐阅读] [分享]发几个经典asp源码,教你十分钟学会做网站
不得不顶!!
2006-8-26 07:46 PM#4
查看资料  发短消息  顶部
 
unspace (未知空间)
版主
Rank: 7Rank: 7Rank: 7
百万富翁


UID 67567
精华 0
积分 48832
帖子 4912
金钱 47755 喜悦币
威望 0
人脉 1077
阅读权限 100
注册 2005-12-28
来自 吉林
状态 离线
[推荐阅读] 良精多语言多风格网站管理系统完美破解版(请收录)
不能不顶!



准备学C中,只是准备
2006-8-28 06:35 PM#5
查看资料  访问主页  Blog  发短消息  顶部
 
游戏人间
版主
Rank: 7Rank: 7Rank: 7
风云山庄大少爷


UID 62639
精华 2
积分 14310
帖子 7146
金钱 14171 喜悦币
威望 20
人脉 119
阅读权限 100
注册 2004-12-21
来自 广西人在北京
状态 离线
[推荐阅读] php的效率问题,请大家看我以下的目录为什么不可以删除
对这个不熟悉正想看看.



 
群号:6025396/6025252/19520091(广西PHP交流/PHP高级编程/算法交流)、饿踢Blog

寧可在嘗試中失敗,也不在保守中成功!

不為失敗找理由,只為成功找方法!
 
2006-8-29 09:11 AM#6
查看资料  访问主页  Blog  发短消息  顶部
 
qh663
版主
Rank: 7Rank: 7Rank: 7
中级会员


UID 30020
精华 0
积分 546
帖子 580
金钱 546 喜悦币
威望 0
人脉 0
阅读权限 100
注册 2004-7-13
来自 河源
状态 离线
[推荐阅读] 求教 ftp上传的问题
谢谢“只爱一个人”的精彩文章!

赋值关键点在于,使用返回值改变原有值
document.getElementById("status").innerHTML =  xmlHttp.responseText;
在实际应用中,发现很少人使用js函数的参数作为引用ID名称与send地址。不知是不是由于js本身的习惯性问题还是出于其它原因。使用自定义函数的参数可以让程序更加通用吧,重用率比较高。




五百多篇PHP学习资料
喜悦村BLOG
php团队接兼职项目QQ:80031807
PHP群:768844
2006-8-29 10:19 AM#7
查看资料  访问主页  Blog  发短消息  QQ  顶部
 
ChinaID
中级会员
Rank: 3Rank: 3
中级会员


UID 24280
精华 0
积分 410
帖子 412
金钱 410 喜悦币
威望 0
人脉 0
阅读权限 30
注册 2003-10-31
来自 SiChuan
状态 离线
[推荐阅读] 请问redhat下用什么软件开发php ,请推荐
已经很久没有出这样文章了,今天总算是有点意思,看到不少新鲜点的东西。
虽然AJAX对做些小玩意儿有用,不过总算还是有用,支持一下(因为我的网站也用到的Ajax)。




free, take dream fly.
www.freesDream.com
2006-8-29 10:46 AM#8
查看资料  访问主页  Blog  发短消息  QQ  ICQ 状态  Yahoo!  顶部
 
只爱一个人 (只爱一个人)
论坛元老
Rank: 8Rank: 8
超级管理员



UID 29639
精华 0
积分 3815
帖子 1604
金钱 3815 喜悦币
威望 0
人脉 0
阅读权限 90
注册 2004-6-26
状态 离线
[推荐阅读] 急招:广州招聘PHP程序员
多谢大家支持,嘿嘿
2006-8-29 10:53 AM#9
查看资料  访问主页  Blog  发短消息  顶部
 
tl84 (tl84)
乞丐

初级会员



UID 49872
精华 0
积分 -1
帖子 20
金钱 -1 喜悦币
威望 0
人脉 0
阅读权限 1
注册 2004-11-15
状态 离线
[推荐阅读] 文本文件 和 数据库那种更节省服务器资源呢?
顶一下!!!
2006-8-29 02:32 PM#10
查看资料  发短消息  QQ  顶部
 34  1/4  1  2  3  4  > 
     


  可打印版本 | 推荐给朋友 | 订阅主题 | 收藏主题 | 开通个人空间  


 


Powered by Discuz! 6.1.0  © 2001-2010 Comsenz Inc.
Processed in 0.028609 second(s), 6 queries

(冀ICP备05009913号) 管理员:sadly 邮箱/MSN: sadly@phpx.com QQ:824008(长隐) 清除 Cookies - - Archiver - WAP