ASP.NET中AJAX的异步加载Demo演示

此次的Demo是一个页面，页面上有两行字，然后后面用AJAX，使用一个下拉框去替换第一行文字

第一个是被替换的网页

<!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演示

相关推荐