Ajax —— 多并发连接及前端设计模式

　  Ajax简介

　  Ajax是Asynchronous Javascript and XML的缩写，这个术语由Jesse James Carrett创造，最早出现在他于2005年2月发表的文章“Ajax: A New Approach to Web Applications”。其主要的特点就是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。

　　Ajax并非一门新的开发语言，而是一组技术的专用术语，包括DHTML和XMLHTTPRequest对象，而DHTML通常是指HTML、CSS和javascript组合使用。Ajax的本质也就是从服务器动态请求数据后使用这些数据更改页面。

　　实现Ajax的方式有许多中，例如：利用img标签的src属性或者script标签的src属性，这种传输协议式的实现相对于XMLHttpRequest对象方式复杂，并且存在着各式各样的问题，因而最常见的方式。Ajax的基础知识点就讨论到这里，今天的重点是Ajax的并发和使用技巧。

　　

 

 

 

 

 

 

 

 

　　Ajax并发

　　Ajax是以异步的方式向服务器提交需求，这就会存在多个ajax请求同时提交，或者迭代提交的情况，这将导致资源竞争（racing），设计较好的情况下，可以通过disable提交按钮的缓解此类问题，但一旦出现迭代提交request的情况，就可能出现XMLHttpRequest对象的引用被覆盖，但具体会发生什么样的情况，取决于Ajax的编码。

 　　Ajax在异步的情况下，并发数并非没有限制，Wininet 会限制每个服务器的连接数，限制它对单个 HTTP 服务器的同时连接的数量。如果超过此限制时，请求将阻止，直到完成当前的连接之一。这是设计使然，是与 HTTP 规范和行业标准。例如IE8并发数就限制在2，Firefox 21限制在6。当然IE的限制可以在注册表中修改，HKEY_LOCAL_MACHINE\SOFTWARE\   Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_MAXCONNECTIONSPERSERVER。

 

 

ersion	HTTP 1.0 server (broadband connection)	HTTP 1.1 server (broadband connection)	HTTP 1.0 server (dial-up connection)	HTTP 1.1 server (dial-up connection)
Internet Explorer 7 and earlier	4	2	4	2
Internet Explorer 8	6	6	4	2

　　超出上述限制，超出的请求将会被浏览器阻塞，直到先前的请求已经完成才会启动。在这里建立使用队列来解决这些问题。基本思路，生成XHR对象之后，检测当前并发数量是否大于最大请求的上限，若大于上限，则将XHR对象压入队列之中，否则就可以直接发送，并且可以继续增加并发请求数量。请求完成的时候，进行响应处理，并在结束之时进行并发数量减一操作，接着就可以检测队列中是否有等待请求，若有等待请求，就发送给队首的XHR对象进行请求。

 　　Ajax前端设计模式

　　更换部分HTML

　　最常见的Ajax任务也就是向服务器请求更新部分HTML内容，例如：更新股票的标价，对查询请求进行部分更新。

function resHandler(){
    if(req.readystate === 4 && req.status === 200){
        ele.innerHTML = req.responseText;
    }      
}

　　读取XML数据

　　若希望javascript代码在页面中使用数据执行一些智能化的任务，可以使用结构化的方式将数据发送到浏览器客户端，最适合的格式有：XML、JSON等。

function resHandler(){
    if(req.readystate === 4 && req.status === 200 && req.responseXML){
        var root = req.responseXML.getElementById('root');
        //读取XML数据...
    }
}

　　与上一种模式最大的区别是使用了req.responseXML，responseXML是一个XML文档对象模型（DOM），这种模型只有在 服务器的响应是正确编码的XML时才是可用的。responseXML对象可以直接读取使用，但是当数据结构比较复杂之时，解析和检索XML文档需要花不 少时间，这时候可以考虑使用JSON格式。

　　读取JSON数据

　　返回JSON格式的优点是能够使浏览器高效地解析，并创建使用起来更加简单的JSON数据。JSON格式更加容易读取和管理，因而Ajax开发时，json格式更加受到欢迎。

function resHandler(){
    if(req.readystate === 4 && req.status === 200){
        var json = JSON.parse(req.responseText);
        //...
    }
}

　　避免浏览器缓存

　　若对同一个URL请求两次，浏览器将使用缓存中的页面。因此，最常见的解决办法就是URL拼接一个随机数或者拼接一个时间戳，这样浏览器就不会 反悔一个缓存的结果。个人最喜欢的是想URL添加当前时间的数字值。url +=(new Date()).getTime()。

function addTimeStamp(url) {
            var getTimestamp = new Date().getTime();
            if(url.indexOf("timestamp=") > -1) return url;
            if (url.indexOf("?") > -1) 
                url = url + "&timestamp=" + getTimestamp;
            else 
                url = url + "?timestamp=" + getTimestamp;                
            return url;
        }

　　

　　THML模板　　

　　当然为了开发的便捷，你可以对HTML的修改进行模板化，通过从服务器响应读取对应的数据对HTML模板进行填充，这种方案只是更换部分HTML的升级模式。