; Introduction to Ajax
Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out
Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Introduction to Ajax

VIEWS: 2 PAGES: 33

Introduction to Ajax

More Info
  • pg 1
									Introducing AJAX
The Asynchronous JavaScript and XML (AJAX) technique enables you to create interactive Web
applications. AJAX enables the Web server to accept data from the Web browser in any format
and transmit the data in the eXtensible Markup Language (XML) format. The Web browser is an
application that allows a Web client to use Web services from the Web server. You can create
AJAX-based applications using various technologies, such as Java and ASP .NET. This
ReferencePoint introduces the AJAX technique and describes various design principles for
developing AJAX-based applications. It also describes how to create AJAX-based applications
and perform server-side scripting.

Overview of AJAX
AJAX allows Web clients to send requests to the Web server to access information related to a
Web page. The Web server converts the required information into small packets and sends the
packets to the Web client.

AJAX uses various technologies for creating Web applications, including:
      Cascaded Style Sheet (CSS): Allows you to add style sheets in a Web application. You
      can use CSS to set margins, indents, and text backgrounds in Web pages.
      Document Object Model (DOM): Displays the various components of an HTML page as a
      set of objects, such as document and window. DOM allows you to add or remove the
      components of a Web page at run time.
      XMLHttpRequest: Allows you to exchange data between Web server and Web clients.


Components of AJAX
You use various components of AJAX to create Web applications. The framework of AJAX uses
these components to allow interaction between Web client and Web server in the client-server
model. In a client-server model, the Web client sends a request to the Web server for a Web
service and avails the Web service.

Figure 1-10-1 shows the components of AJAX:




Figure 1-10-1: Components of AJAX
The various components of AJAX are:
       Web client: Sends a request for a service or data to the Web server and avails the
      service or accesses the data.
       Web server: Accepts requests from Web clients, searches the required service or
      information in the backend system, and provides the required service or information to
      Web clients.
       Backend system: Contains services and information, which are used by the Web server
      for providing a Web page to the Web client.
       Web browser: Acts as an interface between the Web server and the Web client. The Web
      browser accepts a request from a Web client and passes the request to the Web server.
      The Web browser also passes services and information from the Web server to the Web
      client.


The Design Principles
You design an AJAX-based application to enable the Web client to access information using the
Web browser. You use various design principles for designing an AJAX-based application. The
design principles ensure that an AJAX-based application is designed without any errors. The
various AJAX design principles are:
       Ensuring the access of an AJAX-based application.
       Ensuring the delivery of the Web service to the Web client in minimum time.
       Ensuring interaction with an AJAX-based application.

Accessing an AJAX-Based Application
You access an AJAX-based application for viewing interactive Web pages using the Web
browser. In an AJAX-based application, the Web browser sends a request to the Web server for
accessing a Web page. The Web server allows the Web browser to pass the Web page to the
Web client. After accessing the Web page, the Web browser sends another request to the Web
server to modify a selected portion of the Web page. The Web server updates only the selected
portion in the Web page and allows the Web browser to access the modified Web page. Figure 1-
10-2 shows how end users can access an AJAX-based application using the Web browser:




Figure 1-10-2: Accessing an AJAX-Based Application

Delivering a Web Service in Minimum Time
The Web server in an AJAX-based application requires less time to deliver a Web page to the
Web browser as compared to a traditional Web application. The Web server in the AJAX-based
application transfers data to the Web browser in the form of a JavaScript fragment, a plain text
stream, or an XML document.

In an AJAX-based application, the rate of data delivered from the Web server to the Web browser
at the first request is high and at later requests, the rate of the delivered data is low. The Web
server in an AJAX-based application sends only the modified portion of the Web page to the Web
browser. Figure 1-10-3 shows the rate of data delivery from the Web client to the Web server in
an AJAX-based application:




Figure 1-10-3: Rate of Data Delivery in an AJAX-Based Application

Interacting with an AJAX-Based Application
AJAX-based applications allow you to interact with a Web page using two elements, hyperlinks
and HTML forms. Hyperlinks and HTML forms enable you to develop interactive Web pages.

Hyperlinks are added with features that allow you to open new images or HTML forms. Forms
allow you to display information as the output of the Web application and accept information for
storing in the Web server. Forms contain various components, such as text box, check box, and
button, which allows you to interact with the AJAX-based application.


Comparing Traditional and AJAX-Based Applications
Compared with traditional Web applications, AJAX enables you to develop Web pages that are
more interactive and can quickly modified at the Web server. A traditional Web application uses
the click-wait-refresh user interaction technique for allowing the end user to interact with the Web
application.

In the click-wait-refresh user interaction technique, the Web browser accepts the request from the
Web client and converts the request to an HTTP request for passing to the Web server. The Web
server accepts the HTTP request, searches the service or information in the database, and
delivers the response to the Web browser in the form of an HTML Web page. The browser
refreshes the HTML Web page and displays the refreshed HTML page to the Web client.

Figure 1-10-4 shows how a traditional Web application works:
Figure 1-10-4: Working of a Traditional Web Application

The traditional Web application has various drawbacks, such as slow processing and loss of data.
The slow processing of the traditional Web application is due to the click-wait-refresh user
interaction technique, which requires the Web browser to wait for the response from the Web
server. When you refresh a Web page and the Web page data is not updated, the available data
of the Web page is lost.

AJAX-based Web applications overcome these disadvantages by providing faster and reliable
Web applications. An AJAX-based Web application uses the partial screen update user
interaction technique and asynchronous communication model.

In the partial screen update technique, only the user interface elements of a Web page containing
new information are updated. The remaining elements are not updated and are displayed on the
Web page.

In the asynchronous communication model, the request made by the Web client and the
response provided by the Web server are not synchronous. As a result, the end user can
continue to access the Web page when the Web server searches the requested service. The
Web server updates only a selected portion of the Web page and provides updated information to
the client.

Figure 1-10-5 shows an AJAX-based application:
Figure 1-10-5: An AJAX-Based Application
Creating AJAX-Based Applications
AJAX-based applications allow you to create interactive Web pages. You create AJAX-based
applications to enable end users to access Web pages in minimum time. You create AJAX-based
applications using various technologies, such as:
        Java
        ASP .NET


Creating an AJAX-Based Application using Java
You can create an AJAX-based application using Java that allows you to add messages to a
frame. To create the AJAX-based application using Java, you need to create the following five
files:
       AjaxChat.java
       AjaxMessage.java
       dwr.xml
       web.xml
       index.html

Creating the AjaxChat.java File
You need to create the AjaxChat.java file, which allows you to add messages to a frame and
display the frame in the output of the application. To create the AjaxChat.java file, you need to
open Notepad and enter the code for the AjaxChat.java file, as shown in Listing 1-10-1:
Listing 1-10-1: Code for the AjaxChat.java File

import java.util.LinkedList;
import java.util.List;
public class AjaxChat
{
          public List addChatMessage(String text)
          {
                     if (text != null && text.trim().length() > 0)
                     {
                                lMessages.addFirst(new AjaxMessage(text));
                                while (lMessages.size() > 10)
                                {
                                          lMessages.removeLast();
                                }
                     }
                     return lMessages;
          }
          public List getChatMessages()
          {
                     return lMessages;
          }
private static LinkedList lMessages = new LinkedList();
}



The above listing shows the code for the AjaxChat.java file in which you create the AjaxChat
class for enabling end users to add a message to a frame.

Creating the AjaxMessage.java File
After creating the AjaxChat.java file, you need to create the AjaxMessage.java file that allows you
to write a message, which is displayed in the output window. To create the AjaxMessage.java file,
you need to open Notepad and enter the code for the AjaxMessage.java file, as shown in Listing
1-10-2:
Listing 1-10-2: Code for the AjaxMessage.java File

public class AjaxMessage
{
          public AjaxMessage(String sText)
          {
                     text = sText;
                     if (text.length() > 256)
                     {
                               text = text.substring(0, 256);
                     }
                     text = text.replace('<', '[').replace('&', '_');
          }
          public long getId()
          {
                     return id;
          }
          public String getText()
          {
                     return text;
          }
          long id = System.currentTimeMillis();
          String text;
}



The above listing shows the code for the AjaxMessage.java file in which you are creating the
AjaxMessage class for displaying messages in a frame.

Creating the dwr.xml File
After creating the AjaxMessage.java file, you need to create the dwr.xml file. The dwr.xml file
allows you to specify the path for the AjaxChat.java file in the Web server. To create the dwr.xml
file, you need to open Notepad and enter the code for the dwr.xml file, as shown in Listing 1-10-3:
Listing 1-10-3: Code for the dwr.xml File

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting
0.4//EN" "http://www.
ajax.ajax1.ajax2/dwr/dwr.dtd">
<dwr>
<allow>
<create creator="new" javascript="AjaxChat">
<param name="class" value="AjaxChat"/>
</create>
<convert converter="bean" match="AjaxMessage"/>
</allow>
</dwr>



The above listing shows the code for the dwr.xml file in which you call AjaxChat and
AjaxMessage classes for transmitting the messages in the output window.

Creating the web.xml File
After creating the dwr.xml file, you need to create the web.xml file. The web.xml file allows you to
specify the path for the Servlet class used in the AJAX-based application. To create the web.xml
file, you need to open Notepad and enter the code for the web.xml file, as shown in Listing 1-10-
4:
Listing 1-10-4: Code for the web.xml File

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web
Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app id="chat-demo">
<display-name>Chat-Demo</display-name>
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<servlet-class>ajax.ajax1.ajax2.dwr.DWRServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>



The above listing shows the code for the web.xml file in which you use servlets for displaying the
output of the Java application.

Creating the index.html File
After creating the web.xml file, you need to create the index.html file. The index.xml file calls the
AJAX files for displaying messages in the output window of the AJAX-based application. To
create the index.html file, you need to open Notepad and enter the code for the index.html file, as
shown in Listing 1-10-5:
Listing 1-10-5: Code for the index.html File

<html>
<head>
<title>Demo Chat Application Using Ajax</title>
<script type='text/javascript' src='/Chat-Demo/dwr/engine.js'></script>
<script type='text/javascript' src='/Chat-
Demo/dwr/interface/AjaxChat.js'></script>
<script type='text/javascript' src='/Chat-Demo/dwr/util.js'></script>
<script type='text/javascript'>
function sendMessage()
{
          var txtMsg = DWRUtil.getValue("txtMsg");
        while (txtMsg.substring(0, 1) == '') txtMsg =
txtMsg.substring(1);
          if(txtMsg.length< = 0) {alert("Please enter some message.")};
          DWRUtil.setValue("txtMsg", "");
          AjaxChat.addChatMessage(gotMessages, txtMsg);
}
function checkMessages()
{
          AjaxChat.getChatMessages(gotMessages);
}
function gotMessages(messages)
{
          var log = "";
          for (var data in messages)
          {
                     log = "<div>" + messages[data].text + "</div>" + log;
          }
DWRUtil.setValue("log", log);
setTimeout("checkMessages()", 1000);
}
</script>
</head>
<body onload="setTimeout('checkMessages()', 1000)">
<p>
Type Your Message:
<input type="text" id="txtMsg"/>
<input value="Send" onClick="sendMessage()" type="Submit"/>
</p>
<p>Your Sent Messages:</p>
								
To top