关于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",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 依次的都会出现。

当他在服务器端的状态发生改变时，我们都能够检测到了