RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


JSON Interactions Between Server-Side Java and Client-Side YUI : Page 2

Learn how to fetch and persist data on the server with a Java server-side implementation, JSON, and the Yahoo! User Interface.


The Demo Application

The demo application retrieves data from the server. Figure 1 shows how the application looks at runtime. When a user selects a bank from the list, a request goes to the server to retrieve details pertaining to the selected bank. The details are abstracted in the JavaScript class BankDetails, and the method getBank gets called to get data from the server.
Figure 1. Application to Retrieve Data at Runtime: This application is configured to retrieve data from the server.
devx.yuiapp.BankDetails.prototype.getBank = function (id) {
var onGetBankDetails = {
   success : function (o) {
   var bank = YAHOO.lang.JSON.parse(o.responseText);
   main.bankDetails.bankIdTxt.set('value', id);
   main.bankDetails.chkAcNoTxt.set('value', bank.checking.number);
   main.bankDetails.chkBalTxt.set('value', bank.checking.balance);
   'http://localhost:8080/pwds/GetBankDetails?id=' + id, 

The YUI library Connect object is used to make the server call, and the response is passed in the callback method success in the onGetBankDetails object literal. The response text is parsed using the YUI JSON utility class's parse method. The results are applied to the HTML elements using the reference to the fields.

Access to the fields are referenced from the main variable. This is done to gain access to the fields defined in the class BankDetails. The reference to the this variable doesn't apply here because the method will be called in a different scope and the variable won't be visible.

Saving Changes

Changes to the Balance field in the Checking account page are persisted to the server. The method save in the class BankDetails performs this operation.
Figure 2. Persisting Bank Data: The server-side AJAX function SaveBankDetails is called to persist the desired data.
devx.yuiapp.BankDetails.prototype.save = function () {
   var args = 
      'id=' + 
      main.bankDetails.bankIdTxt.get('value') + 
      '&ac=checking&name=balance&value=' + main.bankDetails.chkBalTxt.get('value');
   var onSave = {
      success : function (o) {
         'http://localhost:8080/pwds/SaveBankDetails?' + args, 

The server-side AJAX function SaveBankDetails is called with the necessary arguments to persist the desired data (see Figure 2).

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date