简单的无框架Ajax应用

如果一定要添加Ajax的框架才能应用Ajax的话,那么在一般购买虚拟主机空间的朋友们来说,让服务商安装自己所要用的框架在服务器上,是一件很麻烦,也可能是不能完成的事件.所以还是让我们自己来了解Ajax的应用吧.
其实很简单,利用JS的XMLHTTP对像就行了.
在IE中,它是这么声明的:var oBao = new ActiveXObject("Microsoft.XMLHTTP");

下面是一个应用的例子,很简单,对一个数组内容的读取,相信大家看了后能了解Ajax最基本的东西.这个例子可以扩展成对文章的按条读取.

首先:我们建立一个响应JS调用内容的页面.这个页面的作用就是获得当前要读取的数组内容的索引.从数组里取得其内容,返回给JS就行,怎么返回?Response.Write()就行了,一个页面的返回内容就是它的输出内容.

art.aspx内容如下:
<%@ Page Language="C#" %>


<script runat="server">
    
private String[] Strs = new String[3];
    
    
protected void Page_Load(object sender, EventArgs e)
    
{
        Strs[
0= "这是第一条!";
        Strs[
1= "这是第二条!";
        Strs[
2= "这是第三条!";
        Int32 num 
= Int32.Parse(Request["id"]);
        Response.Clear();
        
if (num < Strs.Length)
        
{
            Response.Write(DateTime.Now.ToString(
"hh:mm:ss")+"-"+Strs[num]);
        }

        
else
        
{
            Response.Write(
"没有下一条了!");
        }

     
    }

</script>

接下来,我们要建一个调用页面了
页面的内容很简单:一个DIV用来显示内容.ID=Content,然后有一个按钮,点击时调用JS的Loadart()函数来取得内容并显示.
Default.aspx内容如下:
<html>
<head runat="server">
    
<title>Ajax 读文章演示</title>
    
<script type="text/javascript">
var i=0;
function loadart()
{
    
    
var content =document.getElementById("content");
    
var oBao = new ActiveXObject("Microsoft.XMLHTTP");
    oBao.open(
"Get","art.aspx?id=" + i,false);  
    oBao.send();
    content.innerHTML 
= oBao.responseText;
    
if(i<3)
        
{i++;}
    
else
    
{i=0;}
    
}

</script>
</head>
<body>
    
    
<div id="content">
    
</div>
    
<input type="button" onclick="loadart()" value="下一条"/>
   
</body>
</html>

完成了,测试一下吧,,,这两个页面放在一起哟.当然,你不想放在一起也行,那么在oBap.open里的地址就要写完整路径了.
一切就这么简单.扩展一下art.aspx,你可以让它读数据库,这样你的信息内容就能按条浏览了.
posted @ 2007-03-20 09:14 Aowind 阅读(...) 评论(...) 编辑 收藏