`
liyiye
  • 浏览: 427038 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

ajax技术原理及工作原理

阅读更多

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

 


Ajax(Asynchronous JavaScript + XML)的定义

基于web标准(standards-based presentation)XHTML+CSS的表示;

使用 DOM(Document Object Model)进行动态显示及交互;

使用 XML 和 XSLT 进行数据交换及相关操作;

使用 XMLHttpRequest 进行异步数据查询、检索;

使用 JavaScript 将所有的东西绑定在一起。
英文参见Ajax的提出者Jesse James Garrett的原文。

类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。

AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。

与传统的web应用比较

传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。

Ajax应用程序的优势在于:

1. 通过异步模式,提升了用户体验

2. 优化了
浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用

3. Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。



  Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

  在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能:

    动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。

    提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在某购物车页面,当更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载整个页面的数据。如果使用Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可以将静态表格刷新为内容可编辑的表格。用户单击Done之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。

  一切皆有可能!但愿它能够激发您开始开发自己的基于Ajax的站点。然而,在开始之前,让我们介绍一个现有的Web站点,它遵循传统的提交/等待/重新显示的范例,我们还将讨论Ajax如何提升用户体验。

   Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。

我们以两个验证通行证帐号是否存在的例子来讲述AJAX在实际中的应用:

(1)用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在;

(2)以XMLDocument对象方式返回响应来验证金山通行证帐号是否存在;

首先,我们需要用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求, XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入,被称为XMLHTTP。 后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类,不过它们创建XMLHttpRequest类的方法不同。

对于Internet Explorer浏览器,创建XMLHttpRequest 方法如下:

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");

由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致,为了更好的兼容不同版本的Internet Explorer浏览器,因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类,上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。

对于Mozilla﹑Netscape﹑Safari等浏览器,创建XMLHttpRequest 方法如下:xmlhttp_request = new XMLHttpRequest();

如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作。 为了解决这个问题,如果服务器响应的header不是text/xml,可以调用其它方法修改该header。

xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');

在实际应用中,为了兼容多种不同版本的浏览器,一般将创建XMLHttpRequest类的方法写成如下形式:

try{
if( window.ActiveXObject ){
for( var i = 5; i; i-- ){
try{
if( i == 2 ){
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }
else{
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" ); }
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Content-Type","gb2312");
break;}
catch(e){
xmlhttp_request = false; } } }
else if( window.XMLHttpRequest )
{ xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType)
{ xmlhttp_request.overrideMimeType('text/xml'); } } }
catch(e){ xmlhttp_request = false; }

在定义了如何处理响应后,就要发送请求了。可以调用HTTP请求类的open()和send()方法,如下所示:

xmlhttp_request.open('GET', URL, true);
xmlhttp_request.send(null);

open()的第一个参数是HTTP请求方式—GET,POST或任何服务器所支持的您想调用的方式。 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求。

第二个参数是请求页面的URL。

第三个参数设置请求是否为异步模式。如果是TRUE,JavaScript函数将继续执行,而不等待服务器响应。这就是"AJAX"中的"A"。

用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后,接下来要决定当收到服务器的响应后,需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:

xmlhttp_request.onreadystatechange =FunctionName;

FunctionName是用JavaScript创建的函数名,注意不要写成FunctionName(),当然我们也可以直接将JavaScript代码创建在onreadystatechange之后,例如:

xmlhttp_request.onreadystatechange = function(){
// JavaScript代码段
};

首先要检查请求的状态。只有当一个完整的服务器响应已经收到了,函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。

readyState的取值如下:

0 (未初始化)

1 (正在装载)

2 (装载完毕)

3 (交互中)

4 (完成)

所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。具体代码如下:

if (http_request.readyState == 4) { // 收到完整的服务器响应 }
else { // 没有收到完整的服务器响应 }

当readyState=4时,一个完整的服务器响应已经收到了,接着,函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时,表示状态正常。

在检查完请求的状态值和响应的HTTP状态值后,就可以处理从服务器得到的数据了。有两种方式可以得到这些数据:

(1) 以文本字符串的方式返回服务器的响应

(2) 以XMLDocument对象方式返回响应

实例一: 用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在

首先,我们登陆网易通行证注册页面,可以看到检测用户名是否存在是将用户名提交给checkssn.jsp页面进行判断,格式为:

reg.163.com/register/checkssn.jsp?username=用户名

根据上面讲到的方法,我们可以利用AJAX技术对网易通行证用户名进行检测:

第一步:新建一个基于Xhtml标准的网页,在区域插入Javascript函数如下:

function getXMLRequester( )

{ var xmlhttp_request = false;

try

{ if( window.ActiveXObject )

{ for( var i = 5; i; i-- ){

try{

if( i == 2 )

{ xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }

else

{ xmlhttp_request = new ActiveXObject

( "Msxml2.XMLHTTP." + i + ".0" );

xmlhttp_request.setRequestHeader("Content-Type","text/xml");

xmlhttp_request.setRequestHeader("Content-Type","gb2312"); }

break;}

catch(e){ xmlhttp_request = false; } } }

else if( window.XMLHttpRequest )

{ xmlhttp_request = new XMLHttpRequest();

if (xmlhttp_request.overrideMimeType)

{ xmlhttp_request.overrideMimeType('text/xml'); } } }

catch(e){ xmlhttp_request = false; }

return xmlhttp_request ; }

function IDRequest(n) { //定义收到服务器的响应后需要执行的JavaScript函数

url=n+document.getElementById('163id').value;//定义网址参数

xmlhttp_request=getXMLRequester();//调用创建XMLHttpRequest的函数

xmlhttp_request.onreadystatechange = doContents;//调用doContents函数

xmlhttp_request.open('GET', url, true);

xmlhttp_request.send(null); }

function doContents()

{ if (xmlhttp_request.readyState == 4) {// 收到完整的服务器响应

if (xmlhttp_request.status == 200) {//HTTP服务器响应的值OK

document.getElementById('message').innerHTML = xmlhttp_request.responseText;

//将服务器返回的字符串写到页面中ID为message的区域 }

else { alert(http_request.status); } } }

在区域建立一个文本框,id为163id,再建一个id为messsge的空白区域用来显示返回字符串(也可以通过Javascript函数截取一部分字符串显示):

<input type=text id="163id">
<span id="message"></span>

这样,一个基于AJAX技术的用户名检测页面就做好了,不过这个页面将返回服务器响应生成页面的所有字符串,当然还可以对返回的字符串进行一些操作,便于应用到不同的需要当中。

实例二: 以XMLDocument对象方式返回响应来验证金山通行证帐号是否存在

在上面的例子中,当服务器对HTTP请求的响应被收到后,我们会调用请求对象的reponseText属性。该属性包含了服务器返回响应文件的内容。现在我们以XMLDocument对象方式返回响应,此时将不再需要reponseText属性而使用responseXML属性。

首先登陆金山通行证注册页面,我们发现金山通行证用户名的检测方式为: pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用户名,并且返回XML数据:

isExistedUid -2

当result值为-1时表示此用户名已被注册,当result值为-2时表示此用户名尚未注册,因此通过对result值的判断可以知道用户名是否被注册。

对上例代码进行修改:

首先找到

document.getElementById('message').innerHTML = xmlhttp_request.responseText;

改为:

var response = xmlhttp_request.responseXML.documentElement;

var result = response.getElementsByTagName('result')[0].firstChild.data;//返回result节点数据

if(result ==-2){

document.getElementById('message').innerHTML = "用户名"+document.getElementById('163id').value+"尚未注册";}

else if(result ==-1){

document.getElementById('message').innerHTML = "对不起,用户名"+document.getElementById('163id').value+"已经注册";}

通过以上两个实例说明了AJAX的客户端基础应用,采用的是网易和金山现成的服务器端程序,当然为了开发合适自己页面的程序,还需要对自己编写服务器端程序,这设计到程序语言及数据库的操作,对于有一定程序基础的读者一定不是很难的事情。

 

 

评论

相关推荐

    ajax技术原理及工作原理简介

    ajax技术原理及工作原理简介,对于对异步操作有兴趣的朋友有很大帮助。

    AJAX原理 原理 AJAX

    "AJAX原理与技术的深入分析" AJAX(Asynchronous ...AJAX技术的原理、意义和发展趋势都是我们需要关注和研究的重要问题。只有通过深入分析和理解AJAX技术,我们才能更好地应用和发展它,以满足未来的开发需求。

    ajax 基本原理 ajax 基本原理

    为了解决这些问题,Ajax技术应运而生。 #### 二、Ajax概述 Ajax(Asynchronous JavaScript and XML)是一种用于创建更快、更动态的Web应用程序的技术。尽管名称中包含XML,但Ajax实际上可以使用任何数据格式,如...

    Ajax技术原理及在Web中的实现.pdf

    Ajax技术原理: Ajax(Asynchronous JavaScript and XML)的核心是JavaScript对象XMLHttpRequest,可以向服务器提出异步请求、处理服务器的响应、更新Web页面。Ajax技术使浏览器可以为用户提供更为自然的浏览体验,...

    AJAX技术原理和使用方法

    ### AJAX技术原理与使用方法详解 #### 一、引言 AJAX(Asynchronous JavaScript and XML),即异步JavaScript和XML技术,是一种用于创建快速动态网页的技术。它并不是一种单一的技术,而是多种技术的组合使用,包括...

    Ajax实现原理解释

    Ajax实现原理解释 java 与ajax的结合 是一本很好的学习文档

    Ajax工作原理以及优缺点

    ### Ajax工作原理及优缺点详解 #### 一、Ajax的工作原理 Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术的核心在于使用`...

    ajax原理及用法

    #### 一、什么是Ajax技术? Ajax(Asynchronous JavaScript and XML,异步JavaScript与XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页...

    ASP.NET中AJAX技术原理 实例

    总结,ASP.NET中的AJAX技术结合了服务器端的强大功能和客户端的交互性,极大地提升了用户体验。通过学习和实践表单验证和级联菜单等实例,开发者可以更好地理解和掌握AJAX在ASP.NET中的应用,为Web应用程序带来更...

    AJAX技术原理及经典案例

    **AJAX技术原理** AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器进行通信,实现页面的...

    Ajax技术原理深入解析

    Ajax 技术是一种在不刷新整个网页的情况下,能够更新部分网页内容的技术,它结合了多种技术,包括异步 JavaScript 和 XML(以及 DHTML),由 Adaptive Path 的 Jesse James Garrett 首次提出。Ajax 的核心是利用 ...

    Ajax底层原理及使用有那些方式和面试问题

    ### Ajax底层原理及使用方式详解 #### 一、Ajax简介 Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用于创建交互式网页应用的技术。它不是一种新的编程语言,而是一种使用现有标准的新方法...

    ajax ajax原理 ajax代码 ajax编程 ajax学习

    **Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验。Ajax的核心是...

    AJAX异步处理原理分析

    在本文中,我们将深入探讨AJAX的核心原理,包括其工作流程、主要组成部分以及实际应用。 **1. AJAX工作流程** AJAX的工作流程可以分为以下几个关键步骤: 1. **创建XMLHttpRequest对象**:这是AJAX的核心,所有与...

    Ajax工作原理及优缺点实例解析

    ### Ajax工作原理及优缺点实例解析 #### 一、什么是Ajax? Ajax,全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种利用现有Web技术进行开发的技术组合,主要用于实现客户端与服务器之间...

    Ajax基本运行原理

    为了解决这些问题,Ajax技术应运而生。 #### Ajax是什么? Ajax(Asynchronous JavaScript + XML)是一种用于创建快速动态网页的技术。它通过在后台与服务器进行少量数据交换,使网页可以实现异步更新,这意味着...

    AJAX技术入门 ajax运行原理

    **AJAX技术入门:了解其运行原理** AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这种技术通过在后台与服务器进行少量数据交换,使得网页实现异步更新,极...

    AJAX技术学习总结分享.pdf

    一、Ajax技术原理总结 Ajax技术是一种创建交互式网页应用的网页开发技术,也是一种用于创建快速动态网页的技术。它通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载...

Global site tag (gtag.js) - Google Analytics