JavaWeb程序设计 课件 ch12 AJAX

第12章AJAX本课教学内容AJAX概述AJAX开发AJAX简单案例AJAX概述问题能否在登录提交时，浏览器界面不刷新，提交改为在后台异步进行，当服务器端验证完毕，将结果在界面上原来登录表单所在的位置显示出来？答案：使用AJAXAJAX概述异步(Asynchronous)的概念和同步相对(Synchronous)。当一个异步过程调用发出后，调用者不需要立刻得到结果，可以继续做自己的事情，等到过程调用完毕，再通过回调函数通知调用方。而同步情况下，调用方必须等待对方得到结果，才能继续运行AJAX包含以下五个部分异步数据获取技术，使用XMLHttpRequest基于标准的表示技术，使用XHTML与CSSAJAX概述AJAX包含以下五个部分动态显示和交互技术，使用DocumentObjectModel(文档对象模型)数据互换和操作技术，使用XML与XSLTJavaScript，将以上技术融合在一起AJAX概述一个简单案例*具体代码示例详见课本AJAX开发AJAX核心代码

functionshowInfo(){

varxmlHttp=newActiveXObject("Msxml2.XMLHTTP"); xmlHttp.open("get","info.jsp",true); xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4){ infoDiv.innerHTML=xmlHttp.responseText; } } xmlHttp.send();}步骤1：在IE中实例化Msxml2.XMLHTTP对象： varxmlHttp=newActiveXObject("Msxml2.XMLHTTP");

Msxml2.XMLHTTP是IE浏览器内置的对象AJAX开发—API解释AJAX开发—API解释步骤2：指定异步提交的目标和提交方式，调用了xmlHttp的open方法：

xmlHttp.open("get","info.jsp",true);该方法一共3个参数：

参数1——表示请求的方式，一般有如下选择：get、post。

参数2——表示请求的目标是info.jsp；当然，也可以在此处给info.jsp一些参数。如： xmlHttp.open("GET","info.jsp?account=0001",true);

参数3——为true表示异步请求，否则表示非异步请求。异步请求可以通俗理解为后台提交，此种情况下，请求在后台执行。AJAX开发—API解释AJAX开发—API解释步骤3：指定当xmlHttp状态改变时，需要进行的处理。处理一般是以响应函数的形式进行：

xmlHttp.onreadystatechange=function(){ //处理代码 }AJAX开发—API解释常见的readyState属性值是：

0：未初始化状态，对象已创建，尚未调用open()

1:已初始化状态，调用open()方法以后AJAX开发—API解释常见的readyState属性值是：

2:发送数据状态，调用send()方法以后

3:数据传送中状态，已经接到部分数据，但接收尚未完成4:完成状态，数据全部接收完成AJAX开发—API解释步骤4：编写处理代码：

xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4){ infoDiv.innerHTML=xmlHttp.responseText; } }AJAX开发—API解释特别说明infoDiv除了具有innerHTML属性之外，还有innerText属性，表示在该div内显示内容时，不考虑其中的HTML格式的标签AJAX开发—API解释特别说明 除了div可以达到动态显示内容的效果之外，HTML中的span也可以做到该效果。不同的是，span将其内部的内容以文本段显示，div将其内部的内容以段落显示。一般而言，使用div从界面上看到的效果是：内容会另起一行单独显示AJAX开发—API解释步骤5：发出请求，调用xmlHttp的send函数：

xmlHttp.send(); send()函数的参数要求跟在步骤二xmlHttp.open(,,);第一个参数“请求方法”有关。

AJAX开发—API解释

请求方法可以为get或post.

如果请求方式是get的话，send可以没有参数，或者参数为null；如果请求方式是post,可以将需要传送的内容传入send函数中以字符串的形式发出AJAX简单案例

做一个简单的登录界面，如果登录成功(如guokehua登录成功)，界面跳转到loginSuccess.jsp；如果登录失败，跳转到loginFail.jsp。AJAX简单案例三个界面如下：AJAX简单案例*具体案例代码详见课本需要注意的问题AJAX具有如下优点减轻服务器负担，避免整个浏览器窗口刷新时造成的重复请求带来更好的用户体验进一步促进页面呈现和数据本身的分离等需要注意的问题AJAX具有如下缺点对浏览器具有一定的限制，对于不兼容的浏览器，可能无法使用。AJAX没有刷新页面，浏览器上的"后退"按钮是失效的，因此，客户经常无法回退到以前的操作常见的AJAX框架AJAX框架Bindows，2003年发布，网址是：。Bindows是一个软件开发包，通过强力联合DHTML、JavaScript、CSS和XML等技术，能生成高度交互的互联网应用程序，成为桌面应用程序的强有力对手常见的AJAX框架AJAX框架

BackBase，2003年发布，网址是：，是一个全面的浏览器端框架，支持丰富的浏览器功能以及与.NET和Java的集成常见的AJAX框架AJAX框架FlashJavaScript集成包，网址是：/doku.php?id=flashjs，允许JavaScript和Flash内容的集成常见的AJAX框架AJAX框架GoogleAJAXSLT，2005年发布，网址是：http://goog-AJAX/，是一个Javascript框架，用来执行XSLT转换以及XPath查询常见的AJA