ajax简述.docx
《ajax简述.docx》由会员分享,可在线阅读,更多相关《ajax简述.docx(17页珍藏版)》请在冰豆网上搜索。
ajax简述
用Ajax验证表单
作者:
DeepakVohra
学习如何使用Ajax构建基于表单的动态Web应用程序。
2006年5月发表
异步JavaScript和XML(Ajax)是一种组合了JavaScript、文档对象模型(DOM)和XMLHttpRequest技术的Web开发技术,用于在客户端和服务器之间提供动态交互。
例如,假设用户填写一份表单以将数据添加到数据库表。
如果不使用Ajax,则在提交表单之前将不检查该表单中的数据有效性。
有了Ajax,可以在使用服务器应用程序中的业务逻辑向表单域中添加数据时对添加到表单的数据进行动态验证。
因此,如果表单中的数据有效,则不必将完整的表单发送给服务器进行检查。
在本文中,您将学习如何在OracleJDeveloper10g(10.1.3)中使用Ajax创建一个Web应用程序。
但首先,我们将介绍一些背景知识。
XMLHttpRequest概述
作为J2EE开发人员,您可能对DOM和JavaScript比较熟悉,而对XMLHttpRequest则并不一定很熟悉。
在Ajax中,XMLHttpRequest对象用于在Web应用程序与基础服务器和业务服务之间提供异步通信。
使用XMLHttpRequest对象,客户端可以检索XML数据并将其直接提交给Web服务器,而不必重新加载该页。
XML数据使用DOM和可扩展样式表转换(XSLT)在客户端上转换为可呈现的HTML。
XMLHttpRequest最初以ActiveX组件的形式由Microsoft推出,现在已受到大多数现代浏览器的支持。
但在2006年4月之前,XMLHttpRequest在浏览器之间以不同的方式实现。
例如,InternetExplorer6将XMLHttpRequest实施为ActiveX对象。
XMLHttpRequest对象的实例在IE6中通过以下代码创建:
varreq=newActiveXObject("Microsoft.XMLHTTP");
而在InternetExplorer7中,XMLHttpRequest以窗口对象属性的形式提供。
在IE7和更高版本中,XMLHttpRequest对象的实例通过以下代码创建:
varreq=newXMLHttpRequest();
2006年4月,推出了XMLHttpRequest对象的W3C工作草稿。
随着XMLHttpRequest对象成为正式的W3C标准,XMLHttpRequest对象的实施将很有可能得到更进一步的标准化。
XMLHttpRequest包含各种可以提供HTTP客户端功能的属性和方法。
表1中介绍了XMLHttpRequest属性。
表1:
XMLHttpRequest属性
属性
说明
onreadystatechange
设置异步请求的事件处理程序
readyState
检索请求的当前状态。
readyState的不同值包括:
0—已创建但未初始化XMLHttpRequest对象。
未调用open()方法。
1—已创建并初始化对象,但尚未调用send()方法。
2—已调用send()方法,但状态和标题不可用。
3—已检索到某些数据,但由于响应标题和状态并不完全可用,因此调用responseXML将生成空值。
调用responseText生成部分数据。
4—已收到所有数据。
responseText
从服务器中检索文本响应。
responseXML
从服务器中检索XMLDOM对象形式的响应。
responseBody
检索响应主体。
responseBody属性是在IE7和更高版本的窗口对象中定义的,而非在W3CXMLHttpRequest规范中定义。
status
检索请求的HTTP状态代码。
状态代码的示例包括404(表示“NotFound”)和200(表示“OK”)。
statusText
检索HTTP状态的文本。
表2中介绍了XMLHttpRequest对象方法。
表2:
XMLHttpRequest方法
方法
说明
Abort()
取消当前的HTTP请求。
getAllResponseHeaders()
返回所有响应标题。
如果readyState的值不是3和4,则返回空值。
getResponseHeader(stringheader)
返回指定的响应标题。
如果readyState的值不是3和4,则返回空值。
open(stringmethod,stringurl,booleanasynch,stringusername,stringpassword)
打开HTTP请求,但不发送该请求。
调用open()方法会将readyState属性设置为1。
responseText、responseXML、status和statusText属性设置为其初始值。
需要在open()方法中指定HTTP方法和服务器URL(相对URL或绝对URL)。
asynch的布尔值指定HTTP请求是否是异步的;不需要指定布尔值参数,并且默认值为true。
用户名和密码是针对服务器端验证指定的,并且可选。
send(data)
向服务器发送HTTP请求并接收响应。
使用send()方法发送的数据可以是字符串、无符号字节数组或XMLDOM对象。
使用send()方法发送的数据是可选的,并且可能为空。
根据open()方法中的asynch参数值,send()方法为同步或异步。
如果为同步,则在检索整个响应之前该方法将不返回。
如果为异步,则该方法将立即返回。
调用send()方法之后,readyState属性将设置为2。
当请求完成加载时,readyState属性将设置为4。
setRequestHeader(stringheaderName,stringheaderValue)
设置请求的HTTP标题
准备安装
首先,您将需要下载和安装JDeveloper10.1.3。
然后,依次单击File>New>General>Application创建一个JDeveloper应用程序和项目。
在该项目中,依次单击File>New>WebTier>JSP>JSP添加一个JSP文件input.jsp以创建AjaxWeb应用程序。
在JSPFile框架中,指定文件名并单击Next。
在ErrorPageOptions框架中,选择默认设置并单击Next。
在Taglibraries框架中,选择默认设置并单击Next。
在HTMLOptions框架中,选择默认设置并单击Next。
JSP提供了Ajax应用程序的客户端。
同样,添加JSPcatalog.jsp和error.jsp,以根据Web应用程序是否生成错误重新定向客户端应用程序。
对于服务器端处理,依次单击File>New>WebTier>Servlets>HTTPServlet添加一个HTTPServlet。
图1:
创建Servlet
在MappingInformation框架中,指定Servlet名称为FormValidationServlet,指定一个servlet映射URL(例如,validateForm),然后单击Next。
图2:
指定Servlet映射
在ServletParameters框架中,指定任何servlet参数(如果需要),然后单击Finish。
图3中显示了生成的Ajax应用程序结构。
图3:
Ajax应用程序目录结构
然后,依次单击Tools>ProjectProperties>Libraries>AddLibrary向Ajax项目中添加一些库。
添加JSPRuntime、ServletRuntime和OracleJDBC库。
图4:
添加项目库
本文中的Ajax应用程序将检索并更新Oracle数据库10g快捷版(Oracle的免费开发人员版)表中的数据。
下载并安装Oracle数据库XE(包括示例模式),然后创建一个数据库实例。
使用下面的SQL脚本创建一个数据库表Catalog。
CREATETABLEOE.Catalog(CatalogIdVARCHAR(25)PRIMARYKEY,JournalVARCHAR(25),
PublisherVarchar(25),EditionVARCHAR(25),TitleVarchar(45),Author
Varchar(25));
INSERTINTOOE.CatalogVALUES('catalog1','OracleMagazine',
'OraclePublishing','Nov-Dec2004','DatabaseResourceManager',
'KimberlyFloss');
INSERTINTOOE.CatalogVALUES('catalog2','OracleMagazine',
'OraclePublishing','Nov-Dec2004','FromADFUIXtoJSF',
'JonasJacobi');
INSERTINTOOE.CatalogVALUES('catalog3','OracleMagazine',
'OraclePublishing','March-April2005','StartingwithOracleADF',
'SteveMuench');
然后,在Connections-Navigator中定义一个与Oracle数据库之间的JDBC连接。
要创建JDBC连接,右键单击Connections-Navigator中的Database节点,然后选择NewDatabaseConnection。
这将启动CreateDatabaseConnection向导。
在Type框架中,指定连接名并选择默认ConnectionTypeOracle(JDBC)。
单击Next。
在Authentication框架中,指定Username和Password,然后单击Next。
在Connection框架中,选择瘦驱动程序,将HostName指定为localhost,将JDBCPort指定为1521。
指定SID并单击Next。
在Test框架中,单击TestConnection按钮。
随即将建立JDBC连接,并将连接节点添加到Connections-Navigator。
Connections-Navigator中的DBConnection1以数据源形式提供,且资源名称为jdbc/DBConnection1DS。
向web.xml配置文件中添加一个元素。
jdbc/DBConnection1DS