Ajax enabled rich internet applications with xml and json

ARCHANA.M
II-MSC(CS)
DEPARTMENT OF CS & IT
NADAR SARASWATHI COLLEGE OF
ARTS AND SCIENCE

 Usability of web applications has lagged behind that of desktop applications
 Rich Internet Applications (RIAs)
-Web applications that approximate the look, feel and usability of desktop
applications
-Two key attributes—performance and rich GUI
 RIA performance
-Comes from Ajax (Asynchronous JavaScript and XML), which uses client-side
scripting to make web applications more responsive

Ajax applications separate client-side user interaction and server
communication, and run them in parallel, making the delays of server-
side processing more transparent to the user
“Raw” Ajax:
-uses JavaScript to send asynchronous requests to the server,
then updates the page using the DOM
-need to deal directly with cross-browser portability issues,
making it impractical for developing large-scale applications

Portability issues
-Hidden by Ajax toolkits, such as jQuery, ASP.NET Ajax and JSF’s Ajax
capabilities, which provide powerful ready-to-use controls and functions that
enrich web applications and simplify JavaScript coding by making it cross-
browser compatible.
Achieve rich GUI in RIAs with
-JavaScript toolkits, providing powerful ready-to-use controls and
functions that enrich web applications.

 Traditional web applications
-User fills in the form’s fields, then submits the form
-Browser generates a request to the server, which receives the request and processes it
-Server generates and sends a response containing the exact page that the browser will
render
-Browser loads the new page and temporarily makes the browser window blank
-Client waits for the server to respond and reloads the entire page with the data from the
response

In an Ajax application, when the user interacts with a page
-Client creates an XMLHttpRequest object to manage a request
-XMLHttpRequest object sends the request to and awaits the response
from the server
-Requests are asynchronous, allowing the user to continue interacting with
the application while the server processes the request concurrently
-When the server responds, the XMLHttpRequest object that issued the
request invokes a callback function, which typically uses partial page updates to
display the returned data in the existing web page without reloading the entire
page

 Classic HTML registration form
-Sends all of the data to be validated to the server when the user clicks the
Register button
-While the server is validating the data, the user cannot interact with the page
-Server finds invalid data, generates a new page identifying the errors in the
form and sends it back to the client—which renders the page in the browser
-User fixes the errors and clicks the Register button again
-Cycle repeats until no errors are found, then the data is stored on the server
-Entire page reloads every time the user submits invalid data

 Ajax-enabled forms are more interactive
-Entries are validated individually, dynamically as the user enters data into the
fields
-If a problem is found, the server sends an error message that is asynchronously
displayed to inform the user of the problem
-Sending each entry asynchronously allows the user to address invalid entries
quickly, rather than making edits and resubmitting the entire form repeatedly until all
entries are valid
-Asynchronous requests could also be used to fill some fields based on previous
fields’ values (e.g., city based on zip code)

 XMLHttpRequest object
-Resides on the client
-Is the layer between the client and the server that manages asynchronous
requests in Ajax applications
-Supported on most browsers, though they may implement it differently
 To initiate an asynchronous request
-Create an instance of the XMLHttpRequest object
-Use its open method to set up the request, and its send method to initiate the
request

When an Ajax application requests a file from a server, the browser
typically caches that file
-Subsequent requests for the same file can load it from the browser’s
cache
When the third argument to XMLHttpRequest method open is true, the
request is asynchronous

The following figures summarize some of the XMLHttpRequest object’s
properties and methods, respectively.
The properties are crucial to interacting with asynchronous requests.
The methods initialize, configure and send asynchronous requests.

Ajax enabled rich internet applications with xml and json

The web application may interacts with a web service to obtain data and
to modify data in a server-side database.
The web application and server communicate with a data format called
JSON (JavaScript Object Notation).
The application executes server-side functions (or APIs) that occurs in
parallel with the user interacting with the web application.

JSON (JavaScript Object Notation)
-Simple way to represent JavaScript objects as strings
-A simpler alternative to XML for passing data between the client
and the server
-API in many programming languages
JSON object
-Represented as a list of property names and values contained in
curly braces
-{ "propertyName1" : value1, "propertyName2": value2 }

Array
-Represented in JSON with square brackets containing a comma-
separated list of values
-Each value in a JSON array can be a string, a number, a JSON
representation of an object, true, false or null
-"array_name“: [ { "propertyName1" : value1, "propertyName2":
value2 }, { "propertyName1" : value1, "propertyName2": value2 } ]

JSON strings
-Easier to create and parse than XML
-Require fewer bytes
-For these reasons, JSON is commonly used to
communicate in client/server interaction

Web service’s functions or APIs may returns a JSON
representation of an object or array of objects.
For example, when the web application requests the list of
names in the address book, the list is returned as a JSON array.

Address-book data formatted in JSON:
[ { "first": "Cheryl", "last": "Black" },
{ "first": "James", "last": "Blue" },
{ "first": "Mike", "last": "Brown" },
{ "first": "Meg", "last": "Gold" } ]
When the XMLHttpRequest object receives the response, it calls the
JSON.parse function, which converts the JSON string into a JavaScript
object

Ajax enabled rich internet applications with xml and json

More Related Content

What's hot (20)

Similar to Ajax enabled rich internet applications with xml and json (20)

More from ArchanaMani2 (10)

Recently uploaded (20)

Ajax enabled rich internet applications with xml and json