您现在的位置: 365建站网 > 365学习 > 2.3 使用Ajax完成数据传输

2.3 使用Ajax完成数据传输

文章来源:365jz.com     点击数:302    更新时间:2009-09-13 10:21   参与评论
准备工作很漫长,也很棘手,其实上面所介绍的操作都是本书将要深入讲解和剖析的重要知识点。现在把它们都提前拿过来,有点难为人了。当然,如果不明白、不理解也是情理之中的事情,你也不要因此而产生畏难的情绪,后面会有更详细的讲解帮助你消化掉这些冰冷的知识。

下面的工作将从后台编程转移到前台脚本中,请你打开index.HTML页面。切换到【代码】视图,在头部区域输入下面代码:

<script type="text/JavaScript">

var XMLHttp;

function createXMLHttpRequest(){

           if (window.XMLHttpRequest) {

               xmlHttp = new XMLHttpRequest();

           }

           else if (window.ActiveXObject) {

               try {

                   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

               } catch (e) {

                   try {

                       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

                   } catch (e) {}

               }

           }

}

</script>

有点面熟吧,这正是第2.1.2节中创建XMLHttpRequest对象实例的源代码,我们把它封装在一个函数中,这样可以在其他代码位置随时调用。不明白的读者可以返回看一下,这里就不再费口舌了。

然后在其下面再定义一个事情驱动函数:

function handleStateChange(){

           if(xmlHttp.readyState == 4){

               if (xmlHttp.status == 200 || xmlHttp.status == 0){

                   document.all.message.innerHTML=xmlHttp.responseText;

               }

           }

}

上面代码先判断当前响应是否结束,如果结束则读取响应信息,并赋值给页面中ID为message的元素。你可以参阅第2.1.6节了解为什么要这样编写。

最后在编写一个开始请求的函数,代码如下:

function startRequest(url){

           createXMLHttpRequest();

           try{

               xmlHttp.onreadystatechange = handleStateChange;

               xmlHttp.open("GET", url,  false);

               xmlHttp.send(null);

           }catch(exception){

               alert("您要访问的资源不存在!");

           }

}

</script>

上面函数以GET方法向指定文件发出请求并接收响应的数据(详细讲解可以参阅第2.1.4节内容)。然后在HTML结构代码中输入一个包含空值的div元素,设置该元素的ID值为message:

<div id="container">

    <div id="sidebar1">

        <h3>留言板</h3>

        <FORM action="save.asp" method=post>… </FORM>

    </div>

    <div id="mainContent">

        <h2>留言内容</h2>

        <div  id="message"></div>

    </div>

    <br class="clearfloat" />

</div>

最后,在<body>标签中调用startRequest(url)函数即可:

<body class="twoColFixRt"  onload="startRequest('list.asp');">

好啦,整个示例的功能基本完成,你不妨试验一下,在留言板中输入简单的留言并提交之后,返回即可看到自己的留言,感觉不错吧(如图2­-16所示)。

图 2-16

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (302人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------