浅谈AJAX 技术与优缺点

最近在学习有关 AJAX 的知识,上网查阅了一些有关 AJAX 的资料,主要是有关 AJAX的技术简介及其优缺点等。在这里,我想对我收集的资料做一些小小的总结,大部分资料都来自网上,本人在此只做分类总结,希望对和我一样正在学习 AJAX 的朋友有一定的帮助。
首先,我们先来了解一下AJAX 的基本概念
AJAX 简介
AJAX 代表了异步 JavaScript+XML 。这种技术首先由微软在 1999 年引入,并以 " 使用远程调用的 DHTML/JavaScript web 应用程序 " 著称。这一技术的基本思想是,允许一个互联网浏览器向一个远程页面 / 服务作异步的 HTTP 调用,并且用收到的结果更新一个当前 web 页面而不必刷新整个页面。根据这种技术创建者的意见,这种技术应能够改进客户端的体验 - 使得 HTTP 页面外观与使用感觉很类似于 Windows 桌面应用程序。
Adaptive Path 公司的 Jesse James Garrett 这样定义 Ajax
Ajax 不是一种技术。实际上,它由几种蓬勃发展的技术以新的强大方式组合而成。 Ajax 包含:
  • 基于XHTMLCSS标准的表示;
  • 使用Document Object Model进行动态显示和交互;
  • 使用XMLHttpRequest与服务器进行异步通信;
Ajax 的工作原理
Ajax
的核心是 JavaScript 对象 XmlHttpRequest 。该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之, XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。
具体来说,Ajax基于以下的技术:
XHTML:对应W3C的XHTML规范,目前是XHTML1.0。
CSS:对应W3C的CSS规范,目前是CSS2.0
DOM:这里的DOM主要是指HTML DOM,XML DOM包括在下面的XML中
JavaScript:对应于ECMA的ECMAScript规范
XML:对应W3C的XML DOM、XSLT、XPath等等规范
XMLHttpRequest:对应WhatWG的Web Applications1.0规范(http://whatwg.org/specs/web-apps/current-work/
接下来,我们来了解一下 AJAX 的适用场景与不适用场景
Ajax适用场景
  1.表单驱动的交互
  2.深层次的树的导航
  3.快速的用户与用户间的交流响应
  4.类似投票、yes/no等无关痛痒的场景
  5.对数据进行过滤和操纵相关数据的场景
  6.普通的文本输入提示和自动完成的场景

Ajax 不适用场景
  1.部分简单的表单
  2.搜索
 3.基本的导航
  4.替换大量的文本
  5.对呈现的操纵
现在,我们来了解一下 AJAX 的优缺点
这大概是学习 AJAX 的人都比较关心的方面了,一种新的语言,其优缺点往往能决定其未来的命运,AJAX 做为一个新宠,它的优缺点必然是大家关注的焦点,不多说,下面我来总结一下从网上收集到的资料。
AJAX优点:
1、最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。
2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理
4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
AJAX 技术比刷页方式节省带宽的比例换算公式如下:
(
交互次数 ( 刷页交互流量 -AJAX 交互量 )-(AJAX 版首次加增加量 ))/( 刷页 * + 首次加载页面大小 )
有一个国外对 Ajax 技术的试验: UsingAJAXtoImprovetheBandwidthPerformanceofWebApplications
一个 10k 的页面: 技术,在交互中只刷新网页中部分需要更新数据 2-3k ,传统的整页刷新模式需要整页重载
交互次数越多, 应用的带宽节省效果越明显; 整页刷新模式虽然需要重新载入图片等, 则不用; 在此次条件的试验过程中: ajax 技术总计节省了超过 61% 。远远超过预期的 50% 而且随着交互次数增加,节省率还会更高。
的最大亮点大概就是页面无刷新了, 使用异步模式可以减少用户等待,可以在画面上实现更多的功能更便利的交互以改善客户感受,在技术层面则可以带来更灵活的应用结构组织方式。
AJAX缺点:
1. 缺少一个没有标准之争、没有 back history 的浏览器
Ajax取消了back按钮,即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能,但是它没法和js进行很好的合作,这是ajax所带来的一个比较严重的问题。作为一个WEB的用户,我们已经习惯了有back按钮,这几乎是每个用户共同的习惯, AJAX 下点击链接是不 Redirect 页面,所以不存在后退和前进了,同样,没有后退和前进也就无存找浏览历史纪录了。 back history 存在的根本就是 url 的改变,在 AJAX 下人们发现不改 url 也同样能达到内容改变这个酷酷的特点。
用过Gmail的知道,Gmail下面采用的ajax技术解决了这个问题,在Gmail下面是可以后退的,但是,它也并不能改变ajax的机制,它只是采用的一个比较笨但是有效的办法,即用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏的IFRAME来重现页面上的变更。但是,虽然说这个问题是可以解决的,但是它所带来的开发成本是非常高的,和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。
2. 对搜索引擎的支持不好

3. 安全问题
ajax 的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有 ajax 也难以避免一些已知的安全弱点,诸如跨站点脚步攻击、 SQL 注入攻击和基于 credentials 的安全漏洞等。
4. 语言问题
I) 编写复杂、容易出错 (javascript 本是是个轻量级的小东西,现在被强迫重用起来,负担可想而知 )
II) 冗余代码更多了 (层层包含 js 文件是 AJAX 的通病,再加上以往的很多服务端代码现在放到了客户端)
III) 破坏了 Web 的原有标准
以上是我在收集AJAX方面知识的总结,可能还不是太全面,希望能给共同学习AJAX的朋友一些帮助.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方法的时候参数processData默认为true(该方法为jQuery独有的) 默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded 如果想发送不
form表单提交的几种方式 表单提交方式一:直接利用form表单提交 html页面代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Ins
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。常见的用户注册是用户输入用户名,后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示(当用户注册重名时将返回重新注册),或者稍微人性化一点就是在用户名文本框后添加一个检测按钮,让用户检测后再做注册。以上操作,对于用户体验方面来说是比较“差劲”的,一个很好的用户体验就是:当用户输入完注册用户名后,Web系统应能即时检查并即时_用户注册 实时异步检测
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在客户端和服务器之间创建复杂的JSON数据传输层。一、 引言毫无疑问,AJAX已经成为当今Web开发中一种强有力的用户交互技术,但是它的许多可能性应用仍然鲜为人知。在本文中,我们将来共同探讨如何 使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将_ajax技术可行性
文章浏览阅读2.2k次。/************************** 创建XMLHttpRequest对象 **************************/function CreateRequest(){ var xmlObj = null; try { xmlObj = new XMLHttpRequest(); } catch(e) {
文章浏览阅读3.7k次。在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖 掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有 空闲的对象,则使用此对象,否则将创建一个新的对象。下面是我最近写的一个简单的类:* XMLHttpReques_xmlhttprequest发送多个请求
文章浏览阅读3.1k次。Ajax 同一页面如何同时执行多个 XMLHTTP 呢,比如博客页,需要同时利用 Ajax 读取作者信息、文章信息、评论信息……我们的第一反应可能是创建多个全局 XMLHTTP 对象,但这并不现实。其实实现方式非常简单,就是给 onreadystatechange 对应的回调函数加上参数,以下代码是解决方案中一个函数中的一段代码。xmlhttp.open("GET", "ajax_proc_ajax响应多个mxl文件
文章浏览阅读1.5k次。数据岛指的是存在Html网页中的xml代码段,它在Html中形成了一个数据的集合,数据岛允许我们在Html网页中集成xml,对xml编写脚本.数据岛有它特有的形式,由标记xml开始,在开始标记中要有一个ID属性,用于指定该指定数据岛的名称。 (当然要以/xml结束).元素xml包含的内容就是xml代码。数据岛也分为2种:1)内嵌的数据岛形式2)外嵌的数据岛形式说了那么多废话,还_数据中岛计算模式
文章浏览阅读2.1k次。AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NET AJAX 并不包括在 AJAX 框架之中。刚开始学了 JQuqery, 众多的 $get(),...等等符号早已把我搞晕了。暂时就放弃了。后来学习 ASP.NET AJAX ,在微软的领导下,逐渐由服务器端转向客户端编程。 激起我客户端编程的兴趣,才想起学习一下了 Jquery. 随着WEB2._jquery ajax asp.net 认证
文章浏览阅读1.7k次。前段时间在用google map api的函数库的时候,发现里面的downloadUrl函数非常好用,所以自己写了一个。用腻了那些什么框架什么池,到头来发现越简单的东西越是适合我这种懒人。downloadUrl(url, callback, data);参数说明: url不用说了; callback是回调函数,函数调用的时候会有两个参数:data, responseCode,data就_xmlhttprequest downloadurl
文章浏览阅读956次。前些时间写了几篇关于XMLHTTP运用的实例.(可以到http://dev.csdn.net/user/wanghr100看之前的几编关于XMLHTTP的介绍.)近来看论坛上经常有人提问关于如何无刷新,自动更新数据.传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.但是,对于一些时效性很强的网站.传统的这种做法是不能满足的.我们可以让程序自动刷新.定时_后端xml怎么实现数据有救新增,没有就更新
文章浏览阅读3.3k次。 XMLHttpRequest调用XMLHttpRequest Call ●●●调用,回调,下载,抓取,实时,查询,远程通信(Remoting),远程通信脚本(RemoteScripting),同步,上传,XMLHttpRequest图6-2:XMLHttpRequest调用 目标故事Reta正在一个批发商网站上购买商品。每次她添加一个商品到购物车时,web站点发出_createxmlhttpre
文章浏览阅读1.3k次。function clearitem(){ var drp1 = document.getElementById("drp1"); while(drp1.options.length>0) { drp1.options.remove(0); } }//动态更改方法(根据城市代码取得该市商业区并添加到DropDownList中_dropdownlist根據動態變化
文章浏览阅读1.9k次。因為 Json.net 是有附原始碼的,他也附了單元測試的專案,底下是我額外增加的UnitTest,我的目標就是讓底下的測試可以pass,而且原來的Test 也要都能通過。 ValueTypeTest.csusing System;using NUnit.Framework;namespace Newtonsoft.Json.Test { [TestFixture] public cl_vb 無效的 json 基本型別
文章浏览阅读844次。利用XMLHTTP无刷新获取数据. 客户端和服务器端数据的交互有几种方法.1.提交,通过提交到服务器端.也称"有刷新"吧.2.通过XMLHTTP无刷新提交到服务器端,并返回数据.也称"无刷新"吧.利用XMLHTTP我们可以实现很多很强大的应用.这文章主要介绍它的一些简单的应用.附:因为XMLHTTP是IE5.0+支持的对象.所以你必须要有IE5.0+才能看到效果.client.htm_xmlhttp取源码没有更新
文章浏览阅读1.8k次。Json.Net 無法序列基本型別(string, int),Asp.Net Ajax 無法正確序列日期,AjaxPro序列出我不想要的_type字串 1. Json.Net 是我最常使用的序列/反序列json套件,標榜速度快,對於一對多關係的object 也都能正常運作, 己能滿足我平日的需要,但前幾天突然有個情況,我要序列的是一個泛型參數,該參數不一定是物object型別,有可能是st_token string in state start
文章浏览阅读1.3k次。转载自:http://www.cnblogs.com/JeffreyZhao/archive/2007/01/31/update_the_updatepanels_by_js.html众 所周知,UpdatePanel是通过Trigger来更新的。被设定为Trigger的控件在PostBack之后会被客户端所截获,并且使用 XMLHttpRequest对象发送内容,然后服务器端由ScriptMan_web.ui.updatepanel 和 updatepanel 的区别
文章浏览阅读1.9k次。有些时候,只是需要更新页面的一个部分甚至只是更新中间的几个数据却需要从服务器DOWN整个页面,导致各种资源的浪费。使用数据岛技术可以很好的解决这个问题:通过定时器或用户事件触发数据岛(XML对象)象服务器获取数据,在数据获取完成后,适时更新相关数据。示例HTML部分:http://localhost/WebService/LoadData/FeaturedService.asmx/GetScore_web数据岛
文章浏览阅读1k次。在页面上使用ActiveXObject的代价是很大的,如果我们的无刷新页面使用xmlhttp技术,我们或许需要频繁的建立xmlhttp对象,当然 我们也可以使用全局变量来cache一个xmlhttp对象实例。但是这样的方法适合于同步方式xmlhttp通信,而对于异步方式xmlhttp通信将 会出现问题。由于没有了进程的堵塞,用户可能再次调用同一个xmlhttp实例,如果这时前一个通信未完成,那么就
文章浏览阅读998次。 by Lokesh Dhakar 译: croc查看原文概要:Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.最新更新 Version 2.0 图片集: 分组相关的图片并且能轻松的导航它们 视觉特效: 奇特的自适应调整 向后兼容: yes! 点击这里查看实例_on lightbox 2 by lokesh dhakar