Research on AJAX Technology Application

in Web Development
Shuxia Dong1, Chen Cheng1, Yi Zhou2
1School of E& M,China University of Geosciences, 2University of Kansas, Lawrence,
Wuhan, 430074, P.R.China KS, USA
[email protected] [email protected]

Abstract—The Internet site now is on the way to open, writeable, any new technology, but makes use of all these technologies in
multimedia interactive platform,so as to adapt to the individual a brand-new way,which instill old B/S mode of Web
users’ requirements of gradual high interaction.In order to meet development new vitality.
this demand, AJAX (Asynchronous Javascript and XML) as a
Web presentation layer technology, can build quick ,flexible and
dynamic Web applications. AJAX combines the techniques on A. Primary Technology of AJAX
CSS, javascript XHTML, XMLHTTP, DOM and so on,meets the AJAX contains JavaScript, XHTML, CSS, DOM, XML,
construction techniques of the application based on Web, and >@
XSTL, XMLHttpRequest .All these seven are mature
solves the problem of server load heavy and slow pages load,
creates more efficient and dynamic Web user interface close to technology and have been widely used. The roles of these
the local desktop application.The paper introduces the Web techniques in AJAX model are as follows:
application structure framework based on AJAX, describes the • XHTML and CSS are used in standardization present
basic work mechanism of AJAX, with the record on system
in client browser;
development of AJAX network model of state power plant boiler
parts, provides a good solution for constructing Web application • DOM are used to realize dynamic page loading
of high user experience. displays and human-computer interaction,
Keywords—AJAX; XMLHttp; Power plant boiler parts • XML and XSLT are used in data exchange and data
processing;
I. INTRODUCTION • XMLHttpRequest are used in asynchronous data read;
AJAX eliminates the dependence on forms in traditional • JavaScript are uesd in binding and processing all data.
mode of HTTP, thereby achieves fast and lightweight
asynchronous communication. AJAX as a new choice, a new Similar with DHTML and LAMP, AJAX doesn’t refer to a
kind of development tools, can create rich application based single technology, but applies a series of related technologies
on browse,through asynchronous data exchange organically. In fact, some derivative/composite technologies
mechanism,effectively solve network latency problems on based on AJAX are appearing, such as AFLAX and so on.
traditional Web application "request-response” patterns.AJAX In addition, as the development of browser, more and more
will eventually make Web front-end become powerful technology will be added into the Ajax technology system. For
functions, thus become the main user interface in the man- example, the latest version of the browser Firefox has been able
machine interaction of Web page. to directly support vector graphic format SVG. Firefox has
been able to support E4X (JavaScript XML extension) in
The paper introduces the characteristics and working JavaScript 2.0. Firefox, Opera, and Safari browser can also
mechanism of AJAX, and expounds how to use AJAX support Canvas (part of Web Applications1.0 standard). 3D
technique to build a simple framework to implement direct shooting game demo version has been developed by using
asynchronous communication between browser and back-end technology of Canvas on the Internet.
XML server, in order to satisfy the Web application of high
user experience. B. Objects of XMLHttpRequest
The core technology in Ajax is XMLHttpRequest,
II. OVERVIEW ON AJAX XMLHttpRequest provides a kind of communication method
AJAX are called the "Asynchronous JavaScript and XML" with the server within the page for JavaScript operating in
(Asynchronous JavaScript and XML),refers to an web browser. One of the biggest Ajax characteristic is be able to
development technology to create interactive web transmit or read data to the server without refreshing page,
applications. also called update pages without refresh.This characteristic
AJAX technology is the collection of all technologies that mainly benefits from XMLHTTP components and
can be used by JavaScript in the browser. Ajax doesn’t create XMLHttpRequest objects,which is just the same with desktop

978-1-4244-8694-6/11/$26.00 ©2011 IEEE

Authorized licensed use limited to: Queen Mary University of London. Downloaded on August 14,2023 at 11:32:31 UTC from IEEE Xplore. Restrictions apply.
applications,only need data exchange with server, instead of responseXML Represents the corresponding contents in XML format.
refreshment each time or processing data.This not only This returned XML document object can be tested and
analyzed by using W3CDOM node tree.
reduces the burden of server and accelerates the response status Represents the state as digital form (such as 404="not
speed,but also shortens the time for customers and improve found", 200="OK")
the user experience. statusText Represents the state as a string(such as "Not Found" or
"OK")
The creation of XMLHttpRequest objects is the first step
to asynchronous transfer data, the following is the Javascript
code to create XMLHttpRequest object :
>@ C. AJAX Network Application Model
<script type="text/javascript"> Ajax's top concern is to improve Web application
var xmlhttp; usability. In the traditional network model, the users submitted
function loadXMLDoc(url) { their requests,servers handle the requests and then return to
xmlhttp=null; page. Even though users only need a small piece of content
if (window.XMLHttpRequest) { change, the server will send the whole page to users. This slow
Xmlhttp = new XMLHttpRequest(); response mode occupy large network bandwidth and cause
} high server load as well as long-time waiting.After using
else if (window.ActiveXObject){ // For IE series AJAX network model, the user only need loading page one-
browser to create XMLHTTP components time, the AJAX engine will submitt user data to the server,
xmlhttp = new and then process the data server returned and present users
ActiveXObject("Microsoft.XMLHTTP"); with standardized data. There is no need to refresh page in the
} whole process, servers only need to return the data users need,
if (xmlhttp != null) { and let AJAX engine to handle them, thus reduces the
xmlhttp.onreadystatechange = state_Change; load,improves the corresponding velocity, and takes less
xmlhttp.open ("GET",url,true); bandwidth. AJAX network model are shown below Figure 1:
xmlhttp.send (null);
} Web browser

else { Submit Submit

alert ("Your browser does not support Retern to page
Submit

XMLHTTP."); Request page

Present after processing
Transport
Present after processing

} AJAX engine

} Retern result Retern result

</script> Transport
Transport Transport

The flexible use of XMLHttpRequest objects need to Server

understand its methods and properties, as shown in the Process Process Process

following Table 1. Figure 1

TABLE 1 It is reputed that Ajax is a aggregation of usability theory of

Method Description Web standards and Web application.It has greatly improved the
abort() Cancel the request availability of Web application and user interaction experience,
getAllResponseHeaders() Represents the whole HTTP headers as a and finally get the extensive acceptance of customers and
string market. So it is no doubt that Ajax is the choice of customers
getResponseHeader("headerna Returns to the specified value in HTTP and the market.
me") header element
open("method","URL",async," Set a request data submit method, request
uname","pswd") link address, whether is III. PLANT BOILER PARTS STATUS RECORD SYSTEM
asynchronous processing and other DEVELOPMENT BASED ON AJAX NETWORK MODEL
optional attribute
send(content) Submit the request A. Basic principle and procedure
setRequestHeader("label","valu Submit a tag/value to HTTP headers Power plant boiler parts status record system is
e")
fundamentally a statistics system, but also includes several
modules,such as boiler parts position browse, state record,
maintenance record and information retrieval etc., specifically
TABLE 2
Attribute Description include:
onreadystatecha The handler of triggered event when changes states • WebGIS module
nge each time
readyState The states of return objects: ActiveX controls (Autodesk MapGuide) embedded in
0 = uninitialized 1 = is loading Internet Explorer (IE) read the components digital
2 = loaded 3 = processing 4 = completed drawings stored on the server to realize. Digital
responseText Represents the response as a string

Authorized licensed use limited to: Queen Mary University of London. Downloaded on August 14,2023 at 11:32:31 UTC from IEEE Xplore. Restrictions apply.
 drawings contains part of the component information Open (" post ", "loaddetail id =". Aspx? + id, async, null,
(such as numbers, etc.). null),
• Components information display module Order of sending request
Components information includes basic information Send (null),
(number,location),detailed
After the request is processed by the server, request status
information(name,quantity,structure parameters, the
code value 200 indicates successful treatment. XML will be
manufacturer information and maintenance history),
shown in the browser after analysis by AJAX engine or text
and detection records (infra-red test, metallographic
data.
test). Display module includes information headers and
information content. In XHTML pages,they are
expressed in <div id=”pTitle” name=”pTitle”></div> D. Result analysis
and <div id = “pContent” System user experience is highly improved after building
name=”pContent”></div>.After obtaining related the system using AJAX, without refreshment on pages, user
information from server , only need to fill data into two avoid the difficulty of setting components position after refresh
area, it can be shown to users,and for browser it is when chose components in MapGuide controls,the present
only part of page need to be changed. speed of page information also speed up significantly.
• Data processing module
IV. CONCLUSIONS
This part is realized by AJAX, it completed the This article mainly elaborates basic principle and key
interaction of WebGIS module and parts information technology on Web development using AJAX, and records
display module, and meanwhile are responsible to implementation procedure of the plant boiler parts status record
submit data to Web servers and analyze and process system development based on AJAX network model. This
the data returned, and send to components information system interact with users as Web forms, friendly interface and
display module. easy operation reflect the strength of AJAX as the frontie of
• Database module Web development, improve the users’ experience and
servers’data processing ability.
Parts information are stored in the database. It includes
parts basic information list, maintenance history,
testing record, also forms related to management REFERENCES
>@
information . [1] Henri Chen,Robbie Chen, Ajax Development Practices 㧘 Publishing
House of Electronics Industry㧘 2009
[2] Chris Ullman, Lucinda Dykes, Ajax Entry Classic, Tsinghua University
B. Page layout Press㧘2008
In the browser, the page is divided into two parts (frame), [3] Shi Weiwei㧘Zhang Pei. Conquer Ajax-Web2.0 Quick Start and Project
right parts embedded MapGuide Autodesk controls presents Practice 㧘Posts & telecom press㧘2010
parts structure, left for component information display part.The [4] Dave Crane㧘Eric Pascarello㧘Darren James. Ajax in Action. Manning
parts in controls produce event after mouse left click, and send Publication Co㧘2007
components numbers to server, the data will be processed by [5] Luan Shaopeng㧘Zhu Changqing. New Development Model of WebGIS
Based on Ajax [J]. Surveying and Mapping Engineering,2006 㧘
server and transmissed into left information display part. 15(6):30~33
[6] Zhao Songtao.SQL Server 2000 Application and Examples
C. Units Information submission Collection.Beijing: Posts & telecom press㧘2008
Add an javascript function-LoadInfomation(id) in parts left [7] TheXMLHttpRequest Object
click ,transfer components numbers to the function and add http://www.w3schools.com/xml/xml_http.asp
XMLHttpRequest objects to the function, open server to access [8] DOMThe XMLHttpRequest Object
parts information service.The statement of setting requests http://www.w3schools.com/dom/dom_http.asp
parameters are as follows:

Authorized licensed use limited to: Queen Mary University of London. Downloaded on August 14,2023 at 11:32:31 UTC from IEEE Xplore. Restrictions apply.