ASP结合Ajax不刷新网页加载新闻列表示例资源-CSDN下载

共3个文件

asp：1个

html：1个

mdb：1个

ASP

结合Ajax

不刷新网页

加载新闻列表示例

1星需积分: 9 175 浏览量 2010-03-18 14:35:53 上传评论 2 收藏 9KB RAR 举报

ASP（Active Server Pages）是一种由微软开发的服务器端脚本环境，它允许Web开发者创建动态交互式的网页。Ajax（Asynchronous JavaScript and XML）则是一种在无需重新加载整个网页的情况下更新部分网页的技术，通过异步方式与服务器通信，提高了用户体验。在本示例中，我们将探讨如何使用ASP和Ajax结合来实现不刷新网页加载新闻列表的功能。理解ASP的工作原理至关重要。ASP文件通常包含HTML、CSS、JavaScript以及服务器端脚本语言（如VBScript或JScript）。当用户请求一个ASP页面时，服务器执行其中的脚本，生成HTML内容并将其发送回客户端浏览器进行显示。这种方式允许服务器动态生成内容，比如从数据库中检索新闻数据。 Ajax的核心在于XMLHttpRequest对象，它是JavaScript内置的对象，可以用来在后台与服务器进行通信。通过创建XMLHttpRequest实例，打开到服务器的连接，发送请求，并处理响应，所有这些操作都不会影响到用户的交互界面。实现ASP结合Ajax加载新闻列表，主要步骤如下： 1. **创建ASP页面**：我们需要一个ASP页面作为服务器端接口，负责从数据库中获取新闻数据。这个页面可能包含SQL查询，用于检索最新或指定的新闻条目。例如，你可以创建一个名为`getNews.asp`的文件，该文件接收参数（如页码或新闻ID），并返回JSON格式的新闻数据。 2. **编写前端代码**：在HTML页面中，我们需要一个容器（如div）来展示新闻列表，并添加JavaScript代码来处理Ajax请求。利用JavaScript的XMLHttpRequest对象，我们可以在用户触发特定事件（如点击按钮）时，向`getNews.asp`发送异步请求。 3. **发送Ajax请求**：使用JavaScript的XMLHttpRequest.open()方法打开到`getNews.asp`的连接，然后使用send()方法发送请求。请求的参数可以通过URL查询字符串或者POST数据的方式传递。 4. **处理响应**：当服务器响应时，JavaScript会触发onreadystatechange事件。在事件处理函数中，我们检查XMLHttpRequest的状态（通过readyState属性）和HTTP状态码（通过status属性），确保请求成功。如果成功，我们可以使用responseText或responseXML属性获取服务器返回的数据。 5. **解析数据**：由于我们希望服务器返回JSON格式的数据，所以我们可以使用JavaScript的JSON.parse()方法将响应文本转换为JavaScript对象。这将使我们能够轻松地访问和操作新闻数据。 6. **更新页面**：我们遍历解析后的JSON对象，用新的新闻数据替换或添加到现有新闻列表。可以使用DOM操作（如innerHTML，appendChild等）来动态修改页面元素，实现无刷新加载。总结起来，这个示例展示了如何使用ASP和Ajax技术协同工作，实现在不刷新整个页面的情况下，动态加载和更新新闻列表。通过这种技术，用户可以更流畅地浏览新闻，而不会被不必要的页面跳转打断，极大地提升了用户体验。同时，这也对服务器资源的利用效率有所提高，因为只需要处理部分数据请求，而不是每次都需要加载整个页面。

资源推荐

资源详情

资源评论

收起资源包目录

ajaxlist.rar （3个子文件）

codefans.net

ASP结合Ajax不刷新网页加载新闻列表示例

data.asp 972B

list.html 2KB

data.mdb 144KB

<html> <head> <title>新闻列表简化型</title> <script language="javascript"> function $(id) { return document.all[id]; } </script> <script language="javascript" defer> function op(i) { coun=i var xhr=new ActiveXObject("Microsoft.XMLHTTP"); Dom=null; pp='a' xhr.open("get","data.asp?coun="+coun,true); xhr.onreadystatechange=$CallBack; xhr.send(null); function $CallBack() { if(xhr.readystate==1) { $("newsList").innerHTML="正在连结服务器"; } else if(xhr.readystate==2 || xhr.readystate==3) { $("newsList").innerHTML="正在查询"; } else if(xhr.readystate==4) { if (xhr.status==200) { Dom=xhr.responseXML; $showList(); } } } // download by http://www.codefans.net function $showList() //$用于函数内调用,,{}里面调用 { var count=""; var html=""; var items=Dom.selectNodes("//item"); count=Dom.selectSingleNode("//data").getAttribute("count"); //总数量 coun1=Dom.selectSingleNode("//data").getAttribute("coun"); //总数量 if(coun-1==0) { for(var i=1;i<count;i++) { html+="<div id=\"title\" fontcolor=\"black\">"+items[i].selectSingleNode("hits").text+" "+items[i].selectSingleNode("hits1").text+" "+items[i].selectSingleNode("hits2").text+" "+items[i].selectSingleNode("hits1").text+"</div>"; }} else { for(var i=1;i<count;i++) { html+="<div id=\"title\" fontcolor=\"black\">"+items[i].selectSingleNode("hits").text+" "+items[i].selectSingleNode("hits1").text+" "+items[i].selectSingleNode("hits2").text+"</div>"; }} $("newsList").innerHTML=html; } } </script> </head> <body> <div id="butt"> <a href="#" onMouseOver="javascript:op(1);">选择1</a>|| <a href="#" onMouseOver="javascript:op(2);">选择2</a> </div> <div id="newsList"></div> <div id="pagestatus"></div> </body> </html>

评论收藏

内容反馈