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演示）的更多相关文章
- MapXtreme在asp.net中的使用之加载地图(转)
MapXtreme在asp.net中的使用之加载地图(转) Posted on 2010-05-04 19:44 Happy Coding 阅读(669) 评论(0) 编辑 收藏 1.地图保存在本地的 ...
- Scrapy爬取Ajax（异步加载）网页实例——简书付费连载
这两天学习了Scrapy爬虫框架的基本使用,练习的例子爬取的都是传统的直接加载完网页的内容,就想试试爬取用Ajax技术加载的网页. 这里以简书里的优选连载网页为例分享一下我的爬取过程. 网址为: ht ...
- jquery中ajax跨域加载
今天学习ajax跨域加载,先来一段代码,异步加载的链接是爱奇艺的开源,我直接拿来用作测试 <!DOCTYPE html> <html lang="en"> ...
- Android中图片的异步加载
转: 1. 为什么要异步加载图片 下载图片比较费时,先显示文字部分,让加载图片的过程在后台,以提升用户体验 2. SoftReference的作用 栈内存—引用 堆内存—对象 Eg: Object ...
- Android新浪微博客户端（七）——ListView中的图片异步加载、缓存
原文出自:方杰|http://fangjie.info/?p=193转载请注明出处 最终效果演示:http://fangjie.sinaapp.com/?page_id=54 该项目代码已经放到git ...
- Ajax 滚动异步加载数据
第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...
- 简单的ListView中item图片异步加载
前言: 在android开发当中,从目标地址获取图片往往都是采用异步加载的方法.当完全加载完图片后在进行显示,也有些是直接将加载的图片一点一点的显示出来. 这两个区别只是对流的处理不同而已.现 ...
- Angular4中利用promise异步加载gojs
GoJS是一个实现交互类图表(比如流程图,树图,关系图,力导图等等)的JS库 gojs提供了angular的基本例子,不过是离线版 https://github.com/NorthwoodsSoftw ...
- vue-awesome-swiper中的数据异步加载
<template> <div> //第一个轮播 加了v-if 判断,可以实现 loop 轮循 <swiper v-if="gglist.length>1 ...
随机推荐
- search（10）- elastic4s-multi_match：多字段全文搜索
在全文搜索中我们常常会在多个字段中匹配同一个查询条件或者在不同的字段中匹配不同的条件.比如下面这个例子: GET /books/_search { "query": { " ...
- python地图投影转换
一.投影包osr与proj4的使用 1.osr投影转换示例 from osgeo import osr,ogr#定义投影#wgs84source=osr.SpatialReference()sourc ...
- 【Hadoop离线基础总结】MapReduce增强（上）
MapReduce增强 MapReduce的分区与reduceTask的数量 概述 MapReduce当中的分区:物以类聚,人以群分.相同key的数据,去往同一个reduce. ReduceTask的 ...
- scala 隐式参数
def test(implicit name: String = "susu"): Unit ={ println(name);} 三种调用方法如下:test("dudu ...
- JDBC14 ORM03 JavaBean封装
Javabean对象封装一条信息(推荐) 让JavaBean的属性名和类型尽量和数据库保持一致 一条记录对应一个对象,将这些查询到的对象放到容器中(List) 表信息如下 List封装多条信息 Con ...
- 基于R语言的航空公司客户价值分析
分析航空公司现状 1.行业内竞争 民航的竞争除了三大航空公司之间的竞争之外,还将加入新崛起的各类小型航空公司.民营航空公司,甚至国外航空巨头.航空产品生产过剩,产品同质化特征愈加明显,于是航空公司从价 ...
- 在一段字符串中的指定位置插入html标签，实现内容修改留痕
客户需求:实现内容修改留痕,并且鼠标移动到元素时,显示修改人和修改时间. (其实呢本人觉得这个如果是静态的页面,或者是后端拼接好的html,都很好实现,如果让前端动态实现就......) 前端实现的方 ...
- HDU 2009 （水）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2009 题目大意:数列的第一项为n,以后各项为前一项的平方根,求数列的前m项的和 解题思路: 用好sqr ...
- 初识JAVA（学习记录）
Java 1.1Java简介 Java是一种跨平台的,面向对象的程序设计语言.无论是电脑还是手机,到处都运行着JAVA开发的应用程序:JAVA程序可以在任何计算机.操作系统以及支持JAVA的硬件设备上 ...
- webpack使用babel
几个月没用webpack都忘了好多了. webpack构建前端,使用时除了entry/output,就是plugins和module.loaders,还有本地测试的devServer. npm ins ...