AJAX 简单讲解
AJAX(Asynchronous Javascript And XML:“异步JavaScript和XML”)AJAX 已经是老生常谈的话题了,它最早起源于1997年,由 Microsoft 发明了其中的关键技术并由 Google 将其发扬光大。为什么是 Google 呢,这又是一个悲伤的故事,事实上在1995年 Microsoft 成功推出 IE5 之际就已经开始支持 XmlHttpRequset 对象,令人遗憾的是 Microsoft 高层没有看到它的前景,以至于后来者 Google 成为 AJAX 技术的最卓越的推动者和实践者,从而奠定 Google 在 AJAX 发展史上的领先地位。
从1997这个关键词上我们就知道 AJAX 并不是一种新的技术,距今已经19年过去了 AJAX 的每次修订依然没有突破性的改变,由原本存在的几种技术的组成的聚合而成:
XMLHttpRequestXMLHttpRequest 是 AJAX 的核心机制,XMLHttpRequest 最早出现在 IE5 中,是一种支持异步请求的技术(即 javascript 异步向服务器提出请求和处理响应,而不阻塞线程,以达到无刷新的效果)。 以上是很官方的对 XMLHttpRequest 的解释,这里不再重复造轮子,下面介绍一些简单的 XMLHttpRequest 属性:
但由于不同浏览器之间存在差异,所以 JAVASCRIPT 创建一个 XMLHttpRequest 对象需要不同的方法。这个差异主要体现在 IE 和其它浏览器之间,JAVASCRIPT 函数首先检查 XMLHttpRequest 的整体状态并且保证它已经完成,然后才可以执行后续操作,其中涉及到的一些方法如下:
在 AJAX 的整体工作流程中,我们将服务器端的 API 接口看成一个简单的数据接口,它接受由XMLHttpRequest向服务器端发送的请求信息并返回纯文本流(XML、Html、string、DataSet、json 或 Javascript 代码)。 /** * 使用原生js封装ajax * 兼容xhr对象 */ function createXHR(){ if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器 return new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ // IE6浏览器 var version = [ "MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp",]; for(var i = 0; i < version.length; i++){ try{ return new ActiveXObject(version[i]); }catch(e){ //todo } } }else{ throw new Error("您的系统或浏览器不支持XHR对象!"); } } /** * 仍然需要更改 on 2015/11/18. * 异步的时候需要触发onreadystatechange事件 * readyStatus=4 即数据已经发送完毕 * status=200 一切已经就绪 */ var xhr = createXHR(); xhr.onreadystatechange = function(){ // 执行完成 if(xhr.readyState == 4 && xhr.status==200){ //HTTP响应已经完全接收才调用 callBack(); } } XHR2 (XMLHttpRequest Level2)目前仍有一些浏览器没有实现 XHR2,所以在应用 AJAX 进行跨域访问之前,首先检测该浏览器是否支持跨域访问: if(typeof xhr.withCredentials!=undefined){ //浏览器支持 xhr2 。 }else{ //浏览器支持不 xhr2 。 } XHR2 提供一系列新事件,在 XHR1 中我们一般只应用 onreadystatechange,然后检查状态值再决定下一步操作,XHR2 提供 onload 回调函数简化了这一步骤,在接收完数据的时候即可触发。 xhr.onload=function(){ //加载完成,进行下一步 todo。 } XHR2 的 onprogress事件的回调函数的事件参数有两个重要属性:loaded和total,用来计算百分值。 xhr.onprogress=function(e){ console.log('Dwonloading:'+Math.ceil(e.loaded/e.total*100)+'%'); } XDomianRequestXDomainRequest.aspx) 与 XHR2 功能上类似,且在 XHR2 之前出现,在 IE 中 XDomainRequest 和 XMLHttpRequest 是两个不同的对象, var xhr = new XDomainRequest(); xhr.onprogress=function(e){ console.log('Dwonloading:'+xhr.responseText.length); }; xhr.onload=function(){ //todo } 关注点:
XMLHttpRequest 取舍之道“鱼,我所欲也,熊掌亦我所欲也;二者不可得兼,舍鱼而取熊掌者也”,XMLHttpRequest 实现了页面无刷新更新数据,从而提升用户体验,减少页面整体的请求次数,减轻服务器和带宽的压力,但同时 XMLHttpRequest 也破坏了浏览器的后退机制(解决办法:通过创建或使用一个隐藏的IFRAME来重现页面上的变更)、破坏了程序的异常机制、违背了url和资源定位的初衷、不经意间会暴露比以前更多的数据和服务器逻辑、跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等等问题。 另外,有一些需要注意的地方
以及: 由于同源策略的限制,XHR(XMLHttpRequest)对象不能直接与非同源的网站进行数据交互,那么如何安全并合乎规则的突破这一限制呢? 在 HTML5 的概念形成之后,W3C 于2008年2月提出 XMLHttpRequest Level 2 (简称 XHR2)草案用以实现了跨域访问,全新的事件,请求进度、响应进度以及其他的一些新功能。与此同时 IE 也提出了 XDomianRequest ,XDomianRequest在功能上于 XHR2 类似。 浏览器检查 Access-Control-Allow-Origin,具体可参考Http Access Control。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |