Unit - 5

Advanced Tools, Techniques

Q1) Explain J2ME in Detail.

A1)

A. J2ME OVERVIEW 

• The Java development team increases the capabilities of Java to scale back the complexity of developing a multi-tier application.

• The team grouped features of Java into three editions, each with a software development kit (SDK).

• the first edition of Java, called the Java 2 Standard Edition (J2SE), consists of application programming interfaces (APIs) needed to make a Java application or applet.

• The Java 2 Micro Edition (J2ME) consist of the API used to create applications for small computing devices, with wireless Java applications.

• the event team at Sun worked on Java within the first 1990s to affect the programming needs of the fledgling embedded computer market, but that effort was sidetracked by more compelling opportunities presented by the online .

• As those opportunities were addressed, a brand new breed of portable communications devices opened other opportunities at the turn of the century. Cell phones expanded from voice communications devices to voice and text communications devices.

• Pocket electronic telephone directories evolved into personal digital assistants. Chipmakers were releasing new products at now that were designed to transfer computing power from a private computer into mobile small computers that controlled gas pumps, cable television boxes, and an assortment of other appliances.

• J2ME could also be a reduced version of the Java API and Java Virtual Machine that's designed to figure within the sparse resources available within the new breed of embedded computers and microcomputers.

B. Inside J2ME 

• Consumers expect equivalent software and capabilities found on their desktop and laptop computers to be available on their cell phones and private digital assistants.

• Developers ready to make applications that run on cell phones, personal digital assistants, and various consumer and industrial appliances must strike a balance between a thick client and a thin client.

• A thick client is front-end software with the logic to handle an big amount of data processing for the system.

• a thin client is front-end software which depends on back-end software for much of the system processing.

• Processing on the wireless device involve two steps: First the software performs a simple validation process to assure that every one fields on the shape contain information.

• Next order is transmitted to the back-end system.

• The back-end system handles adjusting account balances and other steps present in processing the order.

• A confirmation notice is returned by the back-end system to the wireless device, to display the confirmation notice on the screen.

• A key advantage of using J2ME is that J2ME is compatible with all Java-enabled devices. A Java-enabled device is any computer that runs the Java Virtual Machine.

C. J2ME Architecture

The modular design of the J2ME architecture enables an application to be scaled supported constraints of alittlecomputer . J2ME architecture with layers pleaced above the native OS , collectively mentioned because the Connected Limited Device Configuration (CLDC).

The CLDC, which is installed on top of the OS, forms the run-time environment for little computing devices. The J2ME architecture comprises three software layers .the first layer is that the configuration layer that has the Java Virtual Machine (JVM), which directly interacts with the native OS. The configuration layer also handles interactions between the profile and thus the JVM.

The second is profile layer, contains the minimum set of application programming interfaces (APIs) for the tiny computer. The third layer is that the Mobile Information Device Profile (MIDP). The MIDP layer consist of Java APIs for user network connections, persistence storage, and user interface. It has access to CLDC libraries and MIDP libraries.

A small computer has two components supplied by the primary equipment manufacturer (OEM). These are classes and applications. OEM classes are employed by the MIDP to access device related features like sending and receiving messages and accessing device-specific persistent data. OEM applications are programs which are provided by the OEM as address book.

D. Run-Time Environment

A MIDlet is defined with a minimum of a single class that's derived from the javax .microedition.midlet.MIDlet abstract class. Developers bundle related MIDlets into a MIDlet suite, which is present within an equivalent package and implemented at same time on a small computer. All MIDlets within a MIDlet suite are consider a group and which is installed and uninstalled as a group.

Members of a MIDlet suite share resources of the host environment and share similar instances of Java classes and run within a same JVM. This suggests if three MIDlets from a same MIDlet suite run a similar class, just one instance of the category is made at a time within the Java Virtual Machine. A benefit of the connection withinMIDlet suite members is they share an equivalent data, containing data in persistent storage like user preferences.

Sharing data withinMIDlets exposes each MIDlet to data errors caused by concurrent read/write access to data. This risk is overcome by synchronization primitives on the MIDlet suite level that restrict access to volatile data and persistent data. A MIDlet suite is installed, executed, and removed by the application manager running on the device. The application manager makes the Java archive (JAR) file and therefore the Java application descriptor (JAD) file available to members of the MIDlet suite.

Inside the Java Archive File:

All the files need to implement a MIDlet suite present within a production package called a Java archive (JAR) file. These files contain MIDlet classes, graphic images, and the manifest file. The manifest file contains a listing of attributes and related definitions which are employed by the application manager to put in the files contained within the JAR file on small computer. Nine attributes are defined within the manifest file.

The manifest file’s extension is change to .mf when the MIDlet is ready for deployment.

MIDlet-Name: Best MIDlet

MIDlet-Version: 2.0

MIDlet-Vendor: MyCompany

MIDlet-1: BestMIDlet, /images/BestMIDlet.png, Best.BestMIDlet

MicroEdition-Profile: MIDP-1.0

MicroEdition-Configuration: CLDC-1.0

The MIDlet-n attribute with three values which describe the MIDlet. A comma separates each value. The primary value is that the name of the MIDlet, which is BestMIDlet. Next is an optional value which specifies the icon that was used with the MIDlet. During this example, BestMIDlet.png is that the icon. The icon must be within the PNG image format and therefore the last value for the MIDlet-n attribute is that the MIDlet class name, which is Best.BestMIDlet. The application manager uses the category name to load the MIDlet.

Inside the Java Application Descriptor File

A JAD file provide the application manager with extra content information related to the JAR file to work out whether the MIDlet suite is implemented on the device. AJAD file is comparable to a manifest therein both contain attributes that are name:value pairs. Name:value pairs present in any order within the JAD file. There are five system attributes for a JAD file:

MIDlet-Name

MIDlet-Version

MIDlet-Vendor

MIDlet-n

MIDlet-Jar-URL 18

A developer contains application attributes during a JAD file. An application attribute is a name:value pair that with a value unique to the application.

E. MIDlet Programming

Programming a MIDlet is same as to making a J2SE application therein you define a category and related methods. A MIDlet is a class that extends the MIDlet class and is that the interface between application statements and run-time environment, which is controlled by the application manager. A MIDlet class contains three abstract methods that are called by the application manager to manage the life cycle of the MIDlet. These abstract methods are startApp(), pauseApp(), and destroyApp().

The startApp() method is called by the application manager when the MIDlet is started and contains statements that are executed when the application begins execution. The pauseApp() method is named before the application manager temporarily stops the MIDlet. The application manager restarts the MIDlet by recalling the startApp() method. The destroyApp() method is named before the termination of the MIDlet by the application manager.

Public class BasicMIDletShell extends MIDlet { public void startApp() { } public void pauseApp() { } public void destroyApp( boolean unconditional) { } }

Both the startApp() and pauseApp() methods are public and no return value nor parameter list. The destroyApp() method is a public method with no return value. The destroyApp() method features a boolean parameter that's set to true if the termination of the MIDlet is unconditional, and false if the MIDlet can throw a MIDletStateChangeException telling the application manager that the MIDlet doesn't want to be destroyed just yet.

At the middle of each MIDlet are the MIDP API classes employed by the MIDlet to interact with the user and handle data. The data-handling MIDP API classes helps the developer to perform four sorts of data routines: write and read persistent data, store data in data types, receive data from and send data to a network, and interact with the tiny computing device’s input/output features.

Event Handling

A MIDlet is an event-based application. All routines executed within the MIDlet are worked in response to an event reported to the MIDlet by the application manager. The startApp() method during aMIDlet contains a statement that displays a screen of knowledge and prompts the user to enter a multiple from among one or more options.

A Command object is employed to present a user with a many options to decide on from when a screen is displayed. Each screen contains CommandListener. A CommandListener monitors user events with a screen and causes the acceptable code to execute supported the present event.

Q2) Explain Different APIs Supported by JavaScript.

A2)

With the upcoming HTML 5 standard, JavaScript will support some new APIs for client scripting and document work. Mobile browsers are already adopting a number of these new APIs, although the standard remains in discussion.

Following are the some APIs:

• Offline applications

• Client storage

• Canvas drawing

• Workers

• Geolocation (available as another W3C standard)

C. Platform Extensions

There are other extensions available for web applications on some devices, and lots of other JavaScript APIs are supported in installed applications. These JavaScript APIs can include support for:

• Messaging

• Address book management

• Geolocation

• Gallery

• Camera

• Calendar

• Device status information

• Native menus

Q3) Explain different Java Libraries.

A3)

Java Libraries

The lifetime of a JavaScript programmer has changed radically since 2006, with the looks of Ajax and many libraries that help us work better with this language. Many of those libraries modify or add complete new behaviors to the language, creating new languages inside JavaScript.

If the libraries are supported JavaScript, and mobile browsers support JavaScript, why can we care? the solution is that a lot of those libraries believe some not clear things within the standard, and while they need been prepared and tested on desktop browsers (Internet Explorer, Firefox, Safari, Chrome, Opera), they need not been tested on all the mobile browsers.

That is the primary reason why we'd like to take care about using big JavaScript libraries. The second reason is that the impact on download and execution times. As mentioned earlier, these libraries modify the language and therefore the behavior of objects, and although we don’t use any of a library’s code, the library will got to load itself completely, which takes time. This will cause performance problems in some browsers, so we are getting to test the time that typical libraries want initialize themselves on mobile browsers.

Table shows the results for the jQuery, Prototype, Yahoo! UI, and Dojo libraries. Remember that execution time will depend tons on the hardware and CPU. These tests are just intended to form you aware of the average time that including a library can take.

Table. JavaScript libraries average execution/load times in seconds

The conclusion is that you simply should avoid these libraries if you'll . If you can't avoid them, use them just for smartphones, and remember that some features and plug-ins might not work properly.

Q4) Explain different Mobile Libraries.

A4)

Mobile Libraries

A lot of developers have released alternative libraries that are geared for mobile devices and are lighter than the previous ones. There also are full frameworks for mobile application development like jQTouch, iUI, iWebKit, and Webapp.Net. These frameworks will take care of the visualization, events, and interaction of our websites. There also are other libraries which will replace jQuery and therefore the others on mobile devices. They're Very light libraries that provide basic DOM, event, and Ajax support.

A. BaseJS

BaseJS may be a lightweight library compatible with mobile Safari and other WebKitbased browsers. It's only been fully tested on Safari, from iOS 1.0 to 3.0. BaseJS provides a selector like jQuery’s, $(selector), and a few similar methods, like each, addClass, hasClass, removeClass, toggleClass, getXY, fire, and a few Ajax methods.

B. XUI

XUI may be a simple JavaScript framework for building mobile websites that takes up only 6.7 KB compressed. It's available for free of charge and has been fully tested on WebKit-based browsers and Opera Mobile. The developers are performing on adding support for IE Mobile and BlackBerry. XUI is almost like jQuery, but it's more powerful than baseJS. XUI uses x$ because the main selector object and includes the methods listed in Table.

Table. XUI common methods for a selector query

So, for example, we can capture an onclick for buttons with a class with the following code:

x$('input.button').on('click', function(e){ alert('Ouch!') });

Or with code like this, chaining the methods à la jQuery:

x$('input.button').click(function(e){ alert('Ouch!') })

.html('Press Me! ').css({color: 'blue'});

For Ajax, XUI provides global xhr and xhrjson functions to create requests with options.

Q5) Write a note on jQTouch

A5)

JQTouch.

JQTouch is a jQuery plug-in for iPhone web development that produces similar results to iUI, but with more powerful graphics and animations. It's also unobtrusive, but it does require some JavaScript code to initialize the page.

With some visual differences, it also works on the Android and webOS browsers. The supported features include:

• Native WebKit animations using jQuery methods

• Callback events

• Flexible themes

• Swipe detection

• Extensions: floaty bar, geolocation, offline capability

• Visual controls

• Animations

To use jQTouch we'd like to first load jQuery 1.3.2 then the jQTouch script with two CSS files: the base file (jqtouch.min.css) and therefore the visual theme we would like to load. For example:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<!-- We load jQuery using the Google AJAX API -->

<script type="text/javascript">google.load("jquery", "1.3.2"); </script>

<script type="text/javascript" src="jqtouch/jqtouch.min.js"></script>

<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>

<style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>

To initialize the page, we can use:

<script type="text/javascript">

$.jQTouch({

Icon: 'iphone-icon.png',

PreloadImages: [

'themes/jqt/img/chevron_white.png',

'themes/jqt/img/bg_row_select.gif',

'themes/jqt/img/back_button_clicked.png',

'themes/jqt/img/button_clicked.png'

]

});

</script>

As in iUI, the most markup is completed using top-level elements with ids and links with hashes for linking within the same document. For example:

<div id="home" class="current">

<div class="toolbar">

<h1>jQTouch</h1>

<a class="button slideup" id="infoButton" href="#about">About</a>

</div>

<ul class="rounded">

<li class="arrow"><a href="#ui">User Interface</a><small

Class="counter">4</small></li>

<li class="arrow"><a href="#animations">Animations</a><small

Class="counter">8</small></li>

<li class="arrow"><a href="#ajax">AJAX</a><small

Class="counter">3</small></li>

<li class="arrow"><a href="#callbacks">Callback Events</a><small

Class="counter">3</small></li>

<li class="arrow"><a href="#extensions">Extensions</a><small

Class="counter">4</small></li>

<li class="arrow"><a href="#demos">Demos</a><small

Class="counter">2</small></li>

</ul>

<h2>External Links</h2>

<ul class="rounded">

<li class="forward"><a href="http://www.jqtouch.com/"

Target="_blank">Homepage</a></li>

<li class="forward"><a href="http://www.twitter.com/jqtouch"

Target="_blank">Twitter</a></li>

<li class="forward"><a href="http://code.google.com/p/jqtouch/w/list"

Target="_blank">Google Code</a></li>

</ul>

</div>

Q6) Write a note on Sencha Touch.

A6)

It is a well-liked framework of Sencha for creating a user interface for mobile applications. It helps the developer create a mobile app using simple HTML, CSS, JS which supports many mobile devices like android, IOS, BlackBerry, and Windows. It's supported MVC architecture. The newest version of Sencha Touch is 2.4.

Features of Sencha Touch

Following are the foremost prominent features of Sencha Touch

• Customizable and quite 50 integrate UI widgets with a set of rich UI like lists, carousels, forms, menus, and toolbars, built specifically for mobile platforms.

• Code compatibility of latest versions with the older one.

• A flexible layout manager that helps organize the display of information and content across multiple mobile devices with different OS.

• The framework includes a robust data package which will consume data from any backend data source.

• Adaptive layouts, animations, and smooth scrolling for a far better mobile web application experience for the utilization .

• Out-of-the-box, native-looking themes for each major platform enables to form web and hybrid applications match the design and feel of the target platforms.

Benefits

Sencha Touch is that the leading standard for business-grade web application development. It offers the tools necessary to create robust applications for many of the mobile devices providing one platform for developing applications. Following are a number of the advantages

• Provides a responsive touch feature, hence the user can easily navigate while using the mobile app.

• Provides compatibility with all the newest versions of IOS, Android and Blackberry, and Windows.

• Provides fastest possible speed desirable for any mobile application.

• Provides a cost-effective solution with its cross-platform compatibility.

• Based on the native APIs and basic web development languages like HTML, CSS, JS which makes it easier for a developer to know Sencha Touch.

Limitations

Sencha Touch API doesn't have the subsequent capability

• The app doesn't have access to the device’s camera, contacts, and accelerometer.

• It doesn't provide the push notification facility. For this, we've to use websockets or long polling.

• According to general public license policy, it's free for open source applications however purchased commercial applications.

• It isn't good for hardcore graphics and animation apps like for gaming apps.

Tools

1. Sencha SDK

This is Sencha development kit wont to create a skeleton of the project. We use the command "sencha -sdk path/to/touch generate app appName" to make an app with the name given within the command.

When the app is made, you'll see the subsequent files within the app

• app − This folder contains model, view, controller and store files for the app.

• app.js − this is often the most JS file for your application. From this file, the Sencha code flow starts.

• app.json − this is often the configuration file for the app, all the configuration details presents here.

• index.html − this is often the most html file where we include the app.js and other Sencha related files.

• package.json − This file has all the dependency and other information associated with the app.

• resources − This folder includes all the CSS files and images required for the application.

2.     Sencha CMD

Sencha CMD may be a command line tool, which provides the features of Sencha Touch code minification, scaffolding, build generation, and other useful features for production purpose.

We use command "Sencha app build package" within the command prompt to create the application for this. Attend the app directory within the command prompt and kind the above command. Once the build is successful, we'll see the minified version of the application basically used for production purpose.

3.     Sencha Inspector

Sencha Inspector is a debugging tool to debug any issue in Sencha code during development.

Environment

Local Environment Setup

This section guides you on the way to download and found out Sencha Touch on your machine. Follow the steps to set up the environment.

Downloading library files

Download a commercial version of Sencha Touch library files from the subsequent link https://www.sencha.com. You'll get the trial version from the site on your registered mail id, which can be a zipped folder named sencha-touch-2.4.2-commercial.

Unzip the folder and you'll find various JavaScript and CSS files add in your application. Include mostly the subsequent files

Javascript Files − JS file which you'll find under folder \sencha-touch-2.4.2commercial\touch-2.4.2 are −

You can add these files to your projects JS folder otherwise you can provide a direct path where the files reside in your system.

CSS Files − There are number of theme based files which you'll find under folder I:\sencha touch\sencha-touch-2.4.2-commercial\touch-2.4.2\resources\css\sencha-touch.css

These library files will be added in Sencha Touch application as follows

<html>

<head>

<scripttype="text/javascript"src="../sencha-touch-2.4.2-commercial/touch-2.4.2/sencha-touch-all.js"></script>

<linkhref="../sencha-touch-2.4.2-commercial/touch-2.4.2/resources/css/sencha-touch.css"rel="stylesheet"/>

<scripttype="text/javascript"src="app.js"></script>

</head>

</html>

You can keep Sencha Touch application code in app.js file.

CDN Setup

CDN is content delivery network with which you are doing not got to download the Sencha Touch library files, instead you'll directly add CDN link for ExtJS to your program as follows

<html>

<head>

<scripttype="text/javascript"src="https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>

<linkhref="https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css"rel="stylesheet"/>

<scripttype="text/javascript"src="app.js"></script>

</head>

</html>

Popular Editors

As it may be a JavaScript framework used for developing web applications, the project will have HTML, JS files, and to write down your Ext JS programs, you'll need a text editor. There are multiple IDEs available within the market. Except for now, you'll consider one among the subsequent

• Notepad − On Windows machine, you'll use any simple text editor like Notepad, Notepad++.

• Brackets −Another popular IDE which may be downloaded from http://brackets.io/.

• Sublime −Another popular IDE which may be downloaded from https://www.sublimetext.com/3/.

Naming Convention

Naming convention is a set of rules to be followed for identifiers. It makes the code easily readable and understandable for other programmers also .

Naming convention in Sencha Touch follows the standard JavaScript convention, which isn't mandatory but an honest practice to follow. It should follow camel case syntax for naming the class, method, variable, and properties.

If the name is combined with two words, the second word will start with an uppercase letter always. For instance , doLayout(), StudentForm, firstName, etc.

Architecture

The bottom layer for any mobile application is OS, on top of that anything or everything is made . Then we've the browsers on which we'll be running the applications. It might be Chrome, Safari, IE anything. The upper layer may be a W3 standards, which is common for all. Sencha Touch stands or is made on top of W3 standards, which is nothing but HTML5, which makes one application compatible with different browsers of various devices.

Sencha Touch may be a combination of three frameworks as ExtJs, JqTouch, and Raphael. It follows MVC architecture. MVC separates the code into more manageable chunks.

Although the architecture isn't mandatory for the program, however, it's a best practice to follow this structure to form your code highly maintainable and organized.

Project Structure WithSencha Touch App

----------src

----------resources

-------------------CSS files

-------------------Images

----------JavaScript

--------------------AppFolder

-------------------------------Controller

------------------------------------Contoller.js

-------------------------------Model

------------------------------------Model.js

-------------------------------Store

------------------------------------Store.js

-------------------------------View

------------------------------------View.js

-------------------------------Utils

------------------------------------Utils.js

--------------------------------app.js

-----------HTML files

Sencha Touch app folder will reside in the JavaScript folder of your project.

The App will contain controller, view, model, store, and utility files with app.js.

App.js −The main file from where the flow of program will start. It was included in main HTML file using <script> tag. App calls the controller of application for remainder of the functionality.

Controller.js− it's the controller file of Sencha Touch MVC architecture. This contains all the control of the application, the events listeners, and most of the functionality of the code. It performs the subsequent tasks: routing, intermediate between view and model, and executes events.

View.js− It contains the interface a part of the application, which shows up to the user. Sencha Touch uses various UI rich views, which may be extended and customized consistent with the need .

Store.js− It contains the locally cached data, which is to be rendered on view with the help of model objects. Store fetches the info using proxies, which has the path defined for services to fetch the backend data.

Model.js− It contains the objects which binds the store data to view. It's the representation of the real-world object, which deals with the database.

Utils.js− it's not included in MVC architecture but it's a best practice to use this so on make the code clean, less complex, and more readable. We will write methods during this file and call them in controller or view renderer wherever required. It's helpful for code reusability purpose also .

MVC

MVC stands for Model View Controller. It's an architectural pattern which separates the application into logical components making it more manageable.

The following diagram shows how MVC architecture works

Controller− Controller controls whole application it notify view if model is modified and performs actions supported user inputs.

View− It contains the interface a part of the application which is visual to user. It notify controller to vary model on user input.

Model − It contains the objects which binds the store data to view. It's representation of the important world object which deals with database. It also notify controller for any change in view.

Q7) Explain Html and CSS Fallback.

A7)

The fallback descriptor are need to specify a counter style to fall back to if the present counter style cannot create a marker representation for a specific counter value.

Syntax

/* Keyword values */

Fallback: lower-alpha;

Fallback: custom-gangnam-style;Description

If the required fallback style is unable to construct a representation, then its fallback style are going to be used. If a legitimate fallback style is not specified, it defaults to decimal.

A couple of scenarios where a fallback style used:

• When the range descriptor is specified for a counter style, the fallback style are going to be wont to represent values that fall outside the range.

• When the fixed system is employed and there aren't enough symbols to hide all the list items, the fallback style are going to be used for the remainder of the list items.

Formal definition

Formal syntax

<counter-style-name>

Where
<counter-style-name> = <custom-ident>

Examples

Specifying a fallback counter style

HTML

<ul class="list">

<li>One</li>

<li>Two</li>

<li>Three</li>

<li>Four</li>

<li>Five</li>

</ul>

CSS

@counter-style fallback-example {

System: fixed; symbols: "\24B6""\24B7""\24B8";

Fallback: upper-alpha;

}

.list {

List-style: fallback-example;

}

Q8) Explain Ajax in details.

A8)

Ajax

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the assistance of XML, HTML, CSS, and JavaScript.

• Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.

• Conventional web applications transmit information to and from the sever using synchronous requests. It means you fill out a form, hit submit, and obtain directed to a replacement page with new information from the server.

• With AJAX, once you hit submit, JavaScript will make an invitation to the server, interpret the results, and update the present screen. Within the purest sense, the user would never know that anything was even transmitted to the server.

• XML is usually used because the format for receiving server data, although any format, including plain text, are often used.

• AJAX is a browser technology independent of web server software.

• A user can still use the appliance while the client program requests information from the server within the background.

• Intuitive and natural user interaction. Clicking is not required, mouse movement may be a sufficient event trigger.

• Data-driven as against page-driven.

Rich Internet Application Technology

AJAX is that the most viable Rich Internet Application (RIA) technology thus far .it's getting tremendous industry momentum and a number of other tool kit and frameworks are emerging. But at an equivalent time, AJAX has browser incompatibility and it's supported by JavaScript, it is tough to take care of and debug.

AJAX is based on Open Standards

AJAX is based on the following open standards such as

• Browser-based presentation using HTML and Cascading Style Sheets (CSS).

• Data is stored in XML format and fetched from the server.

• Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.

• JavaScript to form everything happen.

AJAX can’t work independently. It's used in combination with other technologies to make interactive webpages.

JavaScript

• Loosely typed scripting language.

• JavaScript function is named when an occasion occurs during a page.

• Glue for the entire AJAX operation.

DOM

• API for accessing and manipulating structured documents.

• Represents the structure of XML and HTML documents.

CSS

• Allows for a transparent separation of the presentation style from the content and was changed programmatically by JavaScript

XMLHttpRequest

• JavaScript object that performs asynchronous interaction with the server.

Following is the list of web applications that make use of AJAX.

Google Maps

A user drag a entire map using the mouse, instead of clicking on a button.

• https://maps.google.com/

Google Suggest

As you type, Google offers suggestions. Use the arrow keys to navigate the results.

• https://www.google.com/webhp?complete=1&hl=en

Gmail

Gmail is a webmail built on the thought that emails are more intuitive, efficient, and useful.

• https://gmail.com/

Yahoo Maps (new)

Now it's even easier and more fun to urge where you're going!

• https://maps.yahoo.com/

Difference between AJAX and traditional CGI Program

Try these two examples one by one and you'll feel the difference. While trying AJAX example, there's no discontinuity and you get the response very quickly, but once you try the quality GCI example, you'd need to await the response and your page also gets refreshed.

All the available browsers can’t support AJAX. Following a list of major browsers that support AJAX.

• Mozilla Firefox 1.0 and above.

• Netscape version 7.1 and above.

• Apple Safari 1.2 and above.

• Microsoft Internet Explorer 5 and above.

• Konqueror.

• Opera 7.6 and above.

When you write next application then consider the browsers that don't support AJAX.

Steps of AJAX Operation

• A client event occurs.

• An XMLHttpRequest object is made .

• The XMLHttpRequest object is configured.

• The XMLHttpRequest object makes an asynchronous request to the Webserver.

• The Webserver returns the result containing XML document.

• The XMLHttpRequest object calls the callback() function and processes the result.

• The HTML DOM is updated.

Consider the following steps one by one.

A Client Event Occurs

• A JavaScript function is named because the results of an occasion .

• Example − validate "text" size = "20" id = ""id">.

The XMLHttpRequest Object is Created

VarajaxRequest;// The variable that makes Ajax possible!

FunctionajaxFunction(){

Try{

// Opera 8.0+, Firefox, Safari

AjaxRequest=newXMLHttpRequest();

}catch(e){

// Internet Explorer Browsers

Try{

AjaxRequest=newActiveXObject("Msxml2.XMLHTTP");

}catch(e){

Try{

AjaxRequest=newActiveXObject("Microsoft.XMLHTTP");

}catch(e){

// Something went wrong

Alert("Your browser broke!");

Returnfalse;

}

}

}

}

The XMLHttpRequest Object is Configured

In this step, we can write a function which is triggered by the client event and a callback function processRequest() will be registered.

FunctionvalidateUserId(){

AjaxFunction();

// Here processRequest() is the callback function.

AjaxRequest.onreadystatechange=processRequest;

If(!target) target =document.getElementById("userid");

Varurl="validate?id="+ escape(target.value);

AjaxRequest.open("GET",url,true);

AjaxRequest.send(null);

}