Ajax的内部实现机制、原理与实践小结

一、Ajax是什么
AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术。作为创建交互式网页应用的网页开发技术,它有以下特点:
使用XHTML+CSS来表示信息
使用JavaScript操作DOM(Document Object Model)进行动态显示及交互
使用XML和XSLT进行数据交换及相关操作
使用XMLHttpRequest对象与Web服务器进行异步数据交换
使用JavaScript将所有的东西绑定在一起
使用SOAP以XML的格式来传送方法名和方法参数
类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的"派生/合成"式(derivative/composite)的技术正在出现,如"AFLAX"。
AJAX的应用使用支持以上技术的Web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Mac OS的Safari。但是Opera不支持XSL格式对象,也不支持XSLT。(摘自于:http://zh.wikipedia.org/zh-cn/AJAX)

二、Ajax诞生的背景,为什么使用Ajax
我们都知道,用户通过浏览器产生一个请求后,此请求通过HTTP协议,向服务器请求所要的资源,如果是一个图片链接,则请求的就是一个图片资源,如果是一个文件链接,则请求的是一个文件资源,多数情况下,请求的是整个网页,网页又根据自身的HTML代码,请求各个具体的资源,比如图片、音频等。随着网站的发展,用户量越来越大,服务器的压力也越来越大,这就暴露出了一个问题,即:大多数用户在请求资源时,新请求的那个网页中,与现在的那个网页有很多相同的地方。但是由于请求的是整个网页,它会重新从服务器获取所有的资源(当然,有很多图片、文件之类的会从客户端中获取),这就是大大的浪费。
为了解决这个问题,Ajax就诞生了,它主要的作用就是,通过XMLHttpRequest对象获取服务器资源,局部刷新用户正在浏览页面,大大减轻了服务器的压力,由于只获取的是需要更新的资源,相对整个页面的资源来说,浏览器也服务器之间的数据交互量也大大减少(大约只有原来的5%),大大加快了页面的加载速度。

三、Ajax发展史
该技术原属于微软的一个研发小组,为了允许客户端发送HTTP请求,研发出来的,但没有得到广泛应用。后经Google广泛用于它的应用程序进行异步通讯交互,如google讨论组、google地图等,Ajax这个词由《Ajax: A New Approach to Web Applications》一文所创,该文的迅速流传提高了人们使用该项技术的意识,后来就出现了疯狂的Ajax革命。

四、Ajax实践
AJAX 的要点是 XMLHttpRequest 对象,所有的实现也是通过XMLHttpRequest对象操作的。但是在浏览器大战的今天,不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
复制代码 代码如下:
// Mozilla, Safari,Opera 8.0+...
function ajaxFunction(){
var http_request;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持Ajax");
return false;
}
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('There was a problem with the request.');
}
}
}

解释:首先创建一个XMLHttpRequest对象http_request,如果支持window.XMLHttpRequest,则用new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器,如果不支持,则尝试针对Internet Explorer 6.0+ 的Msxml2.XMLHTTP组件创建XMLHttpRequest,如果也不支持,则尝试针对 Internet Explorer 5.5+ 的Microsoft.XMLHTTP组件,如果仍然不支持,则说明用户的浏览器版本太低了,提示用户“您的浏览器不支持AJAX”。
XMLHttpRequest对象的onreadystatechange方法用于,状态改变时要执行的方法,用来处理这个响应。
readyState的状态是:
  0 请求未初始化(open() 之前)
  1 请求已提出,正在装载 (调用 send() 之前)
  2 装载完毕,请求已发送(这里通常可以从响应得到内容头部)
  3 交互中,请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
  4 请求已完成(可以访问服务器响应并使用它)
所以当readyState等于4时,就表示一个完整的服务器响应已经收到了,接着,函数会检查HTTP服务器响应的状态值。当HTTP服务器响应的值为200时,表示状态正常。这时候才真正执行客户端要执行的操作。
读取从服务器返回过来的数据,有两种方式:
  1、http_request.responseText:以文本字符串的方式返回服务器的响应
  2、http_request.responseXML:以XMLDocument对象方式返回响应

五、Ajax缺陷与不足
1、可能破坏浏览器后退按钮的正常行为;
2、使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中;
3、Ajax的无刷新重载,由于页面的变化没有刷新重载那么明显,所以容易给用户带来困扰——用户不太清楚现在的数据是新的还是已经更新过的;现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等;
4、一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax。

六、Ajax工具

1、jQuery 开源JS框架,写得更少,做得更多;
2、ASP.NET AJAX Extension 微软AJAX工具箱;
3、ExtJS 一个自YUI延伸出来的Ajax框架。

时间: 2024-12-22 07:48:24

Ajax的内部实现机制、原理与实践小结的相关文章

Ajax的内部实现机制、原理与实践小结_AJAX相关

一.Ajax是什么 AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术.作为创建交互式网页应用的网页开发技术,它有以下特点: 使用XHTML+CSS来表示信息 使用JavaScript操作DOM(Document Object Model)进行动态显示及交互 使用XML和XSLT进行数据交换及相关操作 使用XMLHttp

关于ajax的实现方法与原理机制

关于ajax的实现方法与原理机制 ajax这个名字据说是asynchronous 网页特效 + xml的简写,实际上,它由下列几种技术组合而成.    1.使用css教程和xhtml来表示.    2. 使用dom模型来交互和动态显示.    3.使用xmlhttprequest来和服务器进行异步通信.    4.使用javascript来绑定和调用. ajax的原理   xmlhttprequest是ajax的核心机制,它是在ie5中首先引入的,是一种支持异步请求的技术.简单的说,也就是jav

mongodb集群搭建 副本集内部机制原理

副本集故障转移,主节点是如何选举的?能否手动干涉下架某一台主节点. 官方说副本集数量最好是奇数,为什么? mongodb副本集是如何同步的?如果同步不及时会出现什么情况?会不会出现不一致性? mongodb的故障转移会不会无故自动发生?什么条件会触发?频繁触发可能会带来系统负载加重? Bully算法 mongodb副本集故障转移功能得益于它的选举机制.选举机制采用了Bully算法,可以很方便从分布式节点中选出主节点.一个分布式集群架构中一般都有一个所谓的主节点,可以有很多用途,比如缓存机器节点元

《 C++程序设计:原理与实践(进阶篇.》导读

本节书摘来自华章出版社< C++程序设计:原理与实践(进阶篇)>一书中作者[美] 本贾尼·斯特劳斯特鲁普(Bjarne Stroustrup) 著 刘晓光 李忠伟 王刚 译     前 言 Programming: Principles and Practice Using C++, Second Edition 该死的鱼雷!全速前进. --Admiral Farragut 程序设计是这样一门艺术,它将问题求解方案描述成计算机可以执行的形式.程序设计中很多工作都花费在寻找求解方案以及对其求精上

推荐系统——从原理到实践,还有福利赠送!

之前流水账似的介绍过一篇机器学习入门的文章,大致介绍了如何学习以及机器学习的入门方法并提供了一些博主自己整理的比较有用的资源.这篇就尽量以白话解释并介绍机器学习在推荐系统中的实践以及遇到的问题... 也许很多点在行家的眼里都是小菜一碟,但是对于刚刚接触机器学习来说,还有很多未知等待挑战. 所以读者可以把本篇当做是机器学习的玩具即可,如果文中有任何问题,还请不吝指教. 本篇将会以下面的步骤描述机器学习是如何在实践中应用的: 1 什么是推荐系统? 2 机器学习的作用 3 机器学习是如何使用的? 4

《网络安全原理与实践》一1.10 实例研究

1.10 实例研究 网络安全原理与实践下面的实例研究着眼于一个典型的企业网络的安全策略设计和实现.我们将要查看这个安全策略设计所经历的不同步骤,并且讨论最终结果和为了保持网络架构安全而进行的努力. 实例研究中使用的公司假定叫做Biotech公司.Biotech公司是一个中小型的企业,它大约有5000用户使用由一个中心站点和两个远程分支机构组成的网络,在每个分支站点上有250个用户.另外,大约250个用户在远程工作.Biotech的大部分业务是制药,并且不是通过他们的公共Web服务器来管理这个业务

《网络安全原理与实践》一1.1 网络安全目标

1.1 网络安全目标 网络安全原理与实践网络安全(Network Security)是抵御内部和外部各种形式的威胁,以确保网络安全的过程.为了深入彻底地理解什么是网络安全,必须理解需要被保护的网络上所面临的威胁以及用于抵御这些威胁的安全机制. 通常,在网络上实现最终的安全目标可通过下面的一系列步骤完成,每一步都是为了澄清攻击和用于阻止攻击的保护方法之间的关系.下面的步骤是Fites等在Control and Security of Computer Information Systems(M.F

《网络安全原理与实践》一1.4 风险评估

1.4 风险评估 网络安全原理与实践确定资产和威胁因素后,在网络安全部署方案中的下一步是确定目标网络环境中有多少种可能的威胁.需要明白的是虽然部署可以抵御所有类型攻击的安全策略可能很重要,但同时这种安全机制的成本也会很高.因此,必须做适当的风险分析,找出那些最可能发生的攻击,并且投入最大的物力和财力去抵御它们. 可以用多种方法完成风险评估.但是,针对某种类型攻击进行风险判断的两个主要因素是: 针对某类资产而发起的某种攻击的可能性:一旦攻击成功所造成的损失.这种攻击的可能性在风险评估中是需要重点考

《网络安全原理与实践》一1.6 网络安全策略的要素

1.6 网络安全策略的要素 网络安全原理与实践为了透彻了解什么是网络安全策略,我们可以对网络安全策略最重要的元素进行分析以帮助理解.RFC 2196列出以下内容作为一个安全策略的要素. 1.计算机技术购买准则,指明了需要的或者涉及的安全特性.这些特性应该是对现有的企业IT产品采购计划的补充. 2.保密策略,定义例如监控电子邮件.记录键盘输入和访问用户文件等与保密相关的合理的期望的行为. 3.访问策略,用于定义访问权限,指定最终用户.运营部门的员工和管理者可接受的使用准则,以便保护网络资产不会丢失