此次的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演示）的更多相关文章

  1. MapXtreme在asp.net中的使用之加载地图(转)

    MapXtreme在asp.net中的使用之加载地图(转) Posted on 2010-05-04 19:44 Happy Coding 阅读(669) 评论(0) 编辑 收藏 1.地图保存在本地的 ...

  2. Scrapy爬取Ajax（异步加载）网页实例——简书付费连载

    这两天学习了Scrapy爬虫框架的基本使用,练习的例子爬取的都是传统的直接加载完网页的内容,就想试试爬取用Ajax技术加载的网页. 这里以简书里的优选连载网页为例分享一下我的爬取过程. 网址为: ht ...

  3. jquery中ajax跨域加载

    今天学习ajax跨域加载,先来一段代码,异步加载的链接是爱奇艺的开源,我直接拿来用作测试 <!DOCTYPE html> <html lang="en"> ...

  4. Android中图片的异步加载

    转: 1.  为什么要异步加载图片 下载图片比较费时,先显示文字部分,让加载图片的过程在后台,以提升用户体验 2.  SoftReference的作用 栈内存—引用 堆内存—对象 Eg: Object ...

  5. Android新浪微博客户端（七）——ListView中的图片异步加载、缓存

    原文出自:方杰|http://fangjie.info/?p=193转载请注明出处 最终效果演示:http://fangjie.sinaapp.com/?page_id=54 该项目代码已经放到git ...

  6. Ajax 滚动异步加载数据

    第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...

  7. 简单的ListView中item图片异步加载

    前言:     在android开发当中,从目标地址获取图片往往都是采用异步加载的方法.当完全加载完图片后在进行显示,也有些是直接将加载的图片一点一点的显示出来. 这两个区别只是对流的处理不同而已.现 ...

  8. Angular4中利用promise异步加载gojs

    GoJS是一个实现交互类图表(比如流程图,树图,关系图,力导图等等)的JS库 gojs提供了angular的基本例子,不过是离线版 https://github.com/NorthwoodsSoftw ...

  9. vue-awesome-swiper中的数据异步加载

    <template> <div> //第一个轮播 加了v-if 判断,可以实现 loop 轮循 <swiper v-if="gglist.length>1 ...

随机推荐

  1. Qt之分模块log

    说明 对于一般的log,使用 qInstallMessageHandler 重定向到文件即可,甚至可以根据日志等级,分类存储.但是并不是适用所有情况,比如,程序运行时动态创建模块,而每个模块需要创建不 ...

  2. 【Spark】RDD(Resilient Distributed Dataset)究竟是什么？

    目录 基本概念 官方文档 概述 含义 RDD出现的原因 五大属性 以单词统计为例,一张图熟悉RDD当中的五大属性 解构图 RDD弹性 RDD特点 分区 只读 依赖 缓存 checkpoint 基本概念 ...

  3. pyhanlp安装教程

    1.hanlp简介 HanLP是由一系列模型与算法组成的Java工具包,目标是普及自然语言处理在生产环境中的应用.HanLP具备功能完善.性能高效.架构清晰.语料时新.可自定义的特点. Hanlp具有 ...

  4. 阿里巴巴泰山版《Java 开发者手册》，也是一份防坑指南

    我是风筝,公众号「古时的风筝」,一个不只有技术的技术公众号,一个在程序圈混迹多年,主业 Java,另外 Python.React 也玩儿的 6 的斜杠开发者. Spring Cloud 系列文章已经完 ...

  5. [coj 1353 Guessing the Number]kmp，字符串最小表示法

    题意:给一个字符串,求它的最小子串,使得原串是通过它重复得到的字符串的一个子串. 思路:先求最小长度,最小循环长度可以利用kmp的next数组快速得到,求出长度后然后利用字符串最小表示法求循环节的最小 ...

  6. [zoj3629]找规律

    题意:a[n] = ([n/1] + [n/2] + ... + [n/n]) & 1 == false,找出a数组的规律来就ok了. #pragma comment(linker, &quo ...

  7. 2020年腾讯实习生C++面试题&持续更新中（5）

    2020年腾讯实习生C++面试题&持续更新中(5) 大家好呀,我是好好学习天天编程的天天~ 昨天一位小伙伴反馈已经拿到了腾讯offer,很是替小伙伴的激动~ 那今天还是持续给大家分享面经,希望 ...

  8. React：redux+router4搭建应用骨架

    可能是短期内关于react的对后一篇笔记.假设读者对redux和router4有基本了解. 缘由: 现在网上很多关于react+redux的文章都是沿用传统的文件组织形式,即: |--componen ...

  9. ftp服务器搭建（二）

    1.已经安装好了vsftpd  进入到根目录下的/etc目录 ls查看一下 2.拷贝一下上面的两个配置文件 我拷贝到了我新建的目录中了 3.查看现在的网络连接方式——我的是-net方式 当然其他方式也 ...

  10. SpringBoot_自动装配

    SpringBoot SrpingBoot 给人的第一印象就是 简洁,易上手.它是自 Spring 而来为了简化我们开发的,而经历过了 Spring 中繁琐的配置文件,我确实很好奇它到底是怎么帮我们把 ...