JSF - Ajax
2016-02-16 08:21
519 查看
Ajax: A Brief Introduction
AJAX stands for Asynchronous JavaScript And Xml.Ajax is a technique to use HTTPXMLObject of JavaScript to send data to server and receive data from server asynchronously.
So using Ajax technique, javascript code exchanges data with server, updates parts of web page without reloading the whole page.
JSF provides execellent support for making ajax call. It provides f:ajax tag to handle ajax calls.
JSF Tag
<f:ajax execute="input-component-name" render="output-component-name" />
Tag Attributes
S.N. | Attribute & Description |
---|---|
1 | disabled If true, the Ajax behavior will be applied to any parent or child components. If false, the Ajax behavior will be disabled. |
2 | event The event that will invoke Ajax requests, for example "click", "change", "blur", "keypress", etc. |
3 | execute A space-separated List of IDs for components that should be included in the Ajax request. |
4 | immediate If "true" behavior events generated from this behavior are broadcast during Apply Request Values phase. Otherwise, the events will be broadcast during Invoke Applications phase |
5 | listener An EL expression for a method in a backing bean to be called during the Ajax request. |
6 | onerror The name of a JavaScript callback function that will be invoked if there is an error during the Ajax request |
7 | onevent The name of a JavaScript callback function that will be invoked to handle UI events. |
8 | render A space-separated list of IDs for components that will be updated after an Ajax request. |
Example Application
Let us create a test JSF application to test the custom component in JSF.Step | Description |
---|---|
1 | Create a project with a name helloworld under a package com.tutorialspoint.test as explained in the JSF - First Application chapter. |
2 | Modify UserData.java file as explained below. |
3 | Modify home.xhtml as explained below. Keep rest of the files unchanged. |
4 | Compile and run the application to make sure business logic is working as per the requirements. |
5 | Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver. |
6 | Launch your web application using appropriate URL as explained below in the last step. |
UserData.java
package com.tutorialspoint.test; import java.io.Serializable; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean(name = "userData", eager = true) @SessionScoped public class UserData implements Serializable { private static final long serialVersionUID = 1L; private String name; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getWelcomeMessage(){ return "Hello " + name; } }
home.xhtml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:tp="http://java.sun.com/jsf/composite/tutorialspoint"> <h:head> <title>JSF tutorial</title> </h:head> <h:body> <h2>Ajax Example</h2> <h:form> <h:inputText id="inputName" value="#{userData.name}"></h:inputText> <h:commandButton value="Show Message"> <f:ajax execute="inputName" render="outputMessage" /> </h:commandButton> <h2><h:outputText id="outputMessage" value="#{userData.welcomeMessage !=null ? userData.welcomeMessage : ''}" /></h2> </h:form> </h:body> </html>Once you are ready with all the changes done, let us compile and run the application as we did in JSF - First Application chapter. If everything is fine with your application, this will produce following result:
Enter name and press Show Message button. You will see the following result without page refresh/form submit.
相关文章推荐
- 前端--关于客户端javascript
- js简单实现div宽度匀速增加/减小
- JSTL
- JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
- JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
- js实现异步循环实现代码
- javascript每日必学之运算符
- 让图片跳跃起来 javascript图片轮播特效
- Javascript中的Prototype到底是什么
- 三个js循环的关键字示例(for与while)
- js文章快速分享代码
- JSのGoogle Map
- JSP+Servlet中使用cos.jar进行图片上传(文件上传亦然)
- 30行代码实现Javascript中的MVC
- JS中的bind方法与函数柯里化
- JVM统计监测工具
- JavaScript 总结几个提高性能知识点
- javascript面向对象编程方式
- javascript正则表达式验证IP,URL
- HTML静态网页--JavaScript-Window.document对象