1. AJAX 概述。
1.1 什么是AJAX 。
AJAX 全称为“ Asynchronous JavaScript and XML” (异步 JavaScript 和 XML ),是指一种创建交互式网页应用的网页开发技术。 AJAX 不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于 AJAX 的“派生 / 合成”式( derivative/composite )的技术正在出现,如“ AFLAX” 。 AJAX 支持的浏览器目前包括: Mozilla 、 Firefox 、 InternetExplorer 、 Opera 、 Konqueror 及 Safari 。但是 Opera 不支持 XSL 格式对象,也不支持 XSLT 。
1.2 为什么使用AJAX ?
1.2.1 传统web 应用的不足
传统的 web 应用允许用户填写表单 (form) ,当提交表单时就向 web 服务器发送一个请求。服务器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分 HTML 代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。 例如:在作注册用户的时候,我们要验证用户名是否被占用,这是我们必须做一个提交,然后刷新页面,获得相应的结果。这样就会浪费大量的带宽和资源,而且使用不方便。
1.2.2 AJAX 对于请求的处理
AJAX 应用可以仅向服务器发送并取回必需的数据,它使用一些基于 XML 的 web service 接口,并在客户端采用 JavaScript 处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快 的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以 Web 服务器的处理时间也减少了。
1.2.3AJAX 的优势
1. 通过异步模式,提升了用户体验。 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用。 3.Ajax 引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
1.2.4AJAX 能干什么?
在创建 Web 站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用 Ajax 可以完成的功能: 提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在某购物车页面,当更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载整 个页面的数据。如果使用 Ajax 计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如,在 Ajax 中,如果用户在分页列表上单击 Next ,则服务器数据只刷新列表而不是整个页面。 直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于 Ajax ,当用户单击 Edit 时,可以将静态表格刷新为内容可编辑的表格。用户单击 Done 之后,就可以发出一个 Ajax 请求来更新服务器,并刷新表格,使其包含静态、只读的数据。 一切皆有可能!但愿它能够激发您开始开发自己的基于 Ajax 的站点。然而,在开始之前,让我们介绍一个现有的 Web 站点,它遵循传统的提交 / 等待 / 重新显示的范例,我们还将讨论 Ajax 如何提升用户体验。
1.3 AJAX 的工作原理
Ajax 的核心是 JavaScript 对象 XmlHttpRequest 。该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之, XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。 Ajax 的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约 ISP 的空间及带宽租用成本的目的。
2.AJAX 实例讲解
2.1 类、属性和方法
( 1 )类 XMLHttpRequest 是 AJAX 的核心类。 XMLHttpRequest 类首先由 Internet Explorer 以 ActiveX 对象引入,被称为 XMLHTTP 。 后来 Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了 XMLHttpRequest 类,不过它们创建 XMLHttpRequest 类的方法不同。 创建方式:
var req;
if
(window.ActiveXObject)
...
{ req = new ActiveXObject( " Microsoft.XMLHTTP " ); //IE创建方式 }
else
...
{ req = new XMLHttpRequest(); }
由于 IE 是以 ActiveX 对象引入的,所以我们要检测是否支持 ActiveXObject 来判断用户使用的是否为 IE 。 ( 2 )属性 responseText 、 responseXML 、 onreadystatechange 、 readyState 和 status 是 XMLHttpRequest 类的主要属性。 responseText :用于接受服务器返回的字符串。 responseXML :用于接受服务器返回的 XML 文件。 onreadystatechange :处理请求的方法的名字。一般用匿名方法实现。 readyState : 用于判断交互状态 0 ( 未初始化 ) 1 ( 正在装载 ) 2 ( 装载完毕 ) 3 ( 交互中 ) 4 ( 完成 ) 。 status :一般用来返回服务器的 HTTP 状态码, status 为 200 表示“成功”, status 为 404 代表“页面未找到”。 ( 3 )方法 req.open('GET', URL, true); open() 的第一个参数是 HTTP 请求方式— GET , POST 或任何服务器所支持的您想调用的方式。 按照 HTTP 规范,该参数要大写;否则,某些浏览器 ( 如 Firefox) 可能无法处理请求。 第二个参数是请求页面的 URL 。 第三个参数设置请求是否为异步模式。如果是 TRUE , JavaScript 函数将继续执行,而不等待服务器响应。 req.send(null); 发送参数如果有参数 req.send("username="+user_name); 用 request 取得。
2.2 实例验证用户名是否存在。
第一步:新建一个基于 JSP 标准的网页。
< body > < html:form action ="/register" onsubmit ="return sub()"> < table > < tr > < td > 用户名 </ td > < td valign ="top"> < html:text property ="name" onchange ="nameChange()" /> </ td > < td valign ="top"> < div id ="name1"> < font size ="2"> *用户名在5-50位之间 </ font > < div > </ td > </ tr > </ table > < html:submit value ="注册" /> </ html:form > </ body > </ html >
第二步:书写 AJAX 代码。 在页面的 head 中加入以下代码:
< SCRIPT LANGUAGE = " JavaScript " > function nameChange() ... { if (document.all.name.value == "" ) ... { document.all.name1.innerHTML = " <font size=2 color=red>!用户名不合法,不可以为空</font> " ; return false ; } else ... { if (document.all.name.value.length < 5 || document.all.name.value.length > 50 ) ... { document.all.name1.innerHTML = " <font size=2 color=red>!用户名不合法,必须在5-50位之间</font> " ; return false ; } else ... { var req; if (window.ActiveXObject) ... { req = new ActiveXObject( " Microsoft.XMLHTTP " ); } else ... { req = new XMLHttpRequest(); } if (req) ... { req.onreadystatechange = function () ... { if (req.readyState == 4 && req.status == 200 ) ... { // 判断状态,4是已发送,200已完成 if (req.responseText == 0 ) ... { document.all.name1.innerHTML = " <font size=2 color=blue>用户名可以正常使用!~</font> " ; return true ; } else if (req.responseText == 1 ) ... { document.all.name1.innerHTML = " <font size=2 color=red>!用户名已经被占用</font> " ; return false ; } else ... { document.all.name1.innerHTML = " <font size=2 color=blue>正在查询。。~</font> " ; return false ; } } } req.open(' POST ' , ' register.do?test=1&name= ' + document.all.name.value); req.setRequestHeader( ' Content-Type ' , ' application/x-www-form-urlencoded ' ); req.send( "" ); // 发送参数如果有参数req.send("username="+user_name);用request取得 } } } }
第二步:在 register.do 中加入相应代码。
public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) ... { RegisterForm registerForm = (RegisterForm) form; // TODO Auto-generated method stub ActionForward af = new ActionForward(); UserDao ud = new UserDao(); if (registerForm.getName() == null ) ... { af = mapping.getInputForward(); } else ... { if ( " 1 " .equals(request.getParameter( " test " ))) ... { // 验证用户名的代码。 try ... { PrintWriter out = response.getWriter(); // 在这里可以根据从数据库中查询的数据返回不同的值。1:用户存在,0:用户不存在 if (ud.getUserByName(request.getParameter( " name " ))) ... { out.print( 1 ); // ajax取得都是字符的输出。如果数据量大的话,还可以用xml来发送和接受 } else ... { out.print( 0 ); } return null ; // 注意:这里必须return null 否则页面接收不到返回值。 } catch (IOException e) ... { // TODO Auto-generated catch block e.printStackTrace(); } }else ... { // 正常注册的代码。 User u = new User(); u.setName(registerForm.getName()); u.setPassword(registerForm.getPwd()); u.setSex(registerForm.getSex()); ud.save(u); } } return af; }