术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前,Web站点强制用户进入提交/等待/重新显示范例,用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来。借助于Ajax,可以在用户单击按钮时,使用JavaScript和DHTML立即更新UI,并向服务器发出异步请求,以执行更新或查询数据库。当请求返回时,就可以使用JavaScript和CSS来相应地更新UI,而不是刷新整个页面。最重要的是,用户甚至不知道浏览器正在与服务器通信:Web站点看起来是即时响应的。

  虽然Ajax所需的基础架构已经出现了一段时间,但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点确实激动人心,因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的(desktop-like)”可用性。

  通常,在J2EE中,开发人员过于关注服务和持久性层的开发,以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中,常常会听到这样的话,“我们没有可投入UI的时间”或“不能用HTML实现”。但是,以下Web站点证明,这些理由再也站不住脚了:

  • BackPack
  • Google Suggest
  • Google Maps
  • PalmSphere

  所有这些Web站点都告诉我们,Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。一切似乎就在瞬间发生。简而言之,在涉及到用户界面的响应灵敏度时,基准设得更高了。

定义Ajax

  Adaptive Path公司的Jesse James Garrett这样定义Ajax

  Ajax不是一种技术。实际上,它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含:

  • 基于XHTMLCSS标准的表示;
  • 使用Document Object Model进行动态显示和交互;
  • 使用XMLHttpRequest与服务器进行异步通信;
  • 使用JavaScript绑定一切。

  这非常好,但为什么要以Ajax命名呢?其实术语Ajax是由Jesse James Garrett创造的,他说它是“Asynchronous JavaScript + XML的简写”。

Ajax的工作原理

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

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

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

  一切皆有可能!但愿它能够激发您开始开发自己的基于Ajax的站点。然而,在开始之前,让我们介绍一个现有的Web站点,它遵循传统的提交/等待/重新显示的范例,我们还将讨论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的原文a

类似于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的工作原理   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","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.getElementByIdx('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.getElementByIdx('message').innerHTML = xmlHTTP_Request.responseText; //将服务器返回的字符串写到页面中ID为message的区域 } else { alert(HTTP_Request.status); } } } 在区域建立一个文本框,id为163id 再建一个id为messsge的空白区域用来显示返回字符串(也可以通过Javascript函数截取一部分字符串显示): 这样,一个基于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.getElementByIdx('message').innerHTML = xmlHTTP_Request.responseText; 改为: var response = xmlHTTP_Request.responseXML.documentElement; var result = response.getElementsByTagName_r('result')[0].firstChild.data;//返回result节点数据 if(result ==-2){ document.getElementByIdx('message').innerHTML = "用户名"+document.getElementByIdx('163id').value+"尚未注册";} else if(result ==-1){ document.getElementByIdx('message').innerHTML = "对不起,用户名"+document.getElementByIdx('163id').value+"已经注册";} 通过以上两个实例说明了AJAX的客户端基础应用,采用的是网易和金山现成的服务器端程序,当然为了开发合适自己页面的程序,还需要对自己编写服务器端程序,这设计到程序语言及数据库的操作,对于有一定程序基础的读者一定不是很难的事情。

Ajax 网页和服务器通信的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. 详解html5 postMessage解决跨域通信的问题

    这篇文章主要介绍了详解html5 postMessage解决跨域通信的问题的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. 详解使用postMessage解决iframe跨域通信问题

    这篇文章主要介绍了详解使用postMessage解决iframe跨域通信问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. HTML5 Web缓存和运用程序缓存(cookie,session)

    这篇文章主要介绍了HTML5 Web缓存和运用程序缓存(cookie,session),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. HTML5调用手机发短信和打电话功能

    这篇文章主要介绍了HTML5调用手机发短信和打电话功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  8. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  9. 真正的iOS设备和Watch Simulator可以进行通信以进行测试

    我想为现有的iOS应用创建一个手表应用.但我处于一种情况,我没有苹果手表,我现有的iOS应用程序只能在不在模拟器上的真实设备上运行.是否可以在iPhone设备上运行应用程序并在手表模拟器中测试我的手表应用程序?解决方法至少在目前,不可能配对真正的iPhone和Watch模拟器.我得出这个结论有三个原因:>Watch模拟器在安装过程中自动与iPhone模拟器配对.>根本无法从界面取消配对Watch模拟器.>在模拟器上无法访问蓝牙以与真实设备进行通信.这是一个proof.

  10. ios – 如何使用iphone使用蓝牙或wifi与OBD II进行通信

    我想为iOS创建一个简单的应用程序,它通过ODBIIWifi/蓝牙设备从汽车读取数据并在iPhone屏幕上显示.但我不知道从哪里开始.请有人帮我实现以下结果.我有蓝牙和wifi加密狗.第1步:配对蓝牙或Wifi加密狗和iPhone.第2步:通过加密狗阅读详细信息请参阅我能够轻松理解的任何教程或示例代码.我想深入了解这些过程,并希望自己编写代码.所以请帮忙.提前致谢.解决方法正如David所说,在i

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到<input>中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部