动态载入脚本
这个技术的特点克服了XHR最大的缺点:跨域访问。使用如下:
varscriptElement=document.createElement('script');
scriptElement.src='http://any-domain.com/javascript/lib.js';
document.getElementsByTagName('head')[0].appendChild(scriptElement);
动态载入脚本不像XHR那样可以随意设置请求头部,参数只能通过GET发送,只有脚本从服务器完全返回以后你才能访问脚本。
由于这种方式的响应结果是可执行的JS代码,不需要特殊的处理和分析,因而性能十分可观。不过你仍然需要注意,使用这种方式时你对服务器完全没有控制,你无法获得脚本载入期间的信息。而且你也要意识到动态载入的脚本一旦加载完成,它就能够对本页面的数据内容进行修改、转发或者重定向,所以使用时需要格外小心。
更多信息可以看这里:http://book.51cto.com/art/200812/99672.htm
MulipartXHR
这个是以上Ajax请求数据几种方式中最新的技术。MXHR的特点是,只使用一个请求来从服务器将资源发送给客户端,只要组装好了不论是CSS文件、脚本文件、HTML片段还是base64编码的图片。客户端以字符串的形式接受,然后根据MIME类型和其它传输的信息来解析。
示例-使用一个请求下载多个图片资源:
varreq=newXMLHttpRequest();
req.open('GET','rollup_images.php',true);
req.onreadystatechange=function(){
if(req.readyState==4){
splitImages(req.responseText);
}
};
req.send(null);
首先请求页面,然后将响应数据利用方法解析。当然这需要服务器首先要将图片信息转化为base64编码的字符串,同时你需要指定一个连接符号,以便在客户端分割这些字符串。
假定分割符是unidcode编码的1
functionsplitImages(imageString){
varimageData=imageString.split("\u0001");
varimageElement;
for(vari=0,len=imageData.length;i<len;i++){
imageElement=document.createElement('img');
imageElement.src='data:image/jpeg;base64,'+imageData[i];
document.getElementById('container').appendChild(imageElement);
}
}
任何能够在JS中通过字符串处理的数据类型都可以使用这种方式传输。以下是几个常用函数:
functionhandleImageData(data,mimeType){
varimg=document.createElement('img');
img.src='data:'+mimeType+';base64,'+data;
returnimg;
}
functionhandleCss(data){
varstyle=document.createElement('style');
style.type='text/css';
varnode=document.createTextNode(data);
style.appendChild(node);
document.getElementsByTagName('head')[0].appendChild(style);
}
functionhandleJavaScript(data){
eval(data);
}
当MXHR传输的数据越来越庞大时,最好的方式是接受一部分数据以后立刻开始处理,而不是等待全部数据加载完成再处理。通过监听XHR的readyState3来处理。
varreq=newXMLHttpRequest();
vargetLatestPacketInterval,lastLength=0;
req.open('GET','rollup_images.php',true);
req.onreadystatechange=readyStateHandler;
req.send(null);
functionreadyStateHandler{
if(req.readyState===3&&getLatestPacketInterval===null){
//Startpolling.
getLatestPacketInterval=window.setInterval(function(){
getLatestPacket();
},15);
}
if(req.readyState===4){
//Stoppolling.
clearInterval(getLatestPacketInterval);
//Getthelastpacket.
getLatestPacket();
}
}
functiongetLatestPacket(){
varlength=req.responseText.length;
varpacket=req.responseText.substring(lastLength,length);
processPacket(packet);
lastLength=length;
}
一旦readyState3第一次触发,一个计时器启动。每隔15ms检测新数据,当找到一个事先约定的分隔符之后收集数据,然后处理这部分数据。
更完美的实现比较复杂但是值得研究,你可以看看这里:http://techfoolery.com/mxhr/
这个技术的缺点就是获取的数据你无法缓存,比如图片、CSS文件等;另外就是老版本的IE不支持监听readyState3,也不支持data:URLs。(IE8支持,IE6和IE7需要变通方法)
不过由于它的优点实在是吸引人,所以这些情况你最好使用MXHR:
1)如果这个页面包含很多其他页面不需要的资源,尤其是图片;
2)如果站点的每个页面的脚本或CSS都已经组装为一个独特的请求,亦即站点内跨页面访问没有共同的请求。
减少HTTP请求能够全面提升页面的性能,尤其是你需要传输100张图片,只用一个请求通常能为站点的用户体验带来质的飞跃。测试页面:http://techfoolery.com/mxhr/
分享到:
相关推荐
javascript - ajax ppt javascript - ajax ppt
javascript-ajax基本属性方法详解,介绍javascript基础和ajax使用
Ajax-JavaScript-AJAX-JSON.zip,基本ajax json jquery,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况...
JS正则表达式详解-JavaScript-AJAX
一套很好的JavaScript教学视频,JavaScript-AJAX系列视频教程(完整无水印版)
javascript实例应用---Ajax与XMLHttpRequest.rarjavascript实例应用---Ajax与XMLHttpRequest.rarjavascript实例应用---Ajax与XMLHttpRequest.rar
高性能JavaScript编程-高清-带书签.pdf高性能JavaScript编程-高清-带书签.pdf高性能JavaScript编程-高清-带书签.pdf高性能JavaScript编程-高清-带书签.pdf
英文版教程,介绍了AJAX与Django框架的整合方案
Ajax-wc-ajax-product-filter.zip,Woomerce AJAX产品过滤器-是一个插件,允许您根据类别、属性和价格轻松过滤产品。您可以对产品进行排序,导航到下一页和上一页,而无需重新加载该页。,ajax代表异步javascript和xml...
2010 ajax javascript - JavaScript & Ajax for Dummies [A.Harris, 2010].pdf
Django JavaScript Integration - AJAX and jQuery 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如...
本书的核心内容是围绕Web前端开发的三大技术要素——HTML、CSS和JavaScript来深入地探讨编写高质量的HTML代码、CSS代码和JavaScript代码的方法、技巧、规范和最佳实践,从而为编写易于维护的Web前端代码打下坚实的...
ajax--ajax原生写法。axios发送请求。promise概念。git版本管理器使用。具体:请求与相应、浏览器和服务器、接口、回调函数、事件循环、宏任务与微任务、form表单提交、serialize插件、JSON、async,await、git仓库...
Ajax-ember-ajax.zip,在ember应用程序中发出ajax请求的服务,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的...
编写高性能JavaScript
JavaScript-初识ajax、ajax封装、及json简单实战案例(下)
Ra-Ajax is a Managed Ajax Library for ASP.NET (and hence Mono) which makes it possible for you to exclusively develop in a known ASP.NET WebControls environment without even caring about JavaScript at...
javascript-ajax:JavaScript Ajax
征服Ajax-javascript部分 ajax javascript课件 征服Ajax-javascript部分 ajax javascript课件