日期:2014-05-16  浏览次数:20551 次

关于AJAX的一点理解

转载: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