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 ...
随机推荐
- LeetCode--LinkedList--141.Linked List Cycle(Easy)
141. Linked List Cycle(Easy)2019.7.10 题目地址https://leetcode.com/problems/linked-list-cycle/ Given a l ...
- 第一行Kotlin系列(三)Intent 向上一页返回数据onActivityResult的使用
1.MainActivity.kt跳转处理 声明全局的按钮对象 private lateinit var button8: Button 实例化按钮对象 button8 = findViewById( ...
- threading模块—Python多线程编程
Threading 模块 threading 模块除了提供基本的线程和锁定支持外,还提供了更高级别.功能更全面的线程管理.threading 模块支持守护线程,其工作方式是:守护线程一般是一个等待客户 ...
- 使用 PyCharm 添加 Django 项目
一.前置准备(PyCharm与Python的下载,已有的跳过) 1.首先下载PyCharm 地址:http://www.jetbrains.com/pycharm/ 2.然后下载Python 地址:h ...
- HDU 2007 (水)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2007 题目大意:给你段连续数字,让你求 all sum of (偶数2 )and all sum of ...
- 封装组件el-upload通过v-model (一): 上传单张图片
ElementUI 中的el-upload 上传图片 我进行了二次封装.(默认大家都是有一定的vue基础的,细节就不过多的讲了) 在项目中我们主要拿到图片或者其他的一些参数 ,我这里是上传后返回的Gu ...
- 去除 HTML 和 PHP 标记
strip_tags()函数,从字符串中去除html和php标记,随笔记一下,如果看过就过去,下次再找可能又会费点事,记下来下次好找
- 【MySQL】索引的本质(B+Tree)解析
索引是帮助MySQL高效获取数据的排好序的数据结构. 索引数据结构 二叉树 红黑树 Hash表 B-Tree MySQL所使用为B+Tree (B-Tree变种) 非叶子节点不存储data,只存储索引 ...
- js动态添加iframe,自适应页面宽高
function showIframe(url,w,h){ //添加iframe var if_w = w; var if_h = h; $("<iframe width='" ...
- 【python爬虫】scrapy实战1--百万微博任性采集
原文: https://blog.csdn.net/qq_36936730/article/details/105132550