第一个 AJAX 应用程序

首先，我们需要一个带有两个文本框的 HTML 表单：用户名和时间。用户名文本框由用户填写，而时间文本框使用 AJAX 进行填写。

　　此 HTML 文件名为 "testAjax.htm"（请注意这个 HTML 表单没有提交按钮！）：我们必须决定何时执行 AJAX 函数。当用户在用户名文本框中键入某些内容时，我们会令函数“在幕后”执行。

<html>

　　<body>

　　function ajaxFunction()

　　{

　　var xmlHttp;

　　try

　　{

　　// Firefox, Opera 8.0+, Safari

　　xmlHttp=new XMLHttpRequest();

　　}

　　catch (e)

　　{

　　// Internet Explorer

　　try

　　{

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

　　}

　　catch (e)

　　{

　　try

　　{

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

　　}

　　catch (e)

　　{

　　alert("您的浏览器不支持AJAX！");

　　return false;

　　}

　　xmlHttp.onreadystatechange=function()

　　{

　　if(xmlHttp.readyState==4)

　　{

　　document.myForm.time.value=xmlHttp.responseText;

　　}

　　xmlHttp.open("GET","time.asp",true);

　　xmlHttp.send(null);

　　}

　　</script>

　　用户: <input type="text" name="username" onkeyup="ajaxFunction();" /> //onkeyup 事件会在键盘按键被松开时发生

　　时间: <input type="text" name="time" />

　　</form>

　　</body>

　　</html>

AJAX - 服务器端的脚本

　　现在，我们要创建可显示当前服务器时间的脚本。

　　responseText 属性会存储从服务器返回的数据。在这里，我们希望传回当前的时间。

　　这是 "time.asp" 的代码：

　　<% response.expires=-1response.write(time)%>

　　注释：Expires 属性可设置在页面缓存失效前页面被缓存的时间（分钟）。Response.Expires=-1 指示页面不会被缓存。

运行您的 AJAX 应用程序

　　请在下面的文本框中键入一些文本，然后单击时间文本框：

　　用户: 时间:

　　时间文本框可在不加载页面的情况下从 "time.asp" 获得服务器的时间！

posted on 2011-08-09 13:03 SkyDream 阅读(278) 评论(0) 编辑收藏所属分类: Ajax

2011年8月

日

一

二

三

四

五

六

统计

随笔 - 59
文章 - 4
评论 - 2
引用 - 0

常用链接

留言簿(3)

随笔分类

随笔档案

文章分类

感悟生活(4) (rss)