Ajax总结篇
本文主要总结整理Ajax的一些常用的基础知识,适合初学者。
# 一、Ajax简介、优劣势、应用场景以及技术
-
Ajax简介 :
Asynchronous Javascript And XML(异步的JavaScript和XML)- 它并不是一种单一的技术,而是有机利用一系列交互式网页应用相关的技术所形成的结合体
AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
-
优点:
- 页面无刷新,用户体验好。
- 异步通信,更加快的响应能力。
- 减少冗余请求,减轻了服务器负担
- 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序
-
缺点:
ajax干掉了back按钮,即对浏览器后退机制的破坏。- 存在一定的安全问题。
- 对搜索引擎的支持比较弱。
- 破坏了程序的异常机制。
- 无法用
URL直接访问
-
ajax应用场景- 场景 1. 数据验证
- 场景 2. 按需取数据
- 场景 3. 自动更新页面
-
AJAX包含以下五个部分:ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。- 使用
CSS和XHTML来表示。 - 使用
DOM模型来交互和动态显示。 - 数据互换和操作技术,使用
XML与XSLT - 使用
XMLHttpRequest来和服务器进行异步通信。 - 使用
javascript来绑定和调用。
- 使用
在上面几中技术中,除了XmlHttpRequest对象以外,其它所有的技术都是基于web标准并且已经得到了广泛使用的,XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标准,因为目前几乎所有的主流浏览器都支持它

- 第一张图尤其说明了传统
Web应用程序的结构与采用了AJAX技术的Web应用程序的结构上的差别 - 主要的差别,其实不是
JavaScript,不是HTML/XHTML和CSS,而是采用 了XMLHttpRequest来向服务器异步的请求XML数据

- 再来看第二张图,传统的
Web应用模式,用户的体验是割裂的,点击->等待-> 看到新的页面->再点击->再等待。而采用了AJAX技术之后,大部分的计算工作,都是在用户不察觉的情况下,交由服务器去完成了


# 二、创建ajax的步骤
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。原生创建ajax可分为以下四步
# 1、创建XMLHttpRequest对象
Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键,发送异步请求、接受响应以及执行回调都是通过它来完成
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
- 创建
XMLHttpRequest对象的语法:
var xhr = new XMLHttpRequest();
@前端进阶之旅: 代码已经复制到剪贴板
- 老版本的
Internet Explorer(IE5 和 IE6)使用ActiveX对象: