JSF框架应用6

SSOFT V2.0
<f:ajax>标签的listener属性
如何通过<f:ajax>标签的listener属性来设定请求处理对应的后台方法。 <h:inputText value="#{}"> <f:ajax listener="#{test.doLogin}"/> </h:inputText> <h:commandButton value="submit"> <f:ajax listener="#{test.doLogin}"/> </h:commandButton> listener属性用于通过JSF EL表达式对后台方法进行引用，表示在AJAX请 求发送后在后台进行事件处理。该属性指向的方法所对应的标准方法签名 如下： public void processAjaxBehavior(javax.faces.event.AjaxBehaviorEvent event) throws javax.faces.event.AbortProcessingException{ ...... }
options
SSOFT V2.0
options参数属性
name value 页面元素的ID列表，多个ID之间空格隔开，支持JSF EL表 达式，也可以使用关键字。该IDs对应的元素的值将通 过请求提交到后台 页面元素的ID列表，多个ID之间空格隔开，支持JSF EL表 达式，也可以使用关键字。该IDs对应的元素的值将被 后台的响应数据更新 用于设定请求事件发生时回调函数的函数名称，主要用于 监控AJAX请求处理的全过程，该函数包含一个对象参数， 该参数是可选项 用于设定AJAX请求过程中出错后的回调函数的函数名称， 主要用于错误处理和错误提示，该函数包含一个对象参 数，该参数是可选的 该参数用于向请求中追加参数
说明
用于描述对应的事件类型，如“click”
} 对应的值为begin complete success begin、complete success。begin表示请求未发送即将 begin complete和success if(arg.status == "complete"){ 发送。complete表示请求发送出去后已经响应回来(即请求对象 status alert(arg.responseCode); 的状态码为4表示完成时)，但是还未对响应回来的数据进行处理。 success表示已经将响应回来的数据成功更新到对应的组件中。 } if(arg.status == "success"){ responseCode 响应的状态码，比如200或者404 alert(arg.responseText); } responseXML } 响应回来的XML对象
在页面中导入jsf.js文件后，我们就可以给页面中的元素添加AJAX支持了。
<h:commandButton id="button1" value="submit" onclick="jsf.ajax.request(this,event, {execute:'button1',render:'status', onevent:handleEvent,onerror:handleError}); return false;"> </h:commandButton>
responseText source 响应回来的文本对象 事件源对象
SSOFT V2.0
onerror
onerror属性对应的函数主要是在请求出错的情况下被回调。通过该函数可以在 function doError(arg){ 页面中将错误信息响应给客户。表格列举回调函数中参数arg对应的属性及说明 var msg = "抱歉出错了！\r\n"; msg += "异常名称：" + arg.errorName + "\r\n"; 属性名 msg += "错误信息：" + arg.errorMessage + "\r\n"; 说明 msg += "错误描述：" + arg.description; type alert(msg); 出错后type属性值为error } 用于描述错误的状态，serverError表示服务器运行出错， status clientError表示客户端脚本出错 responseCode 响应的状态码，比如200或者404
description
错误信息详细描述，例如：/ by zero
errorName errorMessage
错误名称，通常用于描述异常名称 错误信息，例如：/ by zero
SSOFT V2.0
<f:ajax>简化 简化AJAX操作 操作 简化
• • • • <f:ajax>标签使用前提 标签使用前提 <f:ajax>标签的使用 标签的使用 <f:ajax>标签的 标签的listener 标签的 <f:ajax>标签的其他属性 标签的其他属性
SSOFT V2.0
JSF2.0中的AJAX操作
• 引入 库文件 引入JS库文件 • jsf.ajax.request()方法 方法 • onevent和onerror 和
SSOFT V2.0
引入JS库文件
导入jsf.js文件可以通过我们以前所学的<h:outputScript>标签导入 ： <h:head> <h:outputScript name="jsf.js" library="javax.faces"/> </h:head>
将请求发送到服务器。 string：仅用于 POST 请求，表示传递的参数，格式为 key1=val1&key2=val2的查询字符串
setRequestHeader(header,v alue)
向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值
SSOFT V2.0
向服务器发送请求
将请求发送到服务器。 string：仅用于 POST 请求，表示传递的参数，格式为 key1=val1&key2=val2的查询字符串
setRequestHeader(header,v alue)
向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值
SSOFT V2.0
处理服务器响应
SSOFT V2.0
AJAX应用
• 什么是 什么是AJAX
– AJAX指异步的JavaScript及 XML(Asynchronous JavaScript And XML)
• AJAX开发流程 开发流程
– 创建请求对象 – 向服务器发送请求 – 处理服务器响应
SSOFT V2.0
创建XMLHttpRequest对象
该ids对应的元素的值将被后台的响应数据更新onevent用于设定请求事件发生时回调函数的函数名称主要用于监控ajax请求处理的全过程该函数包含一个对象参数该参数是可选项onerror用于设定x请求过程中出错后的回调函数的函数名称主要用于错误处理和错误提示该函数包含一个对象参数该参数是可选的params该参数用于向请求中追加参数ssoftv20属性值关键字关键字用于execute属性时用于render属性时all页面中的每一个组件都会被提交和处理此关键字主要用于设定整个页面的提交
第六章
JSF中的AJAX
回顾
• • • • Bean Validation Hibernate Validator 4.0 <f:validateBean> JSF中的国际化 中的国际化
SSOFT V2.0
目标
• • • •
什么是AJAX 什么是 AJAX开发流程 开发流程 JSF2.0中的 中的AJAX操作 中的 操作 <f:ajax>标签简化 标签简化AJAX操作 标签简化 操作
xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
xmlhttp.open("GET","test.jsp?fname=Nina&lname=Strawberry",true); xmlhttp.send();
xmlhttp.open("POST","test.jsp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-formurlencoded"); xmlhttp.send("fname=Nina&lname=Strawberry");
var xmlhttp; if(window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。 responseText：获得字符串形式的响应数据。 responseXML： 获得 XML 形式的响应数据。
xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ alert(xmlhttp.responseText ); } }
jsf.ajax为命名空间，调用该命名空间下的request()方法，该方法用于发送 AJAX异步请求，request()方法的参数说明如下表所示： 参数名 source DOM事件模型中的事件对象，该参数为可选项 event 用对象封装以name=value形式编写的参数。设置请求属性， 用于控制客户端和服务器端的请求处理。 参数说明 触发请求发送的事件源对象
<h:commandButton id="button1" value="submit"
页面中的每一个组件都会被后台响应 页面中的每一个组件都会被提交和处 理，此关键字主要用于设定整个页 的值更新(重新呈现)，主要用于对 onclick="jsf.ajax.request(this,event,{execute:'@this',render:'@none', @all 面的提交。 整个页面的重新呈现。
execute
render
onevent
onerror
params
SSOFT V2.0
属性值关键字
在设定execute和render属性值的时候，除了可以填写ID列表，还可以填写关键字
关键字
用于execute属性时 用于execute属性时 execute
用于render属性时 用于render属性时 render
该代码会被JSF2.0的Resource Handler解析到： <script type="text/javascript" src="/chapter6/javax.faces.resource/jsf.js.xhtml?ln=javax.faces"> </script>
SSOFT V2.0
jsf.ajax.request()方法
SSOFT V2.0
请求对象常用属性
方法
描述 规定请求的类型、URL 以及是否异步处理请求。 1.method：请求的类型；GET 或 POST 2.url：文件在服务器上的位置 3.async：true（异步）或 false（同步）
open(method,url,async)
send(string)
onevent:handleEvent,onerror:handleError}); return
false;"> 设定为@none时，AJAX请求依然会执行， 表示不对任何组件元素做更新。 </h:commandButton>
@none 在后台的请求处理生命周期也依然 执行，只不过在页面中没有组件的 值被提交。 仅仅将当前组件即事件源对象的值提 交。 表示提交当前组件即事件源对象所在 的整个表单的数据。 仅仅将当前组件即事件源对象进行更 新。 表示对当前组件即事件源对象所在的 表单中的所有组件进行更新。
SSOFT V2.0
请求对象常用方法
方法
描述 规定请求的类型、URL 以及是否异步处理请求。 1.method：请求的类型；GET 或 POST 2.url：文件在服务器上的位置 3.async：true（异步）或 false（同步）
open(method,url,async)
send(string)
SSOFT V2.0
<f:ajax>标签的使用
<f:ajax>标签在使用时常用于内嵌在组件中，如下所示： <h:commandButton value="submit" action="test.doLogin"> <f:ajax/> </h:commandButton>
也可以用于包含多个组件，如下所示： <f:ajax> <h:inputText value="#{}"/> <h:commandButton value="submit" action="test.doLogin"/> </f:ajax>
@this
@form
SSOFT V2.0
onevent
在onevent属性对应的函数主要用于对发送AJAX请求的流程进行管理，在相应的 阶段可以做出相应的处理，下表显示回调函数中参数arg对应的属性及说明：
属性名 type
function handleEvent(arg){ if(arg.status == "begin"){