ajax 技术和原理分析

ajax所包含的技术
大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。

在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。

ajax原理和XmlHttpRequest对象

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
所以我们先从XMLHttpRequest讲起，来看看它的工作原理。
首先，我们先来看看XMLHttpRequest这个对象的属性。
它的属性有：
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据。

ajax的优点
Ajax的给我们带来的好处大家基本上都深有体会，在这里我只简单的讲几点：
1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
　 2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
　 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

ajax的缺点
下面我着重讲一讲ajax的缺陷，因为平时我们大多注意的都是ajax给我们所带来的好处诸如用户体验的提升。而对ajax所带来的缺陷有所忽视。
下面所阐述的ajax的缺陷都是它先天所产生的。
1、ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。
2、安全问题
技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。关于这个问题，我曾经在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来我自己做了一次试验，分别采用ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。
5、另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。例如，我给你一个url地址，如果采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
6、一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，比如说我们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的，当然，这个问题和我们没太多关系。

赞 (0)

相关推荐

  • 完成了AJAX树附原理分析

    首先要纠正一个上篇博文<Rails中的Ajax初体验>中的一个错误:上篇博文中,我说"要在Rails中使用Ajax,局部模板是必须的",经实践检验,是错误的,特此更正.实践是检验真理的唯一标准,此言不虚.经过项目中真正通过RJS实现AJAX树,可知,通过使用insert_html.replace_html等辅助方法,可直接操作页面上的元素,无须使用局部模板. 整个的实现过程还是有点曲折: 之前使用的生成树结构的页面,是利用从服务器获取的所有数据,通过一系列javascrip

  • 图文解析AJAX的原理

    图文解析AJAX的原理

    先上原理图: 背景: 1.传统的Web网站,提交表单,需要重新加载整个页面. 2.如果服务器长时间未能返回Response,则客户端将会无响应,用户体验很差. 3.服务端返回Response后,浏览器需要加载整个页面,对浏览器的负担也是很大的. 4.浏览器提交表单后,发送的数据量大,造成网络的性能问题. 问题: 1.如何改进? 2.AJAX是什么? 3.有什么优势? 4.有什么缺点? 一.什么是 AJAX 1.为什么需要AJAX 当需要从服务器获取数据,并刷新页面的操作,如果不采用AJAX,则需

  • 利用iframe实现ajax跨域通信的实现原理(图解)

    利用iframe实现ajax跨域通信的实现原理(图解)

    在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧.纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求. 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌

  • 谈谈Ajax原理实现过程

    谈谈Ajax原理实现过程

    1.什么是AJAX? AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用: 使用XHTML+CSS来标准化呈现: 使用XML和XSLT进行数据交换及相关操作: 使用XMLHttpRequest对象与Web服务器进行异步数据通信: 使用Javascript操作Document Object Model进行动态显示及交互: 使用JavaScript绑定和处理所有数据. 2.AJ

  • JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.

  • Ajax工作原理深入理解

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行.而这也让微软感到无比的尴尬,因为早在97年,微软便已经发明了ajax中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,并且微软之前已经开始在它的一些产品中应用ajax,比如说MSDN网站菜单中的一些应用.遗憾的是,不知道出于什么想法,当时微软发明了aja

  • 关于Ajax技术原理的3点总结

    ajax:Asynchronous Javascript and XML   异步Javascript 和XML. 是一种创建交互式网页应用的网页开发技术. 1.0 优势:         1.1 通过异步模式,提升了用户体验.         1.2 优化了浏览器与服务器之间的传输,减少了不必要的数据往返,减少了带宽占用.         1.3 Ajax引擎在客户端运行,承担了一部分本来由服务器承担的共组,从而减少了大用户量下的服务器负载. 2.0 工作原理 Ajax核心是Javascrip

  • AJAX的原理—如何做到异步和局部刷新【实现代码】

    Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新.那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢?状态如何change了呢(观察者模式)?则是通过客户端对服务的状态询问(定期轮询)所实现的. 详解: 1.  XMLHttpRequest 负责与服务器端的通讯,其内部有很多重要的属性:readyStatus=4,status=200等等.当XMLHttpRequest

  • 浅析Ajax的 原理及优缺点

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行.而这也让微软感到无比的尴尬,因为早在97年,微软便已经发明了ajax中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,并且微软之前已经开始在它的一些产品中应用ajax,比如说MSDN网站菜单中的一些应用.遗憾的是,不知道出于什么想法,当时微软发明了aja

  • ajax 技术和原理分析

    ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLHttpRequest来和服务器进行异步通信. 4.使用javascript来绑定和调用. 在上面几中技术中,除了XmlHttpRequest对象以外,其它所有的技术都是基于web标准并且已经得到了广泛使用的,XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标准,因为目

  • Spring mvc AJAX技术实现原理解析

    简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术. 在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来.Google Suggest能够自动帮你完成搜索单词. Google Suggest 使用 AJAX

  • Ajax技术组成与核心原理分析

    本文主要为大家分析了Ajax技术组成原理,供大家参考,具体内容如下 1.Ajax 特点:局部刷新.提高用户的体验度,数据从服务器商加载 2.AJax的技术组成 不是新技术,而是之前技术的整合 Ajax: Asynchronous Javascript And Xml;(异步的JavaScript和XML) 包括的技术:JavaScript.XML.CSS.XMLHttpRequest 异步:发送请求以后,不等结果,由回调函数处理. JavaScript:向服务器发送请求,获得返回结果,更新页面

  • AJAX 客户端响应速度提高分析

    理论上AJAX技术在很大的程度上可以减少用户操作的等待时间,同时节约网络上的数据流量.而然,实际情况却并不总是这样.用户时常会抱怨用了AJAX的系统响应速度反而降低了. 笔者从事AJAX方面的研发多年,参与开发了目前国内较为成熟的AJAX平台-dorado.根据笔者的经验,导致这种结果的根本原因并不在AJAX.很多时候系统响应速度的降低都是由不够合理的界面设计和不够高效的编程习惯造成的.下面我们就来分析几个AJAX开发过程中需要时刻注意的环节. 合理的使用客户端编程和远程过程调用 客户端的编程主

  • VBS脚本病毒原理分析与防范

    网络的流行,让我们的世界变得更加美好,但它也有让人不愉快的时候.当您收到一封主题为"I Love You"的邮件,用兴奋得几乎快发抖的鼠标去点击附件的时候:当您浏览一个信任的网站之后,发现打开每个文件夹的速度非常慢的时候,您是否察觉病毒已经闯进了您的世界呢?2000年5月4日欧美爆发的"爱虫"网络蠕虫病毒.由于通过电子邮件系统传播,爱虫病毒在短短几天内狂袭全球数百万计的电脑.微软.Intel等在内的众多大型企业网络系统瘫痪,全球经济损失达几十亿美元.而去年爆发的新欢

  • PDO防注入原理分析以及使用PDO的注意事项总结

    PDO防注入原理分析以及使用PDO的注意事项总结

    本文详细讲述了PDO防注入原理分析以及使用PDO的注意事项,分享给大家供大家参考.具体分析如下: 我们都知道,只要合理正确使用PDO,可以基本上防止SQL注入的产生,本文主要回答以下两个问题: 为什么要使用PDO而不是mysql_connect? 为何PDO能防注入? 使用PDO防注入的时候应该特别注意什么?   一.为何要优先使用PDO? PHP手册上说得很清楚: Prepared statements and stored procedures Many of the more mature

  • Ajax技术(WEB无刷新提交数据)-

    Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的. 二.引用 Ajax这个概念的最早提出者Jesse James Garrett认为: Ajax是Asynchronous JavaScript and XML的缩写. Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发

  • SSH框架网上商城项目第28战之使用Ajax技术局部更新商品数量和总价

    SSH框架网上商城项目第28战之使用Ajax技术局部更新商品数量和总价

    之前,把项目部署了一下,玩了玩,今天完善了一下购物车中修改商品数量就能局部更新相应的总价的功能,大家都知道这得用Ajax实现,我之前也没学Ajax,刚好借助这个小功能,去简单学习一下Ajax的知识. 1. 问题的分析 先看一下页面中的情况: 功能如上,在没有Ajax之前,一般都是根据用户修改的值去找Action,然后返回新的jsp页面重新加载整个页面,完成数字的更新.但是有了Ajax技术后,我们可以利用Ajax技术局部刷新要改变的地方,而不是重新加载整个页面.首先看一下上图对应的jsp部分的代码

  • Javascript异步表单提交，图片上传，兼容异步模拟ajax技术

    前言: 咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容ajax,这里只是怀怀旧,作为一个技术来玩玩),下面的内容需要有一定的js基础,要不然理解起来会比较困难. 注意事项: 这是我bBank里面的一个方法,现在我把他提取出来成一个通用方法来讲解. bBank 框架介绍:http://www.cnblogs.com/bruceli/archive/20

随机推荐