ࡱ >
#` 2 bjbj\.\. .R >D >D * + . . . 8 . < / < V 2 J/ `/ `/ `/ `/ `/ `/ `/ U U U U U U U $ CW h Y U u5 `/ `/ u5 u5 U `/ `/ U +> +> +> u5 `/ `/ U +> u5 U +> +> 0S T `/ >/ . E< d S U U 0 V S OZ < * OZ , T T 8 OZ 4U \ `/ l1 v +> 2 , 4 g `/ `/ `/ U U = X `/ `/ `/ V u5 u5 u5 u5 How to Perform AJAX Form Validation in Oracle JDeveloper
1. Introduction What is AJAX? AJAX is an acronym that stands for Asynchronous JavaScript and XML. AJAX is a web development technique that allows a developer to update parts of a page without refreshing the entire document. AJAX makes use of XHTML, the DOM object model, and XML to make changes or to act on changes made to a page.
2. Disadvantages and Advantages of Using AJAX AJAX has advantages:
Ajax is easy to program and add to an application
Quicker and more responsive than some applications
AJAX can improve throughput of an application by validating a form before it is entered into the database (as opposed to verification during database processing).
AJAX can help reduce bad data by validating the input before it is actually submitted.
AJAX also has some disadvantages:
AJAX can become too complex.
Updates to the processing code may require multiple page updates.
3. Methods of Form Validation in AJAX
There are three types of form validation in AJAX
Pure JavaScript Uses JavaScript functions to validate data. Limited in form processing mainly to preventing null values from being entered.
PHP back-end Processing Incorporates better string comparison methods. Requires that a separate installation of PHP and a PHP-enabled web server installed. In terms of JDeveloper, the PHP plug-in must also be installed to forward the requests to the PHP executable.
Servlet back-end Processing More intensive programming. String comparison is more difficult. Can be archived with the JSP/HTML form as a web application and re-deployed.
Create a New Application from the Applications Navigator.
Create the Project:
Creating the Index.jsp File Right-Click on the Project and Choose New. From the Web Tier, choose JSP.
Follow the JSP Creation Wizard. Accept the defaults (including J2EE 1.4 and No error handling). JDeveloper opens the new JSP in the visual editor. Using the Component library HTML-Forms section drag and drop a new form onto the page. Change the Action and the Name of the Form and select the Post Method. 8. Creating the Table Once the form is created, use the HTML-Common Component Library to drop a table onto the newly created form. The table should be three columns wide two rows deep. Use the Property Inspector to set the border to 0. The JSP Page should now look similar to this: 9. Adding the Pieces Type the Label User ID into the 1st column, first row. Use the HTML-Forms Component Library to drop a text field into the 2nd column of the first row. For this text field, set the name to id and set the size to 20. Under the advanced properties tab, set the id to userid and change the JavaScript onkeyup event to validateUserId().
10. Adding the placeholder Click inside the cell in the 3rd column, 1st row and select the Source Tab. Add the following code: This code snippet tells AJAX where we want to change the page.
11. Adding the Submit button Click back to the Design View and drop a button onto the 1st column, 2nd row. Set the value of the button to Create Account. Use the Advanced Properties tab to set the id to submit_btn. Verify that the page runs (JDeveloper will produce an error on any input, since we have not defined the JavaScript function yet, but make sure the page displays correctly). Save the Page (Save All).
12. Adding the JavaScript functions Using the Source tab again to add the functions. JavaScript functions typically go in between the and tags. The first two functions are the core of AJAX functionality: