转载:http://www.cnblogs.com/yaoguipeng/archive/2011/06/25/2090349.html
为什么会有AJAX?通俗一点讲,当我们观看视频时,如果我们点击了下方的留言板的下一页,我们不希望整个页面都刷新,这样会使整个视频从服务器重
新加载进来,而我们实际需要的只是留言本的刷新即可,也就是页面部分刷新,这个过程其实也是有向服务器发出请求的,只是请求的内容不包含视频内容而已。
AJAX是asynchronized javascript and
xml的简写(异步javascript和xml)那么异步请求是有谁发出的呢?后面会说到。先来了解下异步的概念。我想异步是指浏览器向服务器发出请求
后不用理服务器响应了没有,就可以发出下一个请求(跟同步相比较而言),而同步则是指浏览器发出一个请求必须在服务器回应后才能发出下一个请求,前后发出
的两次请求有着时间关系, 另外,找了一下同步通讯和异步通讯的概念,应该有助于理解。
同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。
那么究竟xml在异步请求中发挥了一个什么样的作用呢?
其实AJAX中发出的异步请求就是由xml中的xml HttpRequest发出的,所以xml HttpRequest就是一个异步对象,他不像web Client是同步的,xml HttpRequest可以理解成也是向web service发出请求。
首先在html页面用javascript创建一个xm
lhttp对象,用这个对象向服务器发出请求,(实际上是请求ashx页面,也叫做执行页面),服务器返回请求时也是用xml http接受,xml
HttpRequest. responseText(),接受前要判断状态是否正确。
下面来看一下怎么实现一个AJAX功能。以金额转换为例,下面是money.ashx
页面
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string moneyType = context.Request["mt"].ToString();
string amount = context.Request["amount"].ToString();
string result = "0";
switch (moneyType)
{
case "1":
result = Convert.ToString(0.5 * Convert.ToInt32(amount));
break;
case "2":
result = Convert.ToString(5 * Convert.ToInt32(amount));
break;
case "3":
result = Convert.ToString(10 * Convert.ToInt32(amount));
break;
default:
result = amount;
break;
}
context.Response.Write(result);
}
money.html页面,这个自己来写一写:
///////////////////////////////////////////////////////////////////////////
var xhttp = new Active XObject("Microsoft.XML HTTP");
if(!xhttp) {alert("创建ActiveXObject对象失败"); return false;}
xhttp.open
("post","要请求的页面","false"); //比如请求money.ashx页面,可以传参数过去
xhttp.onreadystatechange
= function(){
if(xhttp.readyState
==4) { //readyState的值会从1开始发生改变。。
if(xhttp.status
==200) {
document.getElementById("result").value = xml http.responseText;}
else{
alert("服务器返回数据失败");}
}
xml http.send();
}
重点理解请求的过程
///////////////////////////////////////////////////////////////////////////
1、首先创建一个Xml HttpRequest对象。new Active XObject("Microsoft.XML HTTP"); 是在ie中才要这样写,在其他浏览器可用new Xml HttpRequest(),更方便,更简洁。
2、检测创建是否成功,不成功则提示创建失败,否则继续执行。
3、open. 打开xml httprequest对象,打开方式,打开哪个页面,最后false(不知道为什么)
4、监测onreadystatechange事件,判断返回的readystate的值,判断status的值。
5、send.
需要注意的问题:
1、get方法和post方法
测试get和post方法前先分别清楚浏览器的缓存,这样效果比较容易理解
var xml http = new ActiveXObject("Microsoft.XML HTTP");
xml http.open("post","GetDate1.ashx",false);
xml http.open("get","GetDate1.ashx",false);
测试结果是:为了保证都在相同的条件下测试,先清除浏览器缓存,用post方法,每一次请求都被当作新的请求,它不会去用缓存中的内容 (其实也可以不用清除缓存,因为它根本就不用)
先清除浏览器缓存,用get,请求之前它会先检测
缓存中有没有相同的请求,没有的话就发出请求,有的话它就直接用缓存中的页面而不再发出请求了。这样导致的结果是,明明你代码修改了,但是在前台却总是看
不见,
即使刷新页面也是一样,这时候就要想起是缓存在作怪了,清除一下缓存就可以了。或者在get请求中每次都给它传递不同的参数过去,这样它就不会再用缓存中
的内容了。
2、为什么xml http要用个onreadystatechange检测它的状态呢?
XML HTTP是异步的,他不会像同步请求那样在服务器端拿到数据后才返回,所以要有一个事件监听他。
xml http.onreadystatechange = function(){ //onreadystatechange此事件被触发了四次
if(xml http.readyState == 1) alert("1");
if(xml http.readyState == 2) alert("2");
if(xml http.readyState == 3) alert("3");
if(xml http.readyState == 4) alert("4");
}
执行结果是点击一次按钮,1,2,3,4 依次的都会出现。
当他在服务器端的状态发生改变时,我们都能够检测到了
分享到:
相关推荐
AJAX响应信息是AJAX通讯中的一个重要的部分。理解如何处理响应信息,特别是在使用新的交互操作形式的时候,这一点非常重要的。本文解释了AJAX请求-响应过程的本质,并分析了如何处理AJAX响应信息。
1、ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth、google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行。...对于这一点来说,我个人是觉得
首先、AJAX是一种很酷的技术,一旦采用了AJAX,就能让你的Web页面, ...角度出发,来理解AJAX,就像我在本书的第一章AJAX我也行中那样,开发 出很愚蠢,甚至都没有资格被称之为AJAX应用的纯IE、XMLHTTP应用。
首先,AJAX是一种很酷的技术,一旦采用了AJAX,就能让你的Web页面, ...角度出发,来理解AJAX,就像我在本书的第一章AJAX我也行中那样,开发 出很愚蠢,甚至都没有资格被称之为AJAX应用的纯IE,XMLHTTP应用.
在 Web2.0 的时代里,不使用一点AJAX技术的网站,就会显得很老土,很落伍。 但是,这样的理解,其实是很肤浅的。仅仅是从一个外行,从一个使用者的角度出发,来理解 AJAX,就像我在本书的第一章 AJAX 我也行中那样,...
在Web2.0的时代里,不使用一点AJAX技术的网站,就会显得很老土,很落伍。但是,这样的理解,其实是很肤浅的。仅仅是从一个外行,从一个使用者的角度出发,来理解AJAX,就像我在本书的第一章AJAX我也行中那样,开发出...
角度出发,来理解AJAX,就像我在本书的第一章AJAX我也行中那样,开发 出很愚蠢,甚至都没有资格被称之为AJAX应用的纯IE、XMLHTTP应用。 AJAX更酷的一点在于,对于传统的Web开发人员来说,AJAX所运用的, 是更加先进...
仅仅是从一个外行,从一个使用者的 角度出发,来理解 AJAX,就像我在本书的第一章 AJAX 我也行中那样,开发 出很愚蠢,甚至都没有资格被称之为 AJAX 应用的纯 IE、XMLHTTP 应用。 AJAX 更酷的一点在于,对于传统的 ...
这是一个非常经典的树形结构。功能强大,易于理解,代码量很小,但是需要一点积分。内有详细说明
其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容ajax,这里只是怀怀旧,作为一个技术来玩玩),下面...
我对J2EE和.NET的一点理解 难分难舍的DSO(一) InternalsVisibleToAttribute,友元程序集访问属性 Essential .NET 读书笔记 [第一部分] NET FrameWork的Collections支持 .NET的反射在软件设计上的应用 关于跨程序集...
AJAX技术遵守REST准则的应用程序中简单和可伸缩的架构,凡是采用AJAX技术的页面简洁而又丰富,一个页面表现了丰富多彩的形态。 AJAX技术还使用了一种不同于XML格式的JSON文件格式,这个意义在哪里呢?在REST软件...
如果觉得我的文章能给您一点启发,不妨 star:sparkles:,想要订阅请 watch:eyes: 2018 文章 Vue中容易被忽略的知识点 对手淘移动开发适配的实例思考 初识createDocumentFragment Promise原理与实现探究的一种思路 Tip ...
这一点在JavaScript中其实并不新鲜,Mochikit和Dojo等已经实现有些日子了。由于jQuery 1.5的Ajax模块内置使用了延迟对象,因此现在通过jQuery编写Ajax程序将自动获得这一功能。 开发人员借此可以使用无法立即获得的...
它还有一个最大的特点就是注重实战,每个知识点都有一个完整的案例,包括需求分析、代码实现和结果展示三个部分,而且还包含两个综合性的案例,它的实践性之强是目前所有同类书都不具备的,恰好这一点又是初学者最...
如果您能够完整的学好这个项目(自己能够理解业务等),走进企业,您完全不需要去考虑工作是否可以胜任,只要您告诉您的面试官,您所了解CRM方面的业务实现之类的! 2.流行趋势 该项目使用流行的Struts 2 + Hibernate ...