频道导航

浅谈AJAX 技术与优缺点

2020-05-29 Ajax 前端之家

前端之家收集整理的这篇文章主要介绍了浅谈AJAX 技术与优缺点，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_301_0@ 最近在学习有关 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 包含：

502

基于

XHTML

和

CSS

标准的表示；

502

使用

Document Object Model

进行动态显示和交互；

502

使用

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 本是是个轻量级的小东西，现在被强迫重用起来，负担可想而知 )