Web Encyclopaedia Application:

Implementation through Ajax

Shashank Yadav, Dushyant Agarwal, Mohammed A Qadeer
Department of Computer Engineering,
Zakir Husain College of Engineering and Technology,
Aligarh Muslim University, Aligarh 202002, India
[email protected], [email protected], [email protected]

Abstract This document gives a detail on our ongoing work

in the field of an AJAX based website in a modular way such
that it can work efficiently for any dynamic web application
especially WIKIPEDIA. The paper gives a basic overview of
the current stage in web encyclopaedia or Wikipedia browsing
and additional data fetching advancements in ASP.net as well
as the progress achieved and future advancements in our
project we are looking forward to. Web development is getting
more and more popular now a days, but users still experience
the nasty part of having to click a button, wait until a new page
loads, click another button, and so on. So at this time sites are
needed that can overcome this problem. One of these types of
sites that work on classical HTML approach is Wikipedia. So
our project is about implementing Wikipedia database on some
website having a technology to make it fast for a user. Our
current work has reached up to all basic AJAX tools
implementation and a dummy database connection having
same structure as Wikipedia. Dummy database is also
optimized to give faster search. Also we are trying to
implement keyword search from GBs of database without
refreshing the page and the current status promises positive
achievements in future. AJAX can also be used to make this
application compatible for handheld devices and many other
improvements in it like offline mode, advanced security
constraints etc. WEAITA means Web Encyclopaedia
Application Implementation through AJAX.

Keywords AJAX based Wikipedia, Dynamic Fetching, Module

Based Web Application, Web Encyclopaedia, and Data Fetching
Advancements in ASP.net

I. INTRODUCTION
Web development is getting more and more popular, users
still experience the nasty part of having to click a button,
wait until a new page loads, and click another button, waits
until a new page loads, and so on. So at this time sites are
needed that can overcome this problem. One of these types
of sites that work on classical HTML approach is
Wikipedia. At the present time there is not any Wikipedia
based site that is implemented through AJAX. So our
project is about implementing Wikipedia database on some
website having a technology to make it fast for a user.

AJAX will make this website faster, more interactive and

bandwidth efficient.
II. SALIENT FEATURES
In this website we are going to design mainly the
interface that will be similar as the original look of the
Wikipedia. It is because a large number of internet users are
using this site today and are in habit to use this site as it is.
The interface will be providing an AJAX enabled
application that will load only those contents that will be
visible first and hence the overall loading speed of the
website will increase. The extra contents will be
downloaded in background.
III. TECHNICAL DETAILS
This section includes the essential technical details of the
project. Here, we give an overview of AJAX and its
implementation in Wikipedia.
A. Overview of AJAX
The name AJAX is short for Asynchronous JavaScript and
XML, and its made up of several components:
o
o
o
o

Browser-based presentation using HTML and

Cascading Style Sheets (CSS)
Data stored in XML format and fetched from the
server
Behind-the-scenes
data
fetches
using
XMLHttpRequest objects in the browser
JavaScript to make everything happen

With Ajax, you communicate with the server behind the

scenes, grab the data you want and display it instantly in a
Web page no page refreshes needed, no flickering in
the browser, no waiting. Some of the data is exchanged
with the server throughout the session instead of every
time a page is reloaded by a user. The overall goal and
purpose of AJAX is to create an interactive experience for
the end user while increasing the speed and ease of use.
Basically, AJAX moves web-based applications from a
page model to a true application model, based on events
and user actions rather than pages.
B. How AJAX works?
1. In the browser, you write code in JavaScript that can fetch
data from the server as needed.

Figure 1: Different components of AJAX

2. When more data is needed from the server, the JavaScript
uses a special item supported by browsers, the
XMLHttpRequest object, to send a request to the server
behind the scenes without causing a page refresh. The
JavaScript in the browser doesnt have to stop everything to
wait for that data to come back from the server. It can wait
for the data in the background and spring into action when
the data does appear (thats called asynchronous data
retrieval).

Figure 2: Comparison of different web technologies

3. The data that comes back from the server can be XML or
just plain text if you prefer. The JavaScript code in the
browser can read that data and put it to work immediately.
Thats how Ajax works it uses JavaScript in the browser
and the XMLHttpRequest object to communicate with the
server without page refreshes, and handles the XML (or
other text) data sent back from the server.
C. Advantages of AJAX

dont have to worry about PC, Mac or even the up and

coming Linux.
o

Flexibility and Accessibility You can virtually access

your data anywhere you can connect to the Internet.
Online applications using AJAX eliminate the need to
update your software regularly. The software can be
updated on the server side and display the most recent
build of any program to the entire public.

D. Implementation
o

AJAX, Next big thing The total impact of AJAX has

yet to be seen but it is already being implemented by
large corporations which is a good sign that there is
still more to come. The Internet giant, Google, is
already using AJAX for some of their projects
including Google Maps and Gmail. AJAX complies
perfectly with the new Web 2.0 user interaction
idea; making it a strong candidate for further use.

The User Experience Users relate their experience

with AJAX web pages to be more like a separate
application than a standard web page. When someone
clicks on a link on an AJAX web page, the page can
usually be updated dynamically as opposed to a
standard web page where the entire page is refreshed.
The more attractive and easy to use a web site is, the
more likely the user will return to your site.

Low Bandwidth Usage AJAX limits the calls to the

server by generating the HTML within the users
browser. Most of the requests to the browser are just
for JavaScript and actual data. Since there is less data
coming from the server, an AJAX web page seems to
load much quicker.

Different Platforms With the use of AJAX and

online applications, the variety of platforms out there
has less of an impact on both the users and developers.
Programmers wont have to develop their software for
all the different platforms available. For the users, you

Now we move to the implementation of AJAX based

Wikipedia. Since AJAX is not really a language, there is no
such thing as pure AJAX code. As such we will now look at
JavaScript code that uses the principles of AJAX.
We are going to use JavaScript, HTML and XML.
One of the features that are mostly used in AJAX is the
XMLHttpRequest object, so let us begin with that.
XMLHttpRequest - A JavaScript object that allows us to
load data from a server at any time i.e. asynchronously.
Using XMLHttpRequest, we can be in control of when the
data of the page is loaded instead of waiting for a user to
click on a link. We can load data from a remote server and
using JavaScript place it on our page after it has loaded.
Now before implement further we will have to plan what we
are going to do. We will load an external XML file
containing data, create an HTML representation of data and
then place data in the desired place in document.
First of all, we will create basic HTML file having a table
with 2 columns.
1. Topic
2. Link
Suppose we have an XML file already having 100 topics
and links then we can call it in our html file.

E. Adding more AJAX

1. Pagination: In our website all the topics that are

present in the database will be represented in the form of a
table. If the size of the table increases then it is very tough
to manage all the topics in one page. So we have added
AJAX pagination script in it. This script will manage the
number of topics in one page and on clicking some other
page number then the topics on that page will come on
screen.
2. Dynamic links: In every topic we have add a link that
have been dynamically fetched. This link takes us to the
page where the information related to the topic is written.
3. Page navigation: This is used with the pagination
script. It is used to change page content without page
refreshing.
4. Variable page size support: With the help of this we
can change the number of topics in one page. The special
thing is that we can change it without refreshing the page
hence it is very fast and interactive.
5. Auto complete search (Suggestions): With the help of
this a user can easily find a suggestion. Let us suppose a
user wants to search apple then when he types a then a
list tells him that a, an and many other similar words are
also present in database and he can find apple even just
after typing app and hence it is very convenient to user.
F. Procedure
The website is implemented in a planned way to avoid
overheads and other problems.
First of all, we implemented a database of some words.
This database file was actually an XML file in a structured
format. After that an HTML file having table in it was
implemented. We also put a textbox and combo box for auto
complete and variable page support that we are going to
implement later. Then we put page navigation script but
with page refresh and after that we put a JavaScript that
bound whole application and also made page navigation
without page refresh.
Then we implement a function to calculate words per
page to implement variable page size support and page
navigation. It was a simple java script that made this
functioning. With the help of this now we can navigate
through different pages of different size or different number
of words on pages without any worry of page refreshing and
other overheads.
The next thing to be implemented was auto complete
search. Now a days many websites are using auto complete
search functionality but some of those applications are
either slow or sometimes unstable. So we worked a little bit
more on our auto complete search to make it more stable
and to work it even for slow internet connections. To make
this happen we are just fetching name of the words and not

the links associated with them. In this way, our search starts
in less than one second and gives all the results precisely.
IV.
REMAINING WORK
Most of the Wikis, available today online, are based on
html pages and hence their databases turn out to be
approximately in hundreds of GBs. So our focus will be
mainly to implement such database structures so that to
store more data in less space that is reduced redundancy and
using inferred database implementation practices.
A. Integration of Components
All the above mentioned functionalities have been tested
separately but their integration inside one common package
is yet to be done. Although, component integration is
generally not an issue for well written code, synchronization
issues may still arise.We tried to implement only English
language database dump to be displayed on our Ajax
application. But even that was a huge file. So we only took
some keywords and using those files we parsed, indexed
and generated our own database. The remaining work is to
take this database into XML format and then using ASP we
can put it all in work.
B. Implementation of dynamic fetching of images

Till now we have only discussed about dynamic fetching

and displaying of data in the form of text or links. But we
can also use BLOBs and other functionalities to
dynamically fetching the images. This will make wiki
application more useful and appealing.

this powerful application will be easily accessible. All

components and functionalities implemented in this project
are designed in such a way that it can easily be imported on
handheld platforms. The Ajax design approach has
revolutionized the Web with lightweight and highly

Figure 3: Snapshot of a working module

responsive applications. Because of lack of resources, even
some high end handheld devices do not support AJAX
Suppose we want to store 10 entries regarding one word in
applications, but in future we can expect a changed scenario
Wikipedia database. Some data entries can be inferred or
as different companies now understand the power of AJAX.
derived from other data entries. Let us suppose, we have a
Using AJAX, web computing handhelds can save their
published_at column in our database that contains the
resources and power easily and these devices will become
date on which this data has been published. And let us
more responsive. If we are talking about Wikipedia
suppose that we have an lifetime of an article, we have to
application, then using AJAX, we can make an application
update or delete an article after expiring its lifetime then
which will work like any other mobile applications and
we need not store the age of the article because it can be
without taking much time, it will produce results.
easily derived using published_at entry. In thus way
Here, we will have to take care of some simple factors:
database will become more efficient and compact.
1. First of all, application must update display only
when required or any change is detected.
2. Application should access network accordingly.
V.
FUTURE PROSPECTS
3. Application must not include such JavaScript
functions that put extra processing burdens on
There are some features that have not been included in
devices.
the intended goals of the project but are of great need. We
As described in first point that application must update
are presently using the computer system as the platform but
display only when change is detected so to achieve this
we can also implement this application on handhelds so that
C. Inferred database entries

we will have to implement a temporary storage of cached

data and hence this application can also work offline.
VI. CONCLUSIONS
The conclusion we reached after implementing above
procedures and functionalities is that our Database Dump
file of Wikipedia started working faster and user does not
have to wait long for a page to load. It also has a better
interaction with the user. It has core functionalities of the
online Wikipedia. By implementing for handheld devices, it
can be accessed by a user anytime, anywhere. On handheld
devices, it will work as any other mobile application. It is
certainly extendible for the future prospects.
ACKNOWLEDGMENT
REFERENCES
[1] Various Authors, 'Ajax Programming',
http://en.wikipedia.org/wiki/AJAX
[2] Various Authors, 'The XMLHttpRequest Object',
http://www.w3.org/TR/XMLHttpRequest/
[3] Various Authors, 'Document Object Module (DOM)',
http://www.w3.org/DOM/
[4] Marchetto, A. Tonella, P., Search-Based Testing of
Ajax Web Applications, in Search Based Software
Engineering, 2009, 1st International Symposium on 1315 May 2009, pages: 3 12.
[5] Zepeda, J.S. Chapa, S.V., From Desktop
Applications towards Ajax Web Applications, in
Electrical and Electronics Engineering, 2007, ICEEE
2007, 4th International Conference on 5-7 Sept. 2007,
pages: 193 - 196.
[6] Qingling Wang Qin Liu Na Li Yan Liu, An
Automatic Approach to Reengineering Common Website
with AJAX, in Next Generation Web Services Practices,
2008, NWESP '08, 4th International Conference on 20-22
Oct. 2008, pages: 185 190.
[7] Farrell, J. Nezlek, G.S., Rich Internet Applications
the Next Stage of Application Development, in
Information Technology Interfaces, 2007, ITI 2007, 29th
International Conference on 25-28 June 2007, pages: 413
- 418