ASP.NET中AJAX的异步加载(Demo演示)
 更新时间:2020年05月02日 09:14:24   作者:南 墙  

这篇文章主要介绍了ASP.NET中AJAX的异步加载(Demo演示),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

此次的Demo是一个页面,页面上有两行字,然后后面用AJAX,使用一个下拉框去替换第一行文字[/code]
第一个是被替换的网页

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title></title>
<script type=”text/javascript”>
var xmlHttpRequest;
function createXmlHttpRequest() {
if (window.ActiveXObject) {
xmlHttpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);//IE浏览器
} else {
xmlHttpRequest = new window.XMLHttpRequest();//谷歌等浏览器
}
}

function sendRequest() {
createXmlHttpRequest();//获取对象
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState == 4) {
if (xmlHttpRequest.status == 200) {
document.getElementById(“divContent”).innerHTML = xmlHttpRequest.responseText;
}
}
};
xmlHttpRequest.open(“POST”, “DeptHandler.ashx”, true);
xmlHttpRequest.send(null);
}

</script>
<!–<script type=”text/javascript”>
var xmlHttpRequest;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);//IE浏览器
} else {
xmlHttpRequest = new window.XMLHttpRequest();//谷歌等浏览器
}
}
//请求数据
function sendRequest() {
createXMLHttpRequest();
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readState == 4) {
if (xmlHttpRequest.status == 200) {
document.getElementById(“divContent”).innerHTML = xmlHttpRequest.responseText;
}
}
}
xmlHttpRequest.open(“POST”, “DeptHandler.ashx”, true);

xmlHttpRequest.send(null);
}
</script>–>
</head>
<body>
<div>
<div id=”divContent”>

<p style=”color:red”>这里显示部门信息</p>
</div>
<script type=”text/javascript”>sendRequest()</script>
<div>
<p style=”color:red”>这里显示部门信息结束了</p>
</div>
</div>
</body>
</html>

第二个是一个类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication2
{
public class Dept
{
public int Id { get; set; }

public string DeptName { get; set; }
}
}

然后是一个一般处理程序

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
using System.Web;

namespace WebApplication2
{
/// <summary>
/// DeptHandler 的摘要说明
/// </summary>
public class DeptHandler : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
//这里的AJAX进行了三秒的延迟
Thread.Sleep(3000);
List<Dept> depts = new List<Dept>
{
new Dept(){Id=1,DeptName=”财务部”},
new Dept(){Id=2,DeptName=”研发部”},
new Dept(){Id=3,DeptName=”市场部”}
};
StringBuilder sb = new StringBuilder();
sb.AppendLine(“<select>”);
foreach (var item in depts)
{
sb.AppendLine($”<option id = {item.Id}>{item.DeptName}</option>”);
}

sb.AppendLine(“</select>”);
context.Response.ContentType = “text/plain”;
context.Response.Write(sb);

}

public bool IsReusable
{
get
{
return false;
}
}
}
}

效果图

AJAX有三秒的延迟加载

前三秒

后三秒

到此这篇关于ASP.NET中AJAX的异步加载(Demo演示)的文章就介绍到这了,更多相关ASP.NET中AJAX异步加载内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟!

您可能感兴趣的文章:asp.net下的异步加载asp.net 使用js分页实现异步加载数据

ASP.NET
AJAX
异步加载

相关文章
VS2017调用MySQL 8.0的方法这篇文章主要为大家详细介绍了VS2017调用MySQL 8.0的方法,附上C++程序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2019-06-06
.Net Core2.1 WebAPI新增Swagger插件详解这篇文章主要给大家介绍了关于.Net Core2.1 WebAPI新增Swagger插件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2018-07-07
ASP.NET Core应用错误处理之StatusCodePagesMiddleware中间件针对这篇文章主要给大家介绍了关于ASP.NET Core应用错误处理之StatusCodePagesMiddleware中间件针对响应码呈现错误页面的相关资料,需要的朋友可以参考下 2019-01-01
ASP.NET清空缓存时遇到的问题简析本文将为大家介绍的是ASP.NET网站清空缓存时遇到的问题,主要是基于ObjectDataSource读取数据位置的问题,希望对大家有所帮助。 2015-10-10
.Net页面局部更新引发的思考这篇文章主要是由.Net页面局部更新引发的一系列思考,整理了实现局部更新的解决方案及改进方案,感兴趣的小伙伴们可以参考一下 2016-06-06
微信服务器中下载文件到本地的实例代码这篇文章主要介绍了微信服务器中下载文件到本地的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2018-08-08
ASP.NET 上传文件到共享文件夹的示例这篇文章主要介绍了ASP.NET 上传文件到共享文件夹的示例,帮助大家更好的理解和学习使用.net技术,感兴趣的朋友可以了解下 2021-04-04
asp.net实现的MD5加密和DES加解密算法类完整示例这篇文章主要介绍了asp.net实现的MD5加密和DES加解密算法类,结合完整实例形式分析了asp.net实现MD5加密算法及DES加密和解密的相关技巧,需要的朋友可以参考下 2016-07-07
Asp.Net获取网站截图的实例代码这篇文章介绍了Asp.Net获取网站截图的实例代码,有需要的朋友可以参考一下 2013-07-07
asp.net下文件上传和文件删除的代码asp.net下文件上传和文件删除的代码… 2007-09-09

最新评论

声明:本站(华域联盟www.cnhackhy.com)所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。