注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

奕克

爱家人爱工作爱生活

 
 
 

日志

 
 

使用AJAX技术改造传统ASP网页的入门(转)  

2010-08-06 17:28:31|  分类: 技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
       用惯了采用AJAX技术的WEB2.0网站后,才知道WEB1.0是个垃圾,以后建议大家做网站要么用AJAX技术,要么就不要做了.只采用服务器端技术的网站,页面闪来闪去的简直害人害己,丢人现眼,不会css+Javascript的就不要说自己会做网页了。。。就跟技术跟市场需求比起来,市场需求更重要一样;技术跟用户体验比起来,用户体验也是更重要的!
       现在我们去图书馆找书,AJAX的服务器端例子代码一般都是用JSP,PHP或servlet写的,其实AJAX是一种客户端技术,ASP也可以作为服务器端脚本配合。下面我们来看个例子。
 
     AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。它使用: 
* 使用XHTML+CSS来表示信息; 
* 使用JavaScript操作DOM(Document Object Model)进行动态显示及交互; 
* 使用 XML 和 XSLT 进行数据交换及相关操作; 
* 使用 XMLHttpRequest对象与Web服务器进行异步数据交换; 
* 使用 JavaScript 将所有的东西绑定在一起。
 
以前我们做的网页,大多数都是使用超链接来转到另一个页面去。在点击超链接以后,浏览器就会慢慢打开另一个页面,这是一个同步打开的过程,在“同步”的时候,我们就得等…… 
相对于同步来说,另一个就是异步了。使用Ajax的异步功能后,如果我们做一个操作,比如点击一个按钮,让页面中间的股票数据更新为最新的,而浏览者继续浏览该页面别的地方。如果使用传统的超链接,那么,在新页面打开之前,你是不能浏览页面原有信息的。
 
下面我们通过一个简单实例体会AJAX的优点:
首先用DW8制作
tj2.asp页面如下:
<%
 if Request("Act")="Ajax" then
  response.write Now()
 end if
%> 上述代码在请求参数act是ajax时,返回服务器端的时间。
然后制作tj.asp页面如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>
<body>
<p>现在服务器的时间是:<div id="ServerTime"></div>
</p>
<form method="post">
 <input name="Button1" type="button" value="开始刷新时间" onclick="UpdateTime();"></form>
</body>
</html>
<script language="javascript">
function UpdateTime()
{
 var xh = new ActiveXObject("Msxml2.XMLHTTP");
 xh.onreadystatechange = function(){
   if(4 == xh.readyState){
    document.getElementById("ServerTime").innerHTML = "<font color=red>" + xh.responseText + "</font>";
    setTimeout(UpdateTime, 1000);
   }
  }
 xh.open("GET", "tj2.asp?Act=Ajax&randnum=" + Math.random(), true);
 xh.send();
}
</script>
 
上述代码中只有一个UpdateTime方法,从上面的HTML中可以看到,当点击“更新时间”这个按钮的时候,会触发这个事件(执行这个方法),首先
var xh = new ActiveXObject("Msxml2.XMLHTTP");
创建一个XMLHTTP对象,我这里用的Msxml2.XMLHTTP只支持IE,另外的还有Microsoft.XMLHTTP和new XMLHttpRequest(),不同浏览器要使用不同的对象来创建xmlhttp对象。
xh.onreadystatechange事件在xh对象的状态改变后触发,这个不用知道太多,只需要知道,当xh.readyState等于4时,就表示这个请求已经完成。我这里让这个事件等于一个匿名函数:
function(){
   if(4 == xh.readyState){
    document.getElementById("ServerTime").innerHTML = "<font color=red>" + xh.responseText + "</font>";
    setTimeout(UpdateTime, 1000);
   }
 
匿名函数是没有函数名的,一创建就使用。整体的意思就是,当xh的状态每改变一次,都会执行一次这个匿名函数,在匿名函数中判断xh.readyState是否等于4,如果是,那么表明请求完成,就开始做我们要做的事情,如果不是,就不管它,不做任何事情。setTimeout(UpdateTime, 1000);表示每隔1秒计时器就执行UpdateTime函数,更新时间。
 
document.getElementById("ServerTime").innerHTML = "<font color=red>" + xh.responseText + "</font>";
这一句,用到了js、html、dom。
document.getElementById("ServerTime")就是取得名为ServerTime的html标记,就是上面html中的那个层啦,innerHTML 属性表示它的内部html;xh.responseText是这次请求中服务器返回的字符串数据。

可以看到,请求的是tj2.asp?Act=Ajax,一开始tj2.asp的ASP程序检测到Act=Ajax,那么,就返回服务器时间,所以,这里的xh.responseText得到的,实际上就是服务器的时间,把这个字符串作为html放进ServerTime层的innerHTML中,ServerTime层所显示的内容因此就改变了。
xh.open("GET", "tj2.asp?Act=Ajax&randnum=" + Math.random(), true);
第一个参数表示采用GET来请求,此外还有POST,要传大数据的时候才用POST,第二个参数就是要请求的页面以及参数啦,我这里加上一个随机数,是为了避免浏览器的缓存,第三个参数true表示采用异步,false表示采用同步。

下一行的xh.send();就是开始发送请求啦。
 
一个简单的实例,可以使用AJAX无刷新技术在客户端显示服务器端时间,实时更新。
 
最后讲一下AJAX与ASP配合时的乱码问题,乱码问题在web网页中经常出现,根本上是UTF-8和GB2312的编码问题,比如上例,如果你将tj2.asp中的
response.write Now()
替换为
response.write "服务器端时间"+Cstr(Now())
即加入中文,就会发现点击更新按钮客户端显示的是乱码,通过本人的艰苦google,终于找到了解决方法:
方法是在tj2.asp的最开始使用代码:
Response.Charset = "GB2312" 
 
让tj2.asp返回时间时使用gb2312编码,就可以解决中文乱码问题。
 
  评论这张
 
阅读(87)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017