JavaScript—Ajax技术

传统的web页面和应用

对于传统的web页面和应用，每次用户点击页面上的某个部分时，浏览器都会向服务器发出一个请求，服务器再做出响应，返回一个完整的新页面。即使用户的web浏览器很聪明，知道对图像和样式表之类的内容进行缓存，但是浏览器和服务器还是存在着大量的来回通信。

改进的web页面

通过使用Ajax，页面和应用只向服务器请求他们真正需要的东西，也就是页面中需要修改的部分，这意味着通信量更小，更新更少，用户等待页面刷新的时间也更短。

Ajax到底是什么？

Ajax并不是一个全新的技术，不需要从头学起，它只是采用一种新的方式来考虑如何使用原先已经存在的技术完成现在的事。

怎样才能让页面Ajax起来呢？

Ajax是设计和构建页面的一种方法，页面会发出异步请求，使用户可以继续工作而不是等待响应。Ajax页面是使用标准Internet技术构建的，使用的技术如下

• XHTML
• 层叠样式表
• JavaScript
• XmlHttpRequest
• XML&Json
• DOM

提示：

1、什么是异步？

　　在Ajax中，可以向服务器发出请求而无需用户等待，这就是一个异步请求。这正是Ajax的核心所在。

2、浏览器可以从服务器同时请求多项内容

　　利用异步请求，可以确保浏览器在后台工作，避免因完全页面刷新而中断用户的工作。

3、什么时候使用Ajax和异步请求？

　　如果你希望用户工作的同时继续做一些处理，就需要一个异步请求。如果你的用户在继续操作之前需要从你的应用得到一个响应，那就让用户等待，这就需要一个同步请求。

创建请求对象

不同的浏览器会以不同的方式创建请求对象，不过我们可以创建一个函数来处理特定于浏览器的所有细节。

function createRequest(){
    try{
　　　　//除了ie外，几乎都可以使用
        request = new XMLHttpRequest();
    }catch(tryMS){
        try{
　　　　　　　　//大多数ie
            request = new ActiveXObject("Msxml2.XMLHTTP");
            
    }catch(otherMS){
        try{
　　　　　　　　//一些其他ie
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }cache(failed){
            request = null;
        }
    }
}
    return request;
}

问：什么是XMLHTTPRequest？

　　XMLHttpRequest是大多数浏览器对象对请求对象的叫法，可以把它发送到服务器并从服务器得到相应而无需

重新加载整个页面。

问：那什么是ActiveXObject？

　　ActiveXObject是微软特定的一种编程对象，它有两个不同的版本，有不同的浏览器支持。

得到请求对象之后。。。

　　1、配置属性。请求对象有很多属性需要设置，如连接哪个URL，使用get还是post

　　2、告诉请求对象当服务器响应时做什么？浏览器会查看请求对象的另一个属性，onreadystatechange.这个属性允许我们指定一个回调函数，服务器响应时就要运行这个回调函数。

　　3、发出请求。

问：当服务器结束对一个请求的处理时就会执行一个对调函数吗？

　　不是这样的，实际上每次服务器响应请求时就会由浏览器调用回调函数，即使此时服务器并没有完全处理完请求。大多数服务器都会作出多次响应，指示接收到请求，或者正在处理请求，或者已经处理完请求。每次服务器响应一个请求时，它会把请求对象的readyState属性设置为一个不同的值。

问：readyState属性是什么？

　　这是一个数，指示服务器处理到哪个阶段。初始值为0，服务器处理完一个请求时，这个属性的值是4。

问：status？

　　这是http状态码，如404就代表禁止访问，200代表成功。

function getDetail(itemName){
    request = createRequest();//request是全局函数，回调函数需要使用
    if(request == null){
        alert("Unable to createRequest");
        return;
    }
    var url = "getDetail.php?ImageID="+escape(itemName);
//ture 表示这要作为一个异步请求等待服务器的响应
    request.open("GET",url,true);
    request.onreadystatechange=displayDetails;
    request.send(null);
}

问：浏览器执行顺序？

　　1、浏览器请求url中的资源

　　2、浏览器开始解析界面，请求其中引用的其他文件

　　3、如果文件是一个脚本，浏览器会解析这个脚本，创建对象，并执行所有不包含在任何函数中的语句。

　　4、加载并解析了引用的所有文件后，浏览器触发window.onload事件

问：是不是用户一旦请求一个页面就会运行window.onload?

　　没那么快，首先浏览器会解析XHTML和XHTML中引用的所有文件，如css和JavaScript。所以脚本中位于函数之外的代码都会在window。onload事件中指定的函数之前运行。

要与浏览器通信，而不是服务器

　　实际上，我们是与浏览器通信，而不是服务器，然后再由浏览器与服务器通信，浏览器将你的请求对象发送到服务器。

//回调函数
function show(){
    if(request.readyState == 4){
        if(request.status == 200){
            if(request.responseText == "xxx"){

            }
        }
    }
}

多个事件处理程序

　　使用DOM Level 2 方法为单个事件指定多个事件处理函数。addEventListener（）函数。

      A.addEventListener("mouseover",showHint,false);

== A.attachEvent("onmouseover",showHint);

　　A.addEventListener("mouseover",buttonOver,false);

　　浏览器不能保证事件的顺序

　　IE中提供了attachEvent（）方法。两者是等价的

function addEventHandler(obj,eventName,hander){
    if(document.attachEvent){
        obj.attachEvent(on+enentName,hander);
    }else if(document.addEventListener){
        obj.addEventListener(eventName,hander,false);
    }
}

Js中的“this”关键字总是指向正在执行的这个函数的所有者，如果方法bark（）由一个名为Dog的对象调用，那么bark中的this就会指向这个Dog对象。

使用DOM Level0指定事件处理程序时，发生事件的元素就是所有者。如果指定tab.onclick=showTab;那么showTab（）中的this就会指向tab元素。在使用DOMLevel2浏览器时（ff，safari，opera），事件处理框架将事件处理程序的所有者设置为发生了该事件处理程序所对应事件的对象。但是ie没有实现DOMLevel2 。Ie有自己的框架，所以在IE中，事件处理函数为这个事件框架所有，而不属于xhtml页面上通过点击事件激活的对象，也就是说showTab（）中的“this”是指ie事件框架，而不是web页面上的一个tab元素。

使用DOM level2和addEventListener或者使用attachEvent（）和IE注册一个事件处理程序时，这两个框架都会向事件处理程序传入一个Event类型的对象。事件处理程序可以使用这个对象来确定页面上哪个对象被一个事件激活以及具体触发了哪个事件。

type：所触发事件的事件名（click或者mouseover）

target:事件的目标。即页面上被激活的对象。

支持DOM Level2的浏览器，如ff，s和o，都会向处理程序一个Event对象，Event的target对象指示触发了事件的对象。

IE7向事件处理程序传入了一个Event对象，Event的srcElement对象指示触发了事件的对象。

较早版本的ie通过window对象的一个名为srcElement对象指示触发了事件的对象。

function getActivatedObject(e)}{
    var obj;
    if(!e){
        //较早版本的ie实际上不会发送e
        obj = window.event.srcElement;
    }
    //ie7有srcElement属性
    else if(e.srcElement){
        obj = e.srcElement;
    }
    else{
    //dom level 2 浏览器
        obj = e.target;
    }
    return obj;
}

如果建立两个不同的请求，使用两个不同的请求对象，这两个请求不会互相等待，也不会让用户等待。每个对象都有自己的数据，而不是共享数据。

重构代码

　　重构代码是指抽取出代码共同的部分，并把这些部分放在一个易于维护的函数或方法中，重构可以使代码更易于更新和维护。