关于Javascript中ajax应用详解

1:定义
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。
Ajax 不是一种单一的技术。实际上是几种技术,每种技术都各有其特色,这些技术以全新强大方式融合在一起。Ajax 包含:

使用 XHTML 和 CSS 基于标准的呈现
使用文档对象模型的动态显示和交互
使用 XML 和 XSLT 的数据交换和操作
使用 XMLHttpRequest 的异步数据检索
将它们绑定到一起的 JavaScript
虽然这个技术说明从某种程度上讲有些过时了,但基本模式依然是完整的:HTML 和 CSS 呈现数据和样式,DOM 和相关方法支持页面实时更新,XHR 支持与服务器通信,JavaScript 安排整体显示。

2.原理
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

以往我们浏览网页的原理是由Client向Server提交页面申请,再由Server将申请通过HTTP传回给Client生成浏览页面:

使用Ajax后的工作原理如下图,可见通过Ajax在用户交互方面有了很大改进,用户可以不用为提交了Form而长时间等待服务器应答,而且通过Ajax也可以开发出华丽的Web交互页面。

要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。

3:XMLHttpRequest
XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。所以我们先从XMLHttpRequest讲起,来看看它的工作原理。www.111cn.net

首先,我们先来看看XMLHttpRequest这个对象的属性。

它的属性有:

属性  描述

onreadystatechange     每次状态改变所触发事件的事件处理程序。

responseText    从服务器进程返回数据的字符串形式。

responseXML  从服务器进程返回的DOM兼容的文档数据对象。

status   从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)

status Text   伴随状态码的字符串信息

readyState  对象状态值

对象状态值:

readyState          含义

0 (未初始化)     对象已建立,但是尚未初始化(尚未调用open方法);

1 (初始化)    对象已建立,尚未调用send方法;

2 (发送数据)   send方法已调用,但是当前的状态及http头未知;

3 (数据传送中)  已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误;

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

但是,由于各浏览器之间存在差异,所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。

 代码如下 复制代码

function CreateXmlHttp()
{
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest)
{
xmlhttp=new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(e)
{
try{
xmlhttp=new ActiveXObject(“msxml2.XMLHTTP”);
}
catch(ex){}
}
}
}
function Ustbwuyi()
{
var data=document.getElementById(“username”).value;
CreateXmlHttp();
if(!xmlhttp)
{
alert(“创建xmlhttp对象异常!”);
return false;
}
xmlhttp.open(“POST”,url,false);
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementById(“user1″).innerHTML=”数据正在加载…”;
if(xmlhttp.status==200)
{
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}

如上所示,函数首先检查XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),即数据已经发送完毕。然后根据服务器的设定询问请求状态,如果一切已经就绪(status=200),那么就执行下面需要的操作。

对于XmlHttpRequest的两个方法,open和send,其中open方法指定了:

向服务器提交数据的类型,即post还是get。
请求的url地址和传递的参数。
传输方式,false为同步,true为异步。默认为true。如果是异步通信方式(true),客户机就不等待服务器的响应;如果是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式,在某些页面中,可能会发出多个请求,甚至是有组织有计划有队形大规模的高强度的request,而后一个是会覆盖前一个的,这个时候当然要指定同步方式。
Send方法用来发送请求。

知道了XMLHttpRequest的工作流程,我们可以看出,XMLHttpRequest是完全用来向服务器发出一个请求的,它的作用也局限于此,但它的作用是整个ajax实现的关键,因为ajax无非是两个过程,发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。

现在,我们对ajax的原理大概可以有一个了解了。我们可以把服务器端看成一个数据接口,它返回的是一个纯文本流,当然,这个文本流可以是XML格式,可以是Html,可以是Javascript代码,也可以只是一个字符串。这时候,XMLHttpRequest向服务器端请求这个页面,服务器端将文本的结果写入页面,这和普通的web开发流程是一样的,不同的是,客户端在异步获取这个结果后,不是直接显示在页面,而是先由javascript来处理,然后再显示在页面。至于现在流行的很多ajax控件,比如magicajax等,可以返回DataSet等其它数据类型,只是将这个过程封装了的结果,本质上他们并没有什么太大的区别。

4:优缺点
ajax的优点
Ajax的给我们带来的好处大家基本上都深有体会,在这里我只简单的讲几点:

最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。
使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。
可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
ajax的缺点
下面我着重讲一讲ajax的缺陷,因为平时我们大多注意的都是ajax给我们所带来的好处诸如用户体验的提升。而对ajax所带来的缺陷有所忽视。

下面所阐述的ajax的缺陷都是它先天所产生的。

1.ajax干掉了back按钮

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

一些手持设备(如手机、PDA等)现在还不能很好的支持ajax,比如说我们在手机的浏览器上打开采用ajax技术的网站时,它目前是不支持的,当然,这个问题和我们没太多关系。

5 .GET与POST
当我们不通过重新加载页面,用Ajax访问服务器的时候,有两个选择可以将请求信息传送到服务器上。这两个选择分别是GET和POST。

GET和POST有很多东西可写,我这里就只具体说ajax里的两者运用,具体的下次再来写吧…

GET的目的就如同其名字一样是用于获取信息的。它旨在显示出页面上你要阅读的信息。浏览器会缓冲GET请求的执行结果,如果同样的GET请求再次发出,浏览器就会显示缓冲的结果而不是重新运行整个请求。这一流程不同于浏览器的处理过程,但是它是有意设计成这样以使GET调用更有效率。GET调用会检索要显示在页面中的数据,数据不会在服务器上被更改,因此重新请求相同数据的时候会得到相同的结果。

POST方法应该用于你需要更新服务器信息的地方。如某调用要更改保存在服务器上的数据,而从两个同样的POST调用返回的结果或许会完全不同,因为第二个POST调用的值与第一个的值不相同,这是由于第一个调用已经更新了其中一些值。POST调用通常会从服务器上获取响应而不是保持前一个响应的缓冲。

Get 与 Post 的区别
Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别。

get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。
get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,因服务器的不同而异。
get安全性非常低,post安全性较高。
<form method=”get” action=”a.asp?b=b”>跟<form method=”get” action=”a.asp”>是一样的,也就是说,method为get时action页面后边带的参数列表会被忽视;而<form method=”post” action=”a.asp?b=b”>跟<form method=”post” action=”a.asp”>是不一样的。
另外 Get请求有如下特性:它会将数据添加到URL中,通过这种方式传递到服务器,通常利用一个问号?代表URL地址的结尾与数据参数的开端,后面的参数每一个数据参数以“名称=值”的形式出现,参数与参数之间利用一个连接符&来区分。 Post请求有如下特性:数据是放在HTTP主体中的,其组织方式不只一种,有&连接方式,也有分割符方式,可隐藏参数,传递大批数据,比较方便。

通过以上的说明,现在我们大致了解了什么时候用get什么时候用post方式了吧,对!当我们在提交表单的时候我们通常用post方式,当我们要传送一个较大的数据文件时,需要用post。当传递的值只需用参数方式(这个值不大于2KB)的时候,用get方式即可。

6.跨域
ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以就诞生了很多跨域的解决方案。当本域和子域间进行访问时最简单的就是设置document.domain,当不同域的访问,大概有下列方法:

1.web端代理的方式,即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面,由该页面代替用户页面完成交互,从而返回合适的结果。

2.iframe,解决方案就是用window.location对象的hash属性,利用JS改变hash值网页不会刷新,可以这样实现通过JS访问hash值来做到通信,大体就是AB网站各嵌入一个对方网站的iframe,然后通过连续不断的监听hash值的变化来进行通信。比如A网站通过改变B网站iframe的hash后,B网站监听到hash的变化后就进行处理,这种方式需要开发者可以控制两个网站的代码。

3.通过script标签来请求,原理就是在本域内的A内生成一个JS标签,它的SRC指向请求的另外一个域的某个页面B,这个src里面通常会加一个A页面定义好的回调函数,B返回数据即可,可以直接返回调用这个回调函数,这种跨域的通信方式被称为JSONP,此方案存在的缺陷是, script的src属性完成该调用时采取的方式时get方式,如果请求时传递的字符串过大时,可能会无法正常运行。

4.window.name,window.name是一种解决跨域数据传输的新技术,通过在iframe中加载一个跨域的HTML文件,并且在HTML文件中设置window.name的值为需要传给接受者的数据,接收者就可以取得到window.name的值并且返回,比较关键的是同源策略的影响对location的控制不受限制,所以需要加载一个代理的页面来让发送页面读取window.name.

5.使用flash,原理是JavaScript将数据提交给本域下的 Flash,通过 Flash 中转去访问其他域的接口,只需要其他域的根目录下有一个crossdomain.xml文件,文件中设置允许所有域名或允许本域访问即可。

具体情况例子我会再开一篇文章详细介绍跨域问题。

7.安全
由于 Ajax 被用于开发很多可在 Web 上看到的应用程序,因此它的流行使其成为攻击者在 JavaScript 代码中寻找漏洞的目标。

Ajax 存在的核心是可以用它来创建数据驱动网站。真正吸引攻击者的不是可以将 Ajax 用作 Web 应用程序开发工具,而是数据,不管是金融数据、个人数据还是机密数据,都是珍贵的在线商品,Ajax 再次发现自己成为了网络犯罪的焦点。

a:
基于浏览器的攻击
JavaScript 是 Ajax 的基础,恶意代码经常使用它。要让一个基于浏览器的攻击生效,恶意代码必须能够利用 Web 技术(在此是 JavaScript),使浏览器自己运行攻击者希望运行的代码。www.111cn.net

举一个简单的例子,在发生一个基于浏览器的攻击时,受害者会发现其主页被篡改,或者当受害者在其浏览器地址栏中输入一个 URL 时,会被重定向到另一个网站。尽管这令人讨厌且很麻烦,但这些都不是最坏的情形。

许多基于浏览器的攻击被设计用来阻止受感染电脑发送通知或减少其他攻击。通常,对受害者浏览器进行的攻击会阻止他们访问恶意软件清除程序或使用 Web 订阅文件更新。其他威胁还包括浏览器代理和击键记录。

预防措施
保护自己不受基于浏览器的攻击比较容易,只需禁用 Java 技术、JavaScript 和 Microsoft ActiveX 控件即可。不过,这样做通常会阻止运行许多 Web 应用程序。相反,您应该确保 操作系统、浏览器软件和防病毒软件的及时更新。另外,还可以使用一个信誉良好的防火墙程序,并在下载文件和访问网站时小心谨慎。

b:
SQL 注入
SQL 注入如何成为了 Ajax 安全的一个威胁?毕竟 Ajax 中没有 “S”。很简单,SQL 注入之所以构成威胁是因为 Ajax 在客户端运行。Web 应用程序服务器端仍然需要 SQL 数据库。

当攻击者在网站开发不完善的区域(比如一个表单)输入恶意代码时,就会发生 SQL 注入。如果受攻击网站比较脆弱,那么该数据库的所有内容都可能会曝光。密码数据库曝光或者从在线支付系统盗取信用卡数据使用的就是这种攻击方法。最近,入侵者利用这种方法从明星网站窃取粉丝邮箱地址。尽管没有盗窃财物,但是垃圾邮件发送者利用了这些邮箱地址,借用明星产品为幌子来传播恶意软件。

与其他 Web 技术一样,应减轻使用 Ajax 开发的应用程序中的 SQL 注入。不过,仅使用基于 JavaScript 的 sanitation 技术尚不足以防止这类利用。JavaScript 是在客户端运行而不是在服务器端运行,这才是发生 SQL 注入的主要原因。

预防措施
在使用 Ajax 时,要保护您的数据库,则必须验证用户输入,而且该验证是在服务器 端进行的。参数化语句或者预处理语句,这些都是为了阻止 SQL 注入,因为不能将值直接输入数据库或者 SQL 语句中。相反,在使用占位符(也称为绑定变量)时,占位符的值是通过一个单独的 API 调用提供的。

c:
跨站点脚本
XSS 是注入攻击的另一个示例,恶意代码被注入到应用程序。易受 XSS 攻击的 Web 应用程序包括基于浏览器的脚本,就像那些常见的 Ajax 攻击一样。通常,攻击者利用这类弱点将恶意脚本传递给对该网站毫无戒心的访问者。这些脚本负责盗用身份,窃取 Cookie,暗中监视访客的 Web 使用,访问机密信息,甚至阻止服务攻击。

2010 年成为新闻焦点的著名的 XSS 攻击涉及到社会信息网络。这次攻击是从一个名为 @Matsta 的用户开始的,造成当浏览者鼠标滑过恶意消息时,出现 JavaScript 弹出窗口。其他 XSS 对该网站的攻击导致用户被重定向到一个调查网站或者内容不健康的网站。

预防措施
在使用 Ajax 进行开发时,可以采用以下步骤防止出现 XSS 漏洞

确保 JavaScript 变量被引用。
使用 JavaScript 十六进制编码。
使用 JavaScript Unicode 编码。
避免反斜杠编码("、' 或 \)。
使用 JSON.parse 或 json2.js 库来分析 JSON。
避免使用 eval() 方法分析 JSON,它执行任何包含 JSON 的脚本。
d:

Ajax 桥接
Ajax 应用程序被构建用来连接托管它们的网站。作为一项安全措施,来自站点 A 的应用程序不能连接到站点 B。然而,许多站点依靠第三方网站和数据源来创建混搭网站。人们创建了 Ajax 桥接服务,通过一个主机提供 Web 服务,该服务将充当代理,用来在该浏览器上运行的 JavaScript 和第三方站点之间转发数据。使用 Ajax 桥接,现在站点 A 可以向来自站点 B 的访客提供数据或内容。

正如 Ajax 不是一项特定技术而是一个技术集合,桥接也不是一个特定漏洞。Ajax 桥接为恶意黑客提供了额外攻击途径,增加了威胁。诸如 XSS 和 SQL 注入等攻击可以通过 Ajax 桥接服务传递。尽管站点 B 可能用尽一切办法保护其 Web 应用程序免受访客带来的相应威胁,但是站点 A 可以使用 Ajax 桥接攻击站点 B,这常常被忽视。

预防措施
要避免桥接漏洞,则需要在使用桥接来访问时与第三方的站点之间建立信任。您也应该审核第三方站点以何种方式访问您的站点,并扫描可能被桥接利用的任何漏洞。

 好吧,以上基本是我觉得ajax有关的技术和一些东西,内容不全,每个点都值得我们去深入学习..

 

时间: 2024-10-30 22:19:40

关于Javascript中ajax应用详解的相关文章

比较全面的C 、Java、JavaScript中的正则表达式详解_正则表达式

什么是正则表达式? 正则表达式(Regular Expression) 就是用某种模式去匹配一类字符串的公式.如你要在一篇文章中查找第一个字是"罗"最后一个字是"浩"的三个字的姓名,即"罗 * 浩":那么"罗 * 浩"就是公式,也称作 模式(Pattern) ,这篇文章就是 要匹配的串( 或叫文本 text) .再如,你要检查输入的一个字符串是否是 126 邮箱的格式,你得制定一个规则去查检,这种规则就是正则表达式. 从入门开

Javascript中this关键字详解

Quiz 请看下面的代码,最后alert出来的是什么呢? 1 var name = "Bob"; 2 var nameObj ={ 3 name : "Tom", 4 showName : function(){ 5 alert(this.name); 6 }, 7 waitShowName : function(){ 8 setTimeout(this.showName, 1000); 9 } 10 }; 11 12 nameObj.waitShowName();

javascript中this指向详解_基础知识

JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发JavaScript其实很难掌握,有些基本概念让人匪夷所思.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的对象.有一种观点认为,只有正确掌握了 JavaScript 中的 this 关键字,才算是迈入了 JavaScript 这门语言的门槛.在主流的面向对象的语言中(例

javascript中Function类型详解_javascript技巧

Function 类型 function类型,毋庸置疑是js中相当重要的一个玩意. 1.这玩意首先是一个对象,也就是说它是一个引用类型.陈述:一听说是对象,是不是很有一种它的基类是object对象错觉感,No, 它和object是独立的2个东西.当你typeof function 时,返回的是 funciton 并非 object 2.每个函数都是 Function 对象的一个实例,它与其他引用对象一样具有属性和方法.由于它是对象所以函数名是指向函数对象的指针 关于函数的声明的语法支持: <sc

javascript中indexOf技术详解_javascript技巧

JavaScript提供了几种技术,来在字符串中搜索一个单词.数字或其他的一串字符.搜索可能很方便,例如,如果你想要知道访问者使用哪种Web浏览器来浏览你的站点.每个Web浏览器在一个字符串中标识关于自己的信息,该字符串包含了很多不同的统计数据.可以通过在一个Web页面中添加下面这段JavaScript,并且在Web浏览器预览,从而看到这个字符串: <script> alert(navigator.userAgent): </script> Navigator是一个Web浏览器对象

javascript中this关键字详解_javascript技巧

不管学习什么知识,习惯于把自己所学习的知识列成一个list,会有助于我们理清思路,是一个很好的学习方法.强烈推荐. 以下篇幅有点长,希望读者耐心阅读. 以下内容会分为如下部分: 1.涵义 1.1:this涵义 1.2:this指向的可变性 2.使用场合 2.1:全局环境 2.2:构造函数 2.3:对象的方法 3.使用注意点 3.1:避免多层嵌套this 3.2:避免数组处理方法中的this 3.3:避免回调函数中的this 1.涵义 1.1:this涵义 在我写的一篇关于 构造函数与new关键字

JavaScript中this绑定详解

this 可以说是 javascript 中最耐人寻味的一个特性,就像高中英语里各种时态,比如被动时态,过去时,现在时,过去进行时一样,无论弄错过多少次,下一次依然可能弄错.本文启发于<你不知道的JavaScript上卷>,对 javasript 中的 this 进行一个总结. 学习 this 的第一步就是明白 this 既不是指向函数自身也不指向函数的作用域.this 实际上是在函数被调用时发生的绑定,它指向什么地方完全取决于函数在哪里被调用. 默认绑定 在 javascript 中 ,最常

javascript中new关键字详解_基础知识

和其他高级语言一样javascript中也有new关键字,我们以前认知的new是用来创建一个类的实例对象,但在js中万物皆是对象,为何还要new关键字呢,其实js中new关键字不是用来创建一个类的实例对象,而是用于继承. 接下来,本文将带你一起来探索JS中new的奥秘... function Animal(name){ this.name = name; } Animal.color = "black"; Animal.prototype.say = function(){ conso

Javascript中arguments对象详解_基础知识

在上篇文章中我们讨论了javascript中的默认参数,这篇文章,我们来讨论下javascript的arguments参数对象. 如下例的一个函数,我们如何根据传入参数的不同来做不同的处理呢? 复制代码 代码如下: function addAll () {     // What do we do here? } // Should return 6 addAll(1, 2, 3); // Should return 10 addAll(1, 2, 3, 4); 幸运的是,javascript有