INTEGRATING AJAX AND

WEB SERVICES FOR

CO-OPERATIVE IMAGE
EDITING
CS 708 Seminar

MARIAM VARGHESE (Roll No. 05085)

B. Tech. Computer Science & Engineering

College of Engineering Kottarakkara

Kollam 691 531
Ph: +91.474.2453300
http://www.cek.ihrd.ac.in
cekottarakkara@ihrd.ac.in
 Certificate

This is to certify that this report titled Integrating AJAX and web ser-
vices for co-operative image editing is a bonafide record of the CS 708
Seminar work done by Miss.Mariam Varghese, Reg No. 10264040,
Seventh Semester B. Tech. Computer Science & Engineering student, un-
der our guidance and supervision, in partial fulfillment of the requirements
for the award of the degree, B. Tech. Computer Science and Engineering of
Cochin University of Science & Technology.

October 8, 2008

Guide Coordinator & Dept. Head

Miss Geetha Raj R Mr.Ahammed Siraj K K

Lecturer Asst. Professor
Dept. of Computer Science & Engg. Dept. of Computer Science & Engg.
 Acknowledgment
I express my whole hearted thanks to our respected principal Dr.Jacob
Thomas,our seminar coordinator Mr.Ahammed Siraj K K,Head of the
Department, for making my seminar successful.
I wish to express my sincere thanks to my guide Miss.Geetha Raj
R,Lecturer in computer science Department , for providing valuable help
and support for my seminar.
I thank all faculty members of computer science engineering department
in College of Engineering, Kottarakara for their co-operation in completing
my seminar.
My sincere thanks to all those well wishers and friends who have helped
me during the course of the seminar work and have made it a great suc-
cess. Above all I would like to acknowledge with thanks ”THE LORD
ALMIGHTY”,the foundation of all wisdom who have been wonderfully guid-
ing me step by step.

MARIAM VARGHESE
 Abstract
Ajax is a group of web related technologies used for providing inter-
active web applications.A key advantage of AJAX application is that
they look and more like desktop applications.Proponents argue that
AJAX applications perform better than traditional web programs.As
an example AJAX application can add or retrieve a new data for a
page it is working with and the page will update immediately without
reloading. The existing technologies such as SOAP for Web service
communication,Web Services Description Language (WSDL) for Web
services interface description and UDDI for Web service publishing
and searching and so on ,are based on XML-centric approaches,so
web services can implement loosely coupled distributed Web appli-
cations across different platform. Because technologies that support
both AJAX and Web services are XML based the two can leverage
each others strengths.Our system integrates the two for Web based
co-operative image editing. During co-operative image editing multi-
ple authors can simultaneously work on editing an image file in either
Synchronous or asynchronous co-operative modes.In Synchronous co-
operative mode,when an author modifies the image,other authors can
see the modifications instantly and perform their own edits immedi-
ately.In asynchronous co-operative mode author must make modifica-
tions sequentially-that is author must finish editing the image file and
submit the revised file to the server before another author can obtain
the file and edit it.Co-operative image editing system can employ one
of 3 types of architecture-centralised,distributed,hybrid of the two.Our
integration frame work involves four kinds of actors-management web
sevices,image web services,visualization clients and proxy servlets.A
visualization client can interact with the proxy servlet to complete
the following tasks for image file such as import,export,modify,update
and submit. Because this integration framework makes use of AJAX
and Web Services to resolve the problem of message exchange delays
and browser security limitations,it increases Web based co-operative
image editing’s effectiveness.In future this integration frame work can
be used to build generic co-operative business processes.

i
Contents
1 INTRODUCTION 1

2 TRADITIONAL WEB APPLICATION COMMUNI-

CATION FLOW 2

3 AJAX STYLE COMMUNICATION FLOW 3

4 AJAX WORLD IN ACTION 4

5 COMPONENT TECHNOLOGIES 6

6 INTEGRATING AJAX AND WEB SERVICES FOR

CO-OPERATIVE IMAGE EDITING 11

7 IMAGE EDITOR FEATURES 13

8 CO-OPERATIVE IMAGE EDITING 20

9 INTEGRATION FRAMEWORK 21

10 ACTORS 24

11 ADVANTAGES OF AJAX 29

12 DISADVANTAGES OF AJAX 29

13 FUTURE SCOPE 30

14 CONCLUSION 31

REFERENCES 32

ii
1 INTRODUCTION
AJAX(Asynchronous Javascript and XML) is a group of interrelated
web development techniques used for creating better, faster and more
interactive web applications or rich Internet applications. The name
AJAX was given by Jesse James Garrett.With Ajax, web applications
can retrieve data from the server asynchronously in the background
without interfering with the display and behavior of the existing page.
Data is retrieved using the XMLHttpRequest object.With this object,
JavaScript can trade data with a web server, without reloading the
page. AJAX uses asynchronous data transfer (HTTP requests) be-
tween the browser and the web server, allowing web pages to request
small bits of information from the server instead of whole pages. The
AJAX technique makes Internet applications smaller, faster and more
user friendly. AJAX is a browser technology independent of web server
software. AJAX is not a new programming language, but a new way to
use existing standards. In the article that coined the term Ajax,Jesse
James Garrett explained that it refers specifically to these technolo-
gies:
XHTML and CSS for presentation
the Document Object Model for dynamic display of and
interaction with data
XML and XSLT for the interchange and manipulation of
data, respectively
the XMLHttpRequest object for asynchronous communi-
cation
JavaScript to bring these technologies together
It is such an exciting technology that it’s already found use in Googles
most popular applications, such as Gmail and Google Maps. All of
the major products Google has introduced over the last years Orkut,
Gmail, the latest beta version of Google Groups, Google Suggest,
and Google Maps are Ajax applications.Ajax applications can be any
size, from the very simple, single-function Google Suggest to the very
complex and sophisticated Google Maps.With conventional JavaScript
when you fetch and send information to the server, you need to wait
for a response before the user can do anything on the Webpage. Once
the browser receives this information, the webpage will blink a few
times and refresh.

1
2 TRADITIONAL WEB APPLICA-
TION COMMUNICATION FLOW
First a page is loaded. Next the user performs some action such as
filling out a form or clicking a link. The user activity is then submitted
to a server-side program for processing while the user waits, until
finally a result is sent, which reloads the entire page.This model is slow,
as it needs to retransmit data that makes up the complete presentation
of the Web page over and over in order to repaint the application in
its new state.

Figure 1: Traditional Web application communication flow

2
3 AJAX STYLE COMMUNICATION
FLOW
Ajax-style applications use a significantly different model where user
actions trigger behind the scenes communication to the server fetching
just the data needed to update the page in response to the submitted
actions. This process generally happens asynchronously, thus allow-
ing the user to perform other actions within the browser while data
is returned. Only the relevant portion of the page is repainted.In
Ajax-style Web application typically JavaScript invokes communica-
tion to the server, often using the XMLHttpRequest (XHR) object.
After receiving a request, a server-side program may generate a re-
sponse in XML, or alternate formats such as plain text, HTML frag-
ments, or JavaScript Object Notation (JSON) being passed back to
the browser. Consumption of the received content is typically per-
formed using JavaScript in conjunction with Document Object Model
(DOM) methods, though in some rare cases you see native XML fa-
cilities in the browser used.

Figure 2: Ajax-style communication flow

3
4 AJAX WORLD IN ACTION
To send off a request to the server ,we use the open( ) method and
the send( ) method.The open( ) method takes 3 arguments.The first
argument defines which method to use when sending the request(GET
or POST). The second argument specifies the URL of the server side
script.The third argument specifies that the request should be han-
dled asynchronously.The send( ) method sends the request off the
server.We will press a button and trigger an asynchronous commu-
nication request using an XMLHttpRequest (XHR) object and the
Web server will issue an XML response which will be parsed and dis-
played in the page. The whole process is overviewed in Figure. To
trigger the action, a simple form button is used which, when clicked,
calls a custom JavaScript function sendRequest( ) that will start the
asynchronous communication
<form action=”#”>
<input type=”button” value=”Say Hello” onclick=”sendRequest();”
/>
< /f orm >

Figure 3: Ajax world in action

4
 When the sendRequest function is invoked by the user click, it
will first try to instantiate an XMLHttpRequest object to perform
the communication by invoking another custom function createXHR,
which attempts to hide version and cross-browser concerns. The func-
tion uses try-catch blocks to attempt to create an XHR object. It
first tries to create it natively as supported in Internet Explorer 7.x,
Safari, Opera, and Firefox. Then, if that fails, it tries using the Ac-
tiveXObject approach supported in the 5.x and 6.x versions of Internet
Explorer. After creating the request, a callback function, handleRe-
sponse, is defined which will be invoked when data becomes available,
as indicated by the onreadystatechange event handler. The callback
function employs a closure that captures variable state so that the
code has full access to the XHR object held in the variable xhr once
handleResponse is finally called.
xhr.onreadystatechange = function(){handleResponse(xhr);};
Finally, the request is sent on its way using the send() method of
the previously created XHR object. Ajax does not favor or require any
particular server-side language or framework. On the server-side, we
first emit some HTTP headers to indicate that the result should not
be cached. Next, the appropriate Content-Type HTTP header is set
to text/xml indicating that XML will be returned. Finally, an XML
packet is created containing a greeting for the user that also includes
the users IP address and local system time to prove that the request
indeed went out over the network. Once the browser receives data
from the network, it will signal such a change by modifying the value
of the readyState property of the XHR object. Now, the event handler
for onreadystatechange should invoke the function handleResponse. In
that function, the state of the response is inspected to make sure it
is completely available as indicated by a value of 4 in the readyState
property. It is also useful to look at the HTTP status code returned
by the request. Ensuring that the status code is 200 gives at least a
basic indication that the response can be processed. With the XML
response received, it is now time to process it using standard DOM
methods to pull out the message string. Once the message payload is
extracted, it is output to the< div >tag named responseOutput.

5
5 COMPONENT TECHNOLOGIES
Most of Ajax’s component Web technologies were developed and stan-
dardized during the past 10 years. These technologies have improved
recently, making them more suitable for enterprise use.
Dynamic HTML:- Ajax applications take advantage of dynamic
HTML,which consists of HTML, cascading stylesheets, and JavaScript
glued together with the document object model. The technology de-
scribes HTML extensions that designers can use to develop dynamic
Web pages that are more animated than those using previous HTML
versions. For example, when a cursor passes over a DHTML page, a
color might change or text might get bigger. Also, a user could drag
and drop images to different places.
XML:- Ajax uses XML(Extensible Markup Language) to encode
data for transfer between a server and a browser or client application.
The W3C (World Wide Web Consortium)started work on XML in
1996 to enable cross-platform data interoperability over the Internet.
The consortium approved the standards first version in 1998. XML is
a markup metalanguage that can define a set of languages for use with
structured data in online documents. Any organization can develop an
XML-based language with its own set of markup tags. It allows users
to define their own elements. Its primary purpose is to facilitate the
sharing of structured data across different information systems, partic-
ularly via the Internet and it is used both to encode documents and to
serialize data.By adding semantic constraints, application languages
can be implemented in XML.Moreover, XML is sometimes used as the
specification language for such application languages. There are two
levels of correctness of an XML document:
1. Well-formed:- A well-formed document conforms to all of XML’s
syntax rules. For example, if a start-tag appears without a corre-
sponding end-tag, it is not well-formed. A document that is not
well-formed is not considered to be XML; a conforming parser is
not allowed to process it.
2. Valid:- valid document additionally conforms to some seman-
tic rules. These rules are either user-defined, or included as an
XML schema.For example, if a document contains an undefined
element, then it is not valid; a validating parser is not allowed
to process it.
Entity references:-An entity in XML is a named body of data,

6
usually text. Entities are often used to represent single characters
that cannot easily be entered on the keyboard.Special characters can
be represented either using entity references, or by means of numeric
character references. An entity reference is a placeholder that rep-
resents that entity. It consists of the entity’s name preceded by an
ampersand (”&”) and followed by a semicolon (”;”). XML has five
predeclared entities:

Figure 4: predeclared entities of XML

Additional entities can be declared in the document’s Document

Type Definition(DTD).Declared entities can describe single characters
or pieces of text, and can reference each other.
Numeric character references:-Numeric character references
look like entity references, but instead of a name, they contain the
”#” character followed by a number. Unlike entity references, they
are neither predeclared nor do they need to be declared in the docu-
ment’s DTD. They have typically been used to represent characters
that are not easily encodable, such as an Arabic character in a doc-
ument produced on a European computer. XML Schema:-An XML
schema is a description of a type of XML document, typically ex-
pressed in terms of constraints on the structure and content of docu-
ments. A number of standard XML schema languages have emerged
for the purpose of formally expressing such schemas, and some of these
languages are XML-based, themselves. Well-tested tools exist to val-
idate an XML document,the tool automatically verifies whether the
document conforms to constraints expressed in the schema. Some of
these validation tools are included in XML parsers.Other usages of
schemas exist: XML editors, can use schemas to support the editing
process.
Cascading stylesheets:- A W3C standard since 1996, CSS(Cascading
StyleSheets)gives Web site developers and users more control over how

7
browsers display pages. Developers use CSS to create stylesheets that
define how different page elements, such as headers and links,appear.
Multiple stylesheets can apply to the same Web page.
Document object model:- The DOM, a W3C standard since
1998, is a programming interface that lets developers create and mod-
ify HTML and XML documents as sets of program objects, which
makes it easier to design Web pages that users can manipulate. The
DOM defines the attributes associated with each object, as well as the
ways in which users can interact with objects. DHTML works with
the DOM to dynamically change the appearance of Web pages. Work-
ing with the DOM makes Ajax applications particularly responsive for
users.
JavaScript:- Released in 1995 by Netscape and Sun, JavaScript
interacts with HTML code and makes Web pages and Ajax applica-
tions more active.JavaScript is a scripting language most often used for
client-side web development. For example, the technology can cause a
linked page to appear automatically in a popup window or let a mouse
rollover change text or images. Developers can embed JavaScript,
which is openly and freely available, in HTML pages. Ajax uses asyn-
chronous JavaScript, which an HTML page can use to make calls
asynchronously to the server from which it was loaded to fetch XML
documents. This capability lets an application make a server call,
retrieve new data, and simultaneously update the Web page without
having to reload all the contents, all while the user continues interact-
ing with the program.Enterprise application developers have become
more interested in working with JavaScript because users have re-
moved some of the technology’s bugs and developed workarounds for
various problems. Because JavaScript is a cross-platform scripting
language, Ajax applications require no plug-ins, unlike Macromedia
Flash and other proprietary Web application technologies. The pri-
mary use of JavaScript is to write functions that are embedded in or
included from HTML pages and interact with the Document Object
Model (DOM) of the page.
Because JavaScript code can run locally in a user’s browser (rather
than on a remote server), it can respond to user actions quickly, mak-
ing an application feel more responsive. Furthermore, JavaScript code
can detect user actions .Applications such as Gmail take advantage of
this: much of the user-interface logic is written in JavaScript, and
JavaScript dispatches requests for information (such as the content of
an e-mail message) to the server. A JavaScript engine (also known

8
as JavaScript interpreter or JavaScript implementation) is an inter-
preter that interprets JavaScript source code and executes the script
accordingly.The most common host environment for JavaScript is a
web browser.A JavaScript web server would expose host objects rep-
resenting an HTTP request and response objects, which a JavaScript
program could then manipulate to dynamically generate web pages.
XMLHttpRequest:- At the heart of AJAX is the XHR object.
Systems can use JavaScript-based XMLHttpRequest objects to make
HTTP requests and receive responses quickly and in the background,
without the user experiencing any visual interruptions. Thus, Web
pages can get new information from servers instantly without having
to completely reload.Once the XHR object is created to invoke an
XHR request, all browsers use the same syntax:
xhr.open(method, url, async [ ,username, password ])
where method is an HTTP method like GET, POST, HEAD.
While these values are not case sensitive, they should be in uppercase
as per the HTTP specification. The parameter url is the particular
URL to call and maybe either relative or absolute. The async parame-
ter is set to true if the request is to be made asynchronously or false if
it should be made synchronously. If not specified, the request will be
made asynchronously. The optional parameters username and pass-
word are used when attempting to access a resource that is protected
with HTTP.
Google suggest is using XMLHttpRequest object to create a very
dynamic web interface. When you start typing in Googles search box,
a JavaScript sends the letters off to a server and the server returns a
list of suggestions.Different browsers use different methods to create
the XMLHttpRequestObject. Internet Explorer uses an ActiveXOb-
ject, while other browsers uses the built in JavaScript object called
XMLHttp Request. First create a variable to hold the XMLHttpRe-
quest object.Then create the object with
xhr.onreadystatechange = function() {handleResponse(xhr);};
XMLHttp=new XMLHttpRequest( );This is for Firefox,Opera, and
Safari browser.
XMLHttp=new ActiveXObject(MSxml2.XMLHTTP) for Internet
Explorer 6.0+
XMLHttp=new ActiveXObject(Microsoft.XMLHTTP) for Inter-
net Explorer 5.5+ If none of the three methods work,the user has a
very outdated browser and he or she will get an alert stating that the
browser doesnt support AJAX.

9
 Three important properties of XMLHttpRequestObject
1. The onreadystatechange property:- After a request to the
server,we need a function that can receive the data that is re-
turned by the server.The onreadystatechange property stores the
function that will process the response from a server.
xmlHttp.onreadystatechange=function( )
{
}
2. The readyState property:- The ready state property holds
the status of the server’s response.Each time the ready state
changes,the onreadystatechange function will be executed.Here
are the possible values of readystate property

Figure 5: possible values of readystate property

xmlHttp.onreadystatechange=function()
{ if(xmlHttp.readyState==4)
{ // Get the data from the server’s response
}
}
3. The responseText property:-
The data sent back from the server can be retrieved with the
responseText property.In our code, we will set the value of our
”time” input field equal to responseText:
xmlHttp.onreadystatechange=function()
{ if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText; } }

10
6 INTEGRATING AJAX AND WEB
SERVICES FOR CO-OPERATIVE
IMAGE EDITING
AJAX (Asynchronous JavaScript and XML) is a powerful Web
development model for browser-based Web applications.Technologies
that form the AJAX model, such as XML, JavaScript, HTTP,
and XHTML, are individually widely used and well known. How-
ever, AJAX combines these technologies to let Web pages re-
trieve small amounts of data from the server without having
to reload the entire page . This capability makes Web pages
more interactive and lets them behave like local applications.Web
services essentially are universally accessible software compo-
nents deployed on the Web and designed to support interopera-
ble machine-to-machine interaction over a network .The existing
technologies, such as SOAP for Web services communication,
Web Services Description Language (WSDL) for Web services
interface description, and UDDI for Web services publishing and
searching and so on, are based on XML-centric approaches, so
Web services can implement loosely coupled distributed Web ap-
plications across different platforms. Because technologies that
support both AJAX and Web services are XML-based, the two
can leverage each others strengths. More and more compa-
nies and organizations are taking advantage of this relationship,
working to improve their Web applications through AJAX and
Web services.Our system integrates the two for Web-based co-
operative image editing.
Image editing:-Image editing encompasses the processes of al-
tering images, whether they be digital photographs, traditional
analog photographs, or illustrations. Before digital scanners and
cameras became mainstream, traditional analog image editing
was known as photo retouching, using tools such as an airbrush
to modify photographs, or editing illustrations with any tra-
ditional art medium.Graphic software programs, which can be
broadly grouped into vector graphics editors,raster graphics ed-
itors, and 3d modelers, are the primary tools with which a user
may manipulate, enhance, and transform images.
Raster images are stored in a computer in the form of a grid
of picture elements, or pixels. These pixels contain the image’s

11
color and brightness information. Image editors can change the
pixels to enhance the image in many ways. The pixels can be
changed as a group, or individually, by the sophisticated algo-
rithms within the image editors. The bitmap graphics editors,
are often used to alter photographs and other raster graphics.
Vector graphics software are used to create and modify vector
images, which are stored as descriptions of lines, Bezier splines,
and text instead of pixels. It is easier to rasterize a vector im-
age than to vectorize a raster image. People like vector images
because they are easy to modify, containing descriptions of the
shapes in them for easy rearrangement.Due to the popularity
of digital cameras, image editing programs are readily available.
Minimal programs, that perform such operations as rotating and
cropping are often provided within the digital camera itself. The
more powerful programs contain functionality to perform a large
variety of advanced image manipulations. Popular raster-based
digital image editors include Adobe Photoshop, GIMP, Corel
Photo Paint, Paint Shop Pro and Paint.NET.
Digital data compression:-Many image file formats use data
compression to reduce file size and save storage space. Dig-
ital compression of images may take place in the camera, or
can be done in the computer with the image editor. When im-
ages are stored in JPEG format, compression has already taken
place. Both cameras and computer programs allow the user to
set the level of compression. Some compression algorithms, such
as those used in PNG file format, are lossless, which means no
information is lost when the file is saved. The JPEG file format
uses a lossy compression algorithm- The greater the compression,
the more information is lost, ultimately reducing image quality
or detail. JPEG uses knowledge of the way the brain and eyes
perceive color to make this loss of detail less noticeable.

12
7 IMAGE EDITOR FEATURES
(a) Selection:-Selection is a method of selecting part(s) of an
image, thus applying a change selectively without affecting
the entire picture. Most graphics programs have several
means of accomplishing this, such as a marquee tool, lasso,
vector-based pen tools as well as more advanced facilities
such as edge detection, masking, alpha compositing, and
color and channel-based extraction.
(b) Layers:-Another feature common to many graphics appli-
cations is that of Layers, which are analogous to sheets of
transparent acetate (each containing separate elements that
make up a combined picture), stacked on top of each other,
each capable of being individually positioned, altered and
blended with the layers below, without affecting any of the
elements on the other layers.
(c) Image size alteration:-Image editors can resize images in
a process often called image scaling, making them larger, or
smaller. High image resolution cameras can produce large
images which are often reduced in size for Internet use.
Image editor programs use a mathematical process called
resampling to calculate new pixel values whose spacing is
larger or smaller than the original pixel values. Images for
Internet use are kept small, say 640 x 480 pixels which would
equal 0.3 ,megapixels.
(d) Cropping an image:-Digital editors are used to crop im-
ages. Cropping creates a new image by selecting a desired
rectangular portion from the image being cropped. The un-
wanted part of the image is discarded. Image cropping does
not reduce the resolution of the area cropped. Best results
are obtained when the original image has a high resolution.
A primary reason for cropping is to improve the image com-
position in the new image.

13
 Figure 6: a)uncropped image b)cropped image

(e) Histogram:-Image editors have provisions to create an im-

age histogram of the image being edited. The histogram
plots the number of pixels in the image (vertical axis) with
a particular brightness value (horizontal axis). Algorithms
in the digital editor allow the user to visually adjust the
brightness value of each pixel and to dynamically display
the results as adjustments are made. Improvements in pic-
ture brightness and contrast can thus be obtained.

Figure 7: histogram of sunflower image

(f) Noise Removal:-Image editors may feature a number of al-

gorithms which can add or remove noise in an image. JPEG
artifacts can be removed; dust and scratches can be removed
and an image can be de-speckled. Noise removal merely es-
timates the state of the scene without the noise and is not a
substitute for obtaining a ”cleaner” image. Excessive noise

14
 reduction leads to a loss of detail, and its application is hence
subject to a trade-off between the undesirability of the noise
itself and that of the reduction artifacts.Noise tends to in-
vade images when pictures are taken in low light settings.
A new picture can be given an ’antiquated’ effect by adding
uniform monochrome noise.
(g) Removal of unwanted elements:-Most image editors can
be used to remove unwanted branches, etc, using a ”clone”
tool. Removing these distracting elements draws focus to
the subject, improving overall composition.

Figure 8: Removal of unwanted elements

(h) Selective color change:-Some image editors have color

swapping abilities to selectively change the color of specific
items in an image, given that the selected items are within
a specific color range.
(i) Image Orientation:-Image editors are capable of altering
an image to be rotated in any direction and to any degree.
Mirror images can be created and images can be horizon-
tally flipped or vertically flopped. A small rotation of several
degrees is often enough to level the horizon, correct verti-
cality or both. Rotated images usually require cropping af-
terwards, in order to remove the resulting gaps at the image
edges.

15
 Figure 9: Image orientation

(j) Perspective correction and distortion:- Some image ed-

itors allow the user to distort (or ”transform”) the shape of
an image. While this might also be useful for special ef-
fects, it is the preferred method of correcting the typical
perspective distortion which results from photographs be-
ing taken at an oblique angle to a rectilinear subject. Care
is needed while performing this task, as the image is re-
processed using interpolation of adjacent pixels, which may
reduce overall image definition. The effect mimics the use
of a perspective correction lens, which achieves a similar
correction in-camera without loss.

Figure 10: Perspective correction

16
 (k) Lens correction:-Photo manipulation packages have func-
tions to correct images for various lens distortions including
pincushion, fisheye and barrel distortions. The corrections
are in most cases subtle, but can improve the appearance of
some photographs.
(l) Sharpening and softening images:-Graphics programs
can be used to both sharpen and blur images in a number
of ways, such as unsharp masking or deconvolution Portraits
often appear more pleasing when selectively softened (par-
ticularly the skin and the background) to better make the
subject stand out. This can be achieved with a camera by
using a large aperture, or in the image editor by making
a selection and then blurring it. Edge enhancement is an
extremely common technique used to make images appear
sharper, although purists frown on the result as appearing
unnatural.
(m) Selecting and merging of images:- Many graphics ap-
plications are capable of merging one or more individual
images into a single file. The orientation and placement of
each image can be controlled.When selecting a raster image
that is not rectangular, it requires separating the edges from
the background, also known as silhouetting. This is the dig-
ital version of cutting out the image.Clipping paths may be
used to add silhouetted images to vector graphics or page
layout files that retain vector data. Alpha compositing, al-
lows for soft translucent edges when selecting images. There
are a number of ways to silhouette an image with soft edges
including selecting the image or its background by sampling
similar colors, selecting the edges by raster tracing, or con-
verting a clipping path to a raster selection. Once the image
is selected, it may be copied and pasted into another sec-
tion of the same file, or into a separate file. The selection
may also be saved in what is known as an alpha channel.A
popular way to create a composite image like this one is to
use transparent layers.Performing a merge in this manner
preserves all of the pixel data on both layers to more easily
enable future changes (such as adding the second individual)
in the new merged image.

17
 Figure 11: merged image

Figure 12: original image

(n) Slicing of images:-A more recent tool in digital image edit-

ing software is the image slicer. Parts of images for graph-
ical user interfaces or web pages are easily sliced, labeled
and saved separately from whole images so the parts can be
handled individually by the display medium. This is useful
to allow dynamic swapping via interactivity or animating
parts of an image in the final presentation.
(o) Special effects:-Image editors usually have a list of spe-
cial effects that can create unusual results. Images may be
skewed and distorted in various ways. Scores of special ef-
fects can be applied to an image which include various forms
of distortion, artistic effects, geometric and texture effects,
and combinations thereof.
(p) Change color depth-It is possible, using software, to change
the color depth of images. Common color depths are 2, 4,
16, 256, 65.5 thousand and 16.7 million colors. The JPEG
and PNG image formats are capable of storing 16.7 million

18
 colors (equal to 256 luminance values per color channel). In
addition, grayscale images of 8 bits or less can be created,
usually via conversion and down-sampling from a full color
image.
(q) Contrast change and brightening:-Image editors have
provisions to change the contrast of images and brighten
or darken the image. Underexposed images can be often
be improved by using this feature. Recent advances have
allowed more intelligent exposure correction whereby only
pixels below a particular luminosity threshold are bright-
ened, thereby brightening underexposed shadows without
affecting the rest of the image.
(r) Color adjustments:-The color of images can be altered
in a variety of ways. Colors can be faded in and out, and
tones can be changed using curves or other tools. The color
balance can be improved, which is important if the picture
was shot indoors with daylight film, or shot on a camera
that with an incorrectly adjusted white balance. Special ef-
fects, like sepia and grayscale can be added to an image. In
addition, more complicated procedures such as the mixing
of color channels are possible using more advanced graphics
editors.The red-eye effect, which occurs when flash photos
are taken when the pupil is too widely open (thus reflecting
back the color of the blood-rich retina), can also be elimi-
nated at this stage.

Figure 13: An example of color adjustment using Photoshop

(s) Printing:-Controlling the print size and quality of digi-

tal images requires an understanding of the pixels-per-inch
(ppi) variable that is stored in the image file and sometimes
used to control the size of the printed image.

19
8 CO-OPERATIVE IMAGE EDIT-
ING
During cooperative image editing, multiple authors can si-
multaneously work on editing an image file in either syn-
chronous or asynchronous cooperative modes. In synchronous
cooperative mode, when an author modifies the image, other
authors can see the modifications instantly and perform
their own edits immediately.All authors share the same in-
formation about the image during the editing. In asyn-
chronous cooperative mode,authors must make modifica-
tions sequentially that is, an author must finish editing the
image file and submit the revised file to the server before
another author can obtain the file and edit it. For exam-
ple, take the scenario of two people working cooperatively
on designing an automobile. If they’re designing a common
part, such as head-lamps, they should work in synchronous
cooperative mode to exchange ideas quickly. If they are
each responsible for designing different parts one designs the
headlamps and the other designs the doors they could work
in asynchronous cooperative mode.Synchronous cooperative
mode is clearly the more ideal option for cooperative image
editing, but, as previous work has shown, it comes with
challenges such as excessive bandwidth use and message ex-
change delays.We have chosen this mode for our cooperative
image-editing system and, through our AJAX Web services
integration framework, solved the challenges it poses.

20
9 INTEGRATION FRAMEWORK
In developing our integration framework, we considered the
architecture and the actors.
Architecture
A cooperative image-editing system can employ one of three
types of architectures: centralized, distributed, or a hybrid
of the two.
i. Centralized architecture:-A server manages the image
files and the authors editing the image files.The image
files are saved on the server, and the authors, as the
clients,obtain the image file from the server and send
modifications to the server in real time.The server han-
dles all modifications (resolving any write conflicts that
might occur and broadcasts the conciliated, or agreed
upon, modifications to the authors. Note that when the
server is down, the system doesn’t work. Each author
can join or leave the image-editing at any time. Some
traditional computer-supported cooperative work sys-
tems, such as whiteboards, provide cooperative image-
editing functionality.Most whiteboards adopt synchronous
cooperative mode that is, an author can edit the im-
age file and see other authors’ edits simultaneously.All
modifications of the image are broadcasted to the co-
operative authors in real time. As we know, broad-
casting all modifications of the image pixel by pixel
is costly.Particularly in wide area networks, continu-
ous broadcasting uses an unreasonable amount of band-
width.In addition to these costs, an experiment has shown
that message exchange delays between two machines in
local area networks are from 5 to 100 milliseconds More-
over, as the amount of data transmitted over the net-
work grows, so do the delays. Compared to message
exchange delays in local area networks, such delays in
wide area networks are much longer.Web-based coop-
erative image editing must reduce both the amount of
data transmitted over the network and the frequency
of broadcasting the modifications.Fortunately, AJAX
holds great promise for enabling these objectives. Ma-
jor Google products such as Gmail, Google Maps, and

21
 Google Suggest use the AJAX model and prove that
Web applications implemented by AJAX can reduce
the amount of data transmitted over the network so
that clients can interact with the server fluently. More-
over, asynchronous communication uses a more reason-
able amount of bandwidth. To cut costs and save time,
organizations and companies increasingly are using Web
applications to work cooperatively. Generally speaking,
these organizations or companies can be located in dif-
ferent areas and provide their services through differ-
ent technologies. For example, an automaker in Ger-
many and an automaker in Japan must cooperatively
design a new type of automobile. However, their soft-
ware components that remote clients invoke for design-
ing the automobile might be implemented with different
technologies, such as Java 2 Enterprise Edition (J2EE),
.Net, or other distributed object technologies. Access-
ing such different components with a unified method is
difficult for a remote client. Therefore, its necessary to
find an approach for reusing these components.Web ser-
vices should be the first option, because they can imple-
ment loosely coupled Web applications across platforms
and program languages. Moreover, developers can use
some tools to transform most existing components into
Web services,the system doesn’t work. Each author can
join or leave the image-editing at any time.
ii. Distributed architecture.:- Each author joining the im-
age file editing is both a server and a client that is, each
author manages a copy of the image and broadcasts
image modifications to other authors in real time. To
guarantee the consistency of these image copies, the au-
thors use the same rules to handle all modifications that
they produce individually and that they receive from
other authors. Even if some authors leave, the system
can still work. Managing the authors is costly, however.
New authors who wish to edit the image must notify
other authors and process the image copies they’ve ob-
tained from them.

22
 Figure 14: Integration framework

iii. Hybrid architecture:-This architecture combines the cen-

tralized and distributed architectures.A server manages
both the image files and the authors joining the image-
file editing. Each author manages a copy of the image
and broadcasts modifications to other authors and the
server. All of the authors handle the modifications by
the same rules. New authors can obtain the image file
directly from the server. The server notifies the existing
authors when new authors join. We based our integra-
tion framework on the hybrid architecture.

23
10 ACTORS
Our integration framework involves four kinds of actors:
management Web services, image Web services, visualiza-
tion clients, and proxy servlets.
i. Management Web services:-Management Web services
manage image-file versions and the information of au-
thors joining the image-file editing. If a new author
takes part in the editing of an image file, the author
can directly obtain from this service the latest version
of the image file and the information of other coopera-
tive authors editing the same image. Furthermore, this
service notifies other authors of this new author.
ii. Image Web services:- Because authors joining the edit-
ing of the image file might belong to various organiza-
tions located in different areas moreover, there are mes-
sage exchange delays,image Web services are created
and deployed on the organizations Web server. Each
image Web service manages the copies of image files so
authors can obtain the image file as soon as possible.
The image Web service not only broadcasts the concil-
iated modifications of the image to other image Web
services and the management Web service, but also re-
turns those modifications to the authors.
iii. Visualization clients and proxy servlets:- A Java Server
Page implements a visualization client, and an applet
embedded in the JSP provides the canvas on which the
author edits the image file.With the AJAX model, we
can invoke image Web services in JavaScript code. How-
ever, such an activity that connects a browser to a re-
mote host (either the Web server from which the JSP
was loaded or another Web server) reduces Web browser
security. Moreover, applets are designed with certain se-
curity limitations, one of which is the inability to access
a Web server other than the one from which the applet
was originally downloaded. To resolve the problem of
obtaining image files and their modifications from image
Web services, our framework employs servlets as proxies
to access image Web services.The proxy servlet resides
on the Web server from which the JSP was loaded. The

24
 proxy servlet takes the parameters from the JSP, passes
them to the image Web service, and then passes the re-
sulting XML document back to the JSP.

Figure 15: Integration framework data flow

Visualization clients edit the image file simultaneously through

the following process:
1. The applets send the image modifications of the im-
age,represented by the image operation names and the cor-
relative parameters rather than new image files, to the proxy
servlet.
2. This servlet transmits the modifications to the image
Web service.
3. The image Web service conciliates the modifications ac-
cording to the rules for resolving any write conflicts that
might occur.
4. The image Web service broadcasts the conciliated mod-
ifications to the management Web service and other im-
age Web services to guarantee the consistency of the image
copies they manage.
Meanwhile, the function implemented with JavaScript in
the JSP asynchronously processes the results (the continu-
ously updated modifications of the image) returned from the

25
Figure 16: editing on the visualization client

servlet to make the applets repaint themselves according to

the data this JavaScript function provided.Implementation
details are available elsewhere.Figure 2 depicts such a sce-
nario.In this integration framework, the image modifications
are represented by the image operation names and the cor-
relative parameters rather than by new image files. In addi-
tion, asynchronous communication enables the visualization
clients to interact with the proxy servlets efficiently.Both
features effectively decrease network traffic.Since the im-
age Web services deployed on the organizations Web servers
manage the image copies, each author belonging to a certain
organization can obtain the image file as soon as possible.
Furthermore, the image Web service broadcasts the concili-
ated modifications of the image to other cooperative image
Web services and the latest version of image copies can be
obtained from the management Web service directly. All of
the processes we’ve discussed in this section aim to reduce
the response time of cooperative editing, making for an inte-
gration framework that holds the promise of implementing
real-time cooperation.
A visualization client can interact with the proxy servlet to
complete the following tasks for image files:
Import:- When cooperative image editing starts, the servlet
obtains the image file from the management service and

26
transmits the image file to the image Web service and the
client.
Export:-A new author takes part in the cooperative editing
of the image file.As the image Web service manages the im-
age copy, the author obtains the latest version of the image
file from the image Web service.
Modify:-One client transmits image modifications to the
image Web services with asynchronous communication.
Update:-The image copy on the client is updated according
to the conciliated modifications obtained by AJAX.
Submit:-If a client accomplishes the image editing, it noti-
fies the image Web services and the management Web ser-
vice for version management of the image file. For importing
or exporting an image file, the servlet transmits the whole
image file over the network.However, for updating, modify-
ing, or submitting an image file, only the modifications are
delivered, which reduces the amount of data transmitted
over the network. The canvas laid in applets has two layers,
as Figure 3 illustrates.
The ground layer always represents the latest version of the
image file, and the editing layer is where the author ed-
its images.The ground layer can be repainted by importing,
exporting, and updating the image file. In terms of im-
porting, exporting, or updating the image file, the proxy
servlet returns the data for repainting. For modifying the
image file, the image modifications shown on the editing
layer are transmitted to the proxy servlet.Authors can view
the editing effects immediately by adding the two layers to-
gether.For submitting the image file,the original image file
that the management Web service saved is updated accord-
ing to the latest version of the image copy that the manage-
ment Web service managed.At the same time,the image Web
services delete the copies of the image file that they manage.
Write conflicts might occur among visualization clients. For
example: A client C1 finishes the modification M1 of the im-
age at time T1.Another client C2 completes the modification
M2 of the image at time T2 later than T1.However, the im-
age file might be updated with the temporal sequence of M2
and M1, due to message exchange delays. Thus, C1 might
encounter a write conflict, if M1 and M2 include a shared re-

27
gion. Both the management Web service and the image Web
services can automatically conciliate write conflicts. These
services use the same rules to handle write conflicts. The
modification Mi is labeled with the time stamp Ti. Each
service maintains a table of image modifications. When a
service tries to update the image file with the latest modifi-
cation Mk, it first searches the table to check whether there
is a modification Mj completed later than Mk by comparing
their time stamps. If a modification Mj exists, and Mk and
Mj include a shared region, the service will provide all pos-
sible temporal sequences of the modifications to the author
who completed Mk. The author decides how to deal with the
write conflict.Finally, this Web service broadcasts the con-
ciliated modification to other cooperative Web services.Our
integration framework is used to implement a system for
Web-based cooperative image editing. Because this frame-
work makes use of AJAX and Web services to resolve the
problems of message exchange delays and browser security
limitations, it increases Web based cooperative image edit-
ings effectiveness. In the future, this integration framework
can be used to build generic cooperative business processes.

28
11 ADVANTAGES OF AJAX
In many cases, the pages on a website consist of much con-
tent that is common between them. Using traditional meth-
ods, that content would have to be reloaded on every re-
quest. However, using Ajax, a web application can request
only the content that needs to be updated, thus drastically
reducing bandwidth usage
Because only sections of pages need to be reloaded, Ajax al-
lows for much more responsive web applications, giving users
the feeling that changes are happening instantaneously.
The use of Ajax can reduce connections to the server, since
scripts and style sheets only have to be requested once.

12 DISADVANTAGES OF AJAX
Dynamically created pages do not register themselves with
the browser’s history engine, so clicking the browser’s ”back”
button would not return the user to an earlier state of the
Ajax-enabled page, but would instead return them to the
last page visited before it.
Dynamic Web page updates also make it difficult for a user
to bookmark a particular state of the application.
Because most web crawlers do not execute JavaScript code,
web applications should provide an alternative means of ac-
cessing the content that would normally be retrieved with
Ajax, to allow search engines to index it.
Any user whose browser does not support Ajax or JavaScript,
or simply has JavaScript disabled, will not be able to use
its functionality. Similarly, devices such as mobile phones,
PDAs, and screen readers may not have support for JavaScript
or the XMLHttpRequest object. Also, screen readers that
are able to use Ajax may not properly read the dynamically
generated content.
The same origin policy prevents Ajax from being used across
domains, although the W3C has a draft that would enable
this functionality. The number and frequency of HTTP re-
quests to a web server can increase considerably, causing an
increase in server load.

29
13 FUTURE SCOPE
Some sources say the recent attention to Ajax has also brought
attention to rich Web applications, which will help vendors
using other development approaches, Better browsers, tools,
and network performance will improve Ajaxs capabilities in
the future. Ajax could find various uses. For example, ven-
dors could use it to build Web-based versions of desktop ap-
plications. This way, companies could make software widely
available to employees via a network and thus avoid spend-
ing the time and money required to install applications on
every computer. Ajax also could be useful for the growing
number of Web applications for mobile devices.Ajax may
prove interesting to developers now, they may turn to ver-
sions of Flash and other technologies in the future because,
for example, Flash supports audio, video, advanced vector
graphics, and other capabilities that Ajax can’t offer.

30
14 CONCLUSION
Ajax applications can add or retrieve new data for a page it
is working with and the page will update immediately with-
out reloading.AJAX enables the site to let users add and
view photo annotations. Meanwhile, Ajax still faces several
technical challenges, such as usage complexity and security.
The applications offer functionality generally available in
desktop software but not on the Web, which was designed
for communications simplicity, not to enable the develop-
ment of programs with enhanced capabilities.Ajax makes
it possible to develop rich Web application interfaces, but
the work is demanding.Ajax helps implement best practices,
such as isolating the client and server functions.But it’s the
developer’s responsibility to ensure the functions are well
defined and implemented, so that future tool changes don’t
require totally recoding the application.Finally, you must
test the implementation to verify its performance. Ajax of-
ten involves high network traffic and execution time on the
browser, so it can significantly slow down an application.In
the discussed topic our integration framework is used to im-
plement a system for Web-based cooperative image edit-
ing.Because this framework makes use of AJAX and Web
services to resolve the problems of message exchange delays
and browser security limitations, it increases Web based co-
operative image editing’s effectiveness. In the future, this
integration framework can be used to build generic cooper-
ative business processes .

31
References
[1] Lihui Lei and Zhenhua Duan. Integrating ajax and web
services for co-operative image editing. IT Professional,
9(3):25–29, May-June 2007.
[2] Thomas A. Powell. AJAX:The Complete Reference. The
McGraw-Hill Companies, 2008.

32