Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

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.


advertisement

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); main.bankDetails.chkAsOfDateTxt.set('value', bank.checking.openedOn); main.bankDetails.createCDTable(id); } }; YAHOO.util.Connect.asyncRequest( 'GET', 'http://localhost:8080/pwds/GetBankDetails?id=' + id, onGetBankDetails); }

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) { alert('Saved'); } }; YAHOO.util.Connect.asyncRequest( 'GET', 'http://localhost:8080/pwds/SaveBankDetails?' + args, onSave); }

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



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap