Easily develop Ajax applications in easyjweb

Source: Internet
Author: User

Web2.0 is in full swing, and its vivid interface support ushered in the second spring of B/S application, fromEasyjweb-From version 0.8, you will find thatEasyjwebIt is very convenient to develop Ajax applications. This article briefly introduces the example of AJAX application in easyjweb.

  Web script Remote Call Overview

In a Web-based program, when registering a user, we want the user to immediately display a prompt if the user entered already exists after entering the registered user name, this interaction makes the application interaction interface more friendly. To implement this function, you can trigger an event when the user enters the user name. This event runs a program and automatically checks whether the user name exists on the server. If the user already exists, then, a prompt is given, allowing you to select another user name in time to continue the operation.

Assume that we have a user processing component userservice on the server. This component has a method Boolean checkuserexists (string username) to check whether the user name exists, if yes, true is returned. Otherwise, false is returned.

When a remote script call is introduced, you can use the following Javascript script on the registration page to determine whether the user exists:

Function checkuserexist (username)
...{
Userservice. checkuserexists (username, function (RET )...{
If (RET) element. Update ("username_msg", "the user name already exists. select another user name! ");
})
}

The onchange event in the user name input box is called, which is roughly as follows:

<input name="userName" type="text" id="userName" size="10" onFocus="$('userName_Msg').innerText='';"
onChange="checkUserExist(this.value);">
<span id="userName_Msg" style="color:#0000FF; font-size:12px"></span>

This mode is called by a remote script. In the above Code, the checkuserexist function calls the userservice on the server. checkuserexists (username) method to determine whether the user name exists. If the returned result is true, a user prompt is displayed in the span with ID username_msg.

Easyjweb has a built-in engine that exposes server business components to clients through javascript for remote calls. Therefore, server components can be easily called through JavaScript on the web interface in the preceding way, implement specific functions. This is the remote script call.

Quick start to use Ajax in easyjweb

  Starting from easyjweb0.8.0, demo, which is used in easyjweb, is named ajaxdemo.html. You only need to download the latest easyjweb source code, and then execute build war in the bin directory to get a running web application package. Copy the war package to the Tomcat webapps directory, start the web server. Then enter http: // localhost: 8080/easyjf-jweb-0.8.0/ajaxdemo.html in the address bar to see some of the effects of Ajax in easyjweb. For details, see the video tutorial:
 
To use Ajax in easyjweb applications, perform the following steps:
1. Add the following ing to the Web. xml file;

 

<Servlet-mapping>
<Servlet-Name> easyjf </servlet-Name>
<URL-pattern>/EJF/* </url-pattern> <! -- All URLs in the/EJF/* style are handled by easyjweb. -->
</Servlet-mapping>

 

2. Add the following two lines to the template page (or the client HTML page:
<script type='text/javascript' src="ejf/easyajax/prototype.js"></script>
<script type='text/javascript' src='ejf/easyajax/engine.js'></script> 
 

3. Configure the business objects to be exposed to the client in the easyjf-web.xml file;

 

<Ajax>
<Services allowname = "* service" denyname = "">
<Service name = "userservice">
<Include method = ""> </include>
<Exclude method = ""> </exclude>
</Service>
<Service name = "serverdate">
</Service>
</Services>
</Ajax>

 

4. On the template page (or client HTML page), reference the service objects that support remote scripting on the server side in the following way.

<script type='text/javascript' src='ejf/easyajax/UserService.js'></script>
<script type='text/javascript' src='ejf/easyajax/ServerDate.js'></script>

5. Write Remote script calling code that supports refreshing on the template page (or client HTML page), as shown below:

<Input type = "Submit" name = "submit2" value = "login" onclick = "login ();"> function login ()
{
Userservice. login ($ ('username'). value, $ ('Password'). Value, function (RET)
{
If (RET) Alert ("Logon successful! ");
});
}
Summary

Easyjweb Script Engine Ajax is built on prototype. on the basis of JS, the call processing engine on the server side is combined with the container in easyjweb. It can use AOP for Security Interception, so it is more flexible. Compared with the implementation of similar Ajax frameworks such as DWR, the Ajax Implementation of easyjweb supports object Association and cascading processing, making it easier to use. Of course, remote JS script calls support only a small plug-in easyjweb. The Ajax Implementation of easyjweb is just a common easyjweb module (Action), so it is easier to expand, it can be used flexibly with other features of easyjweb, which will be a good choice for lightweight B/S application development. Of course, In the EasyJWeb-0.8 version of Ajax implementation there are still many problems, such as the collection object processing, interface signature processing, in addition to the EasyJWeb-0.8 version, the main framework also has a lot of problems, we hope to improve it in future versions.

This article is just a brief introduction to Ajax applications in easyjweb. More comprehensive usage skills will be introduced later.

For more information, see easyjweb's wiki document: http://wiki.easyjf.com/pages/viewpage.action? Pageid = 90

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.