简单的无框架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,你可以让它读数据库,这样你的信息内容就能按条浏览了.
其实很简单,利用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,你可以让它读数据库,这样你的信息内容就能按条浏览了.
