Ajax工做原理以及经常使用的Ajax框架

1，关于同步和异步

异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。

ajax能够提高用户体验，它是利用异步请求方式的。打个比方，若是如今你家里所在的小区因 某种状况而面临停水，如今有关部门公布了两种方案，一是彻底停水8个小时，在这8个小时内彻底停水，8个小时后恢复正常。二是不彻底停水10 个小时，在这10个小时内水没有彻底断，只是流量比原来小了不少，在10个小时后恢复正常流量，那么，若是是你你会选择哪一种方式呢？显然是后者。

 

二、Ajax所包含的技术 

   1.使用CSS和XHTML来表示。

   2.使用DOM模型来交互和动态显示。

   3.使用XMLHttpRequest来和服务器进行异步通讯。

   4.使用javascript来绑定和调用。

 

3、Ajax原理和XmlHttpRequest对象

  Ajax原理:经过XmlHttpRequest对象来向服务器发异步请求得到数据，而后用javascript来操做DOM而更新页面。这其中最关键的一步就是从服务器得到请求数据。

  XMLHttpRequest是Ajax的核心机制.是一种支持异步请求的技术。简单的说，也就是javascript能够及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

  XMLHttpRequest属性:

 onreadystatechange  每次状态改变所触发事件的事件处理程序。

  responseText    从服务器进程返回数据的字符串形式。

   responseXML    从服务器进程返回的DOM兼容的文档数据对象。

  status          从服务器返回的数字代码，好比常见的404（未找到）和200（已就绪）

  readyState      对象状态值

　　　　0 (未初始化) 对象已创建，可是还没有初始化（还没有调用open方法）

　　　　1 (初始化) 对象已创建，还没有调用send方法

　　　　2 (发送数据) send方法已调用，可是当前的状态及http头未知

　　　　3 (数据传送中) 已接收部分数据，由于响应及http头不全，这时经过responseBody和responseText获取部分数据会出现错误

　　　　4 (完成) 数据接收完毕,此时能够经过经过responseXml和responseText获取完整的回应数据

function CreateXmlHttp() {

    //非IE浏览器建立XmlHttpRequest对象
    if (window.XmlHttpRequest) {
        xmlhttp = new XmlHttpRequest();
    }

    //IE浏览器建立XmlHttpRequest对象
    if (window.ActiveXObject) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
            try {
                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
            }
            catch (ex) { }

        }
    }
}

function Ustbwuyi() {


    var data = document.getElementById("username").value;
    CreateXmlHttp();
    if (!xmlhttp) {
        alert("建立xmlhttp对象异常！");
        return false;
    }

    xmlhttp.open("POST", url, false);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            document.getElementById("user1").innerHTML = "数据正在加载...";
            if (xmlhttp.status == 200) {
                document.write(xmlhttp.responseText);
            }
        }
    }
    xmlhttp.send();
}

  如上所示，函数首先检查XMLHttpRequest的总体状态而且保证它已经完成（readyStatus=4），即数据已经发送完毕。而后根据服务器的设定询问请求状态，若是一切已经就绪（status=200），那么就执行下面须要的操做。

对于XmlHttpRequest的两个方法，open和send，其中open方法指定了：

a、向服务器提交数据的类型，即post仍是get。

b、请求的url地址和传递的参数。

c、传输方式，false为同步，true为异步。默认为true。若是是异步通讯方式(true)，客户机就不等待服务器的响应；若是是同步方式(false)，客户机就要等到服务器返回消息后才去执行其余操做。咱们须要根据实际须要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，然后一个是会覆盖前一个的，这个时候固然要指定同步方式。

    Send方法用来发送请求。

 

　　知道了XMLHttpRequest的工做流程，咱们能够看出，XMLHttpRequest是彻底用来向服务器发出一个请求的，它的做用也局限于此，但它的做用是整个ajax实现的关键，由于ajax无非是两个过程，发出请求和响应请求。而且它彻底是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通讯的问题因此才会如此的重要。

　　如今，咱们对ajax的原理大概能够有一个了解了。咱们能够把服务器端当作一个数据接口，它返回的是一个纯文本流，固然，这个文本流能够是XML格式，能够是Html，能够是Javascript代码，也能够只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是同样的，不一样的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，而后再显示在页面。至于如今流行的不少ajax控件，好比magicajax等，能够返回DataSet等其它数据类型，只是将这个过程封装了的结果，本质上他们并无什么太大的区别。

 

四、ajax的优势

    一、页面无刷新，提高用户体验。

　 二、异步通讯，不须要打断用户的操做，迅速的响应能力。

　 三、ajax的原则是“按需取数据”，能够最大程度的减小冗余请求和响应对服务器形成的负担。

    四、基于标准化的并被普遍支持的技术，不须要下载插件或者小程序。

 

五、ajax的缺点

　　下面所阐述的ajax的缺陷都是它先天所产生的。

   　一、ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，可是它无法和js进行很好的合做。这是ajax所带来的一个比较严重的问题，由于用户每每是但愿可以经过后退来取消前一次操做的。那么对于这个问题有没有办法？答案是确定的，用过Gmail的知道，Gmail下面采用的ajax技术解决了这个问题，在Gmail下面是能够后退的，可是，它也并不能改变ajax的机制，它只是采用的一个比较笨可是有效的办法，即用户单击后退按钮访问历史记录时，经过建立或使用一个隐藏的IFRAME来重现页面上的变动。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，而后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）

可是，虽说这个问题是能够解决的，可是它所带来的开发成本是很是高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个很是严重的问题。

     二、安全问题

技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据创建了一个直接通道。这使得开发者在不经意间会暴露比之前更多的数据和服务器逻辑。ajax的逻辑能够对客户端的安全扫描技术隐藏起来，容许黑客从远端服务器上创建新的攻击。还有ajax也难以免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。

     三、对搜索引擎的支持比较弱。

     四、破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。关于这个问题，我曾经在开发过程当中遇到过，可是查了一下网上几乎没有相关的介绍。后来我本身作了一次试验，分别采用ajax和传统的form提交的模式来删除一条数据……给咱们的调试带来了很大的困难。

     五、另外，像其余方面的一些问题，好比说违背了url和资源定位的初衷。例如，我给你一个url地址，若是采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不一样的。这个和资源定位的初衷是相背离的。

     六、一些手持设备（如手机、PDA等）如今还不能很好的支持ajax，好比说咱们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的，固然，这个问题和咱们没太多关系。

 

 

六、ajax的几种框架 

　　目前咱们采用的比较多的ajax框架主要有ajax.dll,ajaxpro.dll,magicajax.dll 以及微软的atlas框架。Ajax.dll和Ajaxpro.dll这两个框架差异不大，而magicajax.dll只是封装得更厉害一些，好比说它能够直接返回DataSet数据集，前面咱们已经说过，ajax返回的都是字符串，magicajax只是对它进行了封装而已。可是它的这个特色能够给咱们带来很大的方便，好比说咱们的页面有一个列表，而列表的数据是不断变化的，那么咱们能够采用magicajax来处理，操做很简单，添加magicajax以后，将要更新的列表控件放在magicajax的控件以内，而后在pageload里面定义更新间隔的时间就ok了，atlas的原理和magicajax差很少。可是，须要注意的一个问题是，这几种框架都只支持IE，没有进行浏览器兼容方面的处理，用反编译工具察看他们的代码就能够知道。

 除了这几种框架以外，咱们平时用到的比较多的方式是本身建立xmlHttpRequest对象，这种方式和前面的几种框架相比更具备灵活性。另外，在这里还提一下aspnet2.0自带的异步回调接口，它和ajax同样也能够实现局部的无刷新，但它的实现实际上也是基于xmlhttprequest对象的，另外也是只支持IE，固然这是微软的一个竞争策略。