Asp.Net - 7.AJAX
AJAX简介
没有AJAX会怎么样？普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面，比如实现显示服务器的时间。每次都要刷新面的坏处：页面刷新打断用户操作、速度慢、增加服务器的流量压力。如果没有AJAX，在youku看视频的过程中如果点击了“顶、踩”、评论、评论翻页，页面就会刷新，视频就会被打断。
AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种进行页面局部异步刷新的技术。用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中，不是整个页面刷新，而是在HTML页面中使用JavaScript创建XMLHTTPRequest对象来向服务器发出请求以及获得返回的数据，就像JavaScript版的WebClient一样，在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据，这样页面就不会刷新了。 XMLHTTPRequest是AJAX的核心对象
XMLHttpRequest常用属性
|
属性 |
说明 |
|
onreadystatechange |
返回或设置异步请求的事件处理程序 |
|
readyState |
返回状态码：0：未初始化；1：打开； 2：发送；3：正在接收；4：已加载 |
|
responseText |
使用字符串返回HTTP响应 |
|
responseXML |
使用XML DOM对象返回HTTP响应 |
|
status |
返回HTTP状态码 |
GetData1.html
GetData1.html <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById("Button1").onclick = function () {
//向服务器请求 时间
//1.创建异步对象（小浏览器）
var xhr = new XMLHttpRequest();
//2.设置参数
xhr.open("get", "GetData1.ashx", true); //3.让get不从浏览器获取缓存数据
xhr.setRequestHeader("If-modified-Since", "0"); //4.设置回调函数
xhr.onreadystatechange = function () {|
//readyState==4 指数据接收完成
if (xhr.readyState == 4 && xhr.status == 200) {
var res = xhr.responseText;
alert(res);
}
};
//5.发送异步请求
xhr.send(null);
}; }
</script>
</head>
<body>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="button" /> </body>
</html>
GetData1.ashx
GetData1.ashx public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
System.Threading.Thread.Sleep(2000);
context.Response.Write(DateTime.Now.ToString());
}
7.1 异步请求基本步骤
使用XMLHttpRequest对象
按照下面模式，可以同步地XMLHttpRequest对象：
1.创建对象； - new (叫助手过来)
2.创建请求； - open (告诉他要去做的事情)
3.发送请求； - send (去吧)
7.2 创建XMLHttpRequest对象
先来创建XMLHttpRequest对象
•在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为：
var xhr = new XMLHttpRequest();
•在IE5/6中代码为：
var xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
注意，JavaScript区分大小写。
7.3 设置异步对象参数并发送请求
1.GET方式:
1.1 设置参数
xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
xhr.setRequestHeader("If-Modified-Since", "0");
1.3 发送:
xhr.send(null);//GET方式
2.POST方式：
1.1 设置参数：
xhr.open("post", "GetData1.ashx", true);
1.2 添加请求头：
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
1.3 发送：
xhr.send("isAjax=1&na=123");//POST方式
展开
折叠 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
//1.get方式
document.getElementById("Button1").onclick = function () {
//向服务器请求 时间
//1.创建异步对象（小浏览器）
var xhr = new XMLHttpRequest();
//var xmlRequest = new ActiveXObject("Microsoft.XMLHTTP"); //适用于IE6.0
//2.设置参数
xhr.open("get", "GetData1.ashx?name=tangsansan", true); //3.让get不从浏览器获取缓存数据
xhr.setRequestHeader("If-modified-Since", "0"); //4.设置回调函数
xhr.onreadystatechange = function () {
//4.1.当完全接收完响应报文后（readyState==4）并且响应状态码为200的时候
if (xhr.readyState == 4 && xhr.status == 200) {
//4.2.获取响应报文体内容
var res = xhr.responseText;
alert(res);
}
};
//5.发送异步请求
xhr.send(null);
}; //2.post方式
document.getElementById("Button2").onclick = function () {
//向服务器请求 时间
//1.创建异步对象（小浏览器）
var xhr = new XMLHttpRequest();
//2.设置参数
xhr.open("post", "GetData1.ashx", true);
//3.添加请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.设置回调函数
xhr.onreadystatechange = function () {
//4.1.当完全接收完响应报文后（readyState==4）并且响应状态码为200的时候
if (xhr.readyState == 4 && xhr.status == 200) {
//4.2.获取响应报文体内容
var res = xhr.responseText;
alert(res);
}
};
//5.发送异步请求
xhr.send("name=tangsansan&age=27");
};
}
</script>
</head>
<body>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="get" />
<input id="Button2" type="button" value="post" />
</body>
</html>
Asp.Net - 7.AJAX的更多相关文章
- ASP.NET jquery ajax传递参数
第一种:GET传递 前台 ajax GET 传递 :即在请求的地址后面加上参数,URL地址长度有显示,安全性低 后台接收:Request.QueryString[“参数名字”]! 例如: func ...
- asp.net的ajax以及json
asp.net的ajax以及json 来现在这家公司以前,从未接触过webform,以前在学校做的项目是php,java以及asp.net mvc的,当时asp.net mvc用的是razor引擎,所 ...
- asp 按钮 调用ajax时 会出现返回错误，尽量使用html按钮进行调用
asp 按钮 调用ajax时 会出现返回错误,尽量使用html按钮进行调用
- ASP.NET 5 - $.ajax post JSON.stringify(para) is null
JavaScript 代码: var para = {}; para.id = $("#ad-text-id").val(); para.title = $("#ad-t ...
- ASP.NET中Ajax的用法
在ASP.NET中应用Ajax的格式如下: 前台代码(用JQuery库) $.ajax({ type: "POST", async: true, url: "../Aja ...
- ASP.NET MVC Ajax.ActionLink 简单用法
ASP.NET MVC 项目中,如何使用类似于 iframe 的效果呢?或者说 Ajax 局部刷新,比如下面操作: 我们想要的效果是,点击 About 链接,页面不刷新(地址栏不变),然后下面的内容进 ...
- asp.net WebService+Ajax调用
default.aspx 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&qu ...
- asp.net mvc ajax 异步刷新例子
这几天在asp.net中使用ajax来做异步刷新,这里整理一下 1.首先看前台页面点击的时候调用函数 function shuxin() { $.ajax( { url: "GetValue ...
- ASP.NET 使用Ajax
转载: http://www.cnblogs.com/dolphinX/p/3242408.html $.ajax向普通页面发送get请求 这是最简单的一种方式了,先简单了解jQuery ajax的语 ...
- asp.net接收ajax请求参数时为空的现象
如题,如果使用ajax请求asp.net后台时,如果使用jquery时,默认是添加了请求头,使后台能识别,并能通过Request对象进行获取. 但是如果你使用的是window.XMLHttpReque ...
随机推荐
- 迷之this？（转）
1. 迷之this 对于刚开始进行 JavaScript 编程的开发者来说,this 具有强大的魔力,它像谜团一样需要工程师们花大量的精力去真正理解它. 在后端的一些编程语言中,例如 Java.PHP ...
- [codeforces 339]E. Three Swaps
[codeforces 339]E. Three Swaps 试题描述 Xenia the horse breeder has n (n > 1) horses that stand in a ...
- javascript，检测对象中是否存在某个属性
检测对象中属性的存在与否可以通过几种方法来判断. 1.使用in关键字. 该方法可以判断对象的自有属性和继承来的属性是否存在. var o={x:1}; "x" in o; //tr ...
- 51Nod 1250 排列与交换
Description 统计 \(1...n\) 的排列,恰好进行 \(k\) 次相邻交换和至多进行 \(k\) 次交换生成的不同的序列个数. Sol DP. 好妙的题啊... 首先看第一个问题. 对 ...
- gcc编译时对'xxxx'未定义的引用问题
gcc编译时对’xxxx’未定义的引用问题 gcc编译时对’xxxx’未定义的引用问题 原因 解决办法 gcc 依赖顺序问题 在使用gcc编译的时候有时候会碰到这样的问题,编译为.o(obj) 文件没 ...
- 解压.tar.gz出错gzip: stdin: not in gzip format tar: /Child returned status 1 tar: Error is not recoverable: exiting now
先查看文件真正的属性是什么? [root@xxxxx ~]# tar -zxvf tcl8.4.16-src.tar.gz gzip: stdin: not in gzip format tar: ...
- 深入mysql "on duplicate key update" 语法的分析
如果在INSERT语句末尾指定了on duplicate key update,并且插入行后会导致在一个UNIQUE索引或PRIMARY KEY中出现重复值,则在出现重复值的行执行UPDATE:如果不 ...
- centos 6.5 u盘 安装问题 ：vesamenu.c32: Not a COM32R image
大致可以参考这里:http://www.computerandyou.net/2012/03/how-to-solve-vesamenu-c32-not-a-com32r-image-error-in ...
- do{...}while(0)的意义和用法
linux内核和其他一些开源的代码中,经常会遇到这样的代码: do{ ... }) 这样的代码一看就不是一个循环,do..while表面上在这里一点意义都没有,那么为什么要这么用呢? 实际上,do{. ...
- （转）关于Certificate、Provisioning Profile、App ID的介绍及其之间的关系
转自http://www.cnblogs.com/cywin888/p/3263027.html 刚接触iOS开发的人难免会对苹果的各种证书.配置文件等不甚了解,可能你按照网上的教程一步一步的成功申请 ...