Scribd
Upload
68 views

Ajax

1. AJAX allows for asynchronous retrieval of data from a web server without reloading the entire page. It uses JavaScript and the XMLHttpRequest object to make requests and update portions of a page. 2. The document provides examples of AJAX implementations on sites like Google and Gmail and discusses the basic anatomy of an AJAX application using JavaScript, XMLHttpRequest, and server-side processing. 3. Subsequent sections demonstrate a simple AJAX library and example pages that load content asynchronously from links using the library without a full page reload.

Uploaded by

cherys
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
68 views

Ajax

1. AJAX allows for asynchronous retrieval of data from a web server without reloading the entire page. It uses JavaScript and the XMLHttpRequest object to make requests and update portions of a page. 2. The document provides examples of AJAX implementations on sites like Google and Gmail and discusses the basic anatomy of an AJAX application using JavaScript, XMLHttpRequest, and server-side processing. 3. Subsequent sections demonstrate a simple AJAX library and example pages that load content asynchronously from links using the library without a full page reload.

Uploaded by

cherys
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 5

AJAX : Understanding AJAX

AJAX Tutorial: Nowdays, you can find AJAX topic everywhere. Yes, this method bring more
advantage in internet word. Some people say AJAX is not new technology. It just a method. Other
people say it is a technology. In this post, we talk about AJAX in preview.

AJAX is an acronym for Asynchronous JavaScript and XML. For me, it mean simple "empowered
JavaScript". What that mean? Mmm.. before talk what AJAX exactly, do you ever see (or taste) Yahoo
Mail! Beta Version? Or Gmail (not HTML version)? At that web page, without reload full page, we
can jump between pages.

It is a technique use JavaScript as client side to make background server calls and retrieve additional
data as needed. It update certain portions of page without causing full reloads. This is little example
web that apply AJAX:

1. Google Suggest, check it out at http://www.google.com/webhp?complete=1


2. Gmail, http://www.gmail.com
3. Google Maps, http://maps.google.com

I think AJAX is smart web application. More responsive web page. I remember it is like 'flash'! Yeah,
we can build smart application like flash page. But, at AJAX, you don't need install any extra modules.
AJAX runs all modern web browsers, such as Mozilla Firefox, Internet Explorer, or Opera. Following
the anatomy of AJAX:

1. JavaScript, is essential of AJAX. We use for Client Side function and use Document Object
Model (DOM) to manipulate parts of HTML page.
2. The XMLHttpRequest object enable JavaScript to access server asynchronously.
3. Server side technology to handle the request that come from the JavaScript Client, example
PHP.
AJAX: Shortcut to AJAX

AJAX Tutorial: In this post, We try to use Ajax in our simple application. First time, We will build
simple ajax library. Then, we write page to load the ajax library. This is very basic application. You can
still extend it for more complex web.

Ok, for this practice, we need 3 file (I create within www/test/ajax directory):

1. ajax.js -> as ajax library


2. test.php -> as main page
3. home.html -> will be loaded as content

First, write below line codes within ajax.js

01 function callAJAX(url, pageElement, callMessage) {


02 document.getElementById(pageElement).innerHTML = callMessage;
03 try {
04 req = new XMLHttpRequest(); /* e.g. Firefox */
05 } catch(e) {
06 try {
07 req = new ActiveXObject("Msxml2.XMLHTTP");
08 /* some versions IE */
09 } catch (e) {
10 try {
11 req = new ActiveXObject("Microsoft.XMLHTTP");
12 /* some versions IE */
13 } catch (E) {
14 req = false;
15 }
16 }
17 }
18
19 req.onreadystatechange = function() {responseAJAX(pageElement);};
20 req.open("GET",url,true);
21 req.send(null);
22
23 }
24
25 function responseAJAX(pageElement) {
26 var output = '';
27 if(req.readyState == 4) {
28 if(req.status == 200) {
29 output = req.responseText;
30 document.getElementById(pageElement).innerHTML = output;
31 }
32 }
33 }

then, we create test.php, enter following codes:


01 <html>
02 <head>
03 <SCRIPT language="JavaScript" SRC="ajax.js"></SCRIPT>
04 </head>
05 <body onload="callAJAX('home.html','displaydiv')">
06
07 <table>
08 <tr>
09 <td id="displaydiv"></td>
10 </tr>
11 </table>
12
13 </body>
14 </html>
last, we create home.html, enter following line code:
1 front page test

Now, point your browser to http://localhost/test/ajax/test.php, you will get like this:

AJAX: Loading Web Content from Links

Ajax Tutorial: In this practice, we try build links in page. Then, from that links we call web content.
This is basic and simple way to use ajax in our web. From this practice, we can see how ajax works.

We will modify from previous practice. Ok, open test.php, replace with following code:

01 <html>
02 <head>
03 <SCRIPT language="JavaScript" SRC="ajax.js"></SCRIPT>
04 </head>
05 <body onload="callAJAX('home.html','displaydiv')"><b>
06 <a href="#" onclick="callAJAX('home.html','displaydiv')">Home</a>
07 <a href="#" onclick="callAJAX('news.html','displaydiv')">News</a>
08 <a href="#" onclick="callAJAX('about.html','displaydiv')">About</a></b>
09 <table>
10 <tr>
11 <td id="displaydiv"></td>
12 </tr>
13 </table>
14
15 </body>
16 </html>

Create "news.html", enter following test code:

1 news page test

Create "about.html" enter following test code:

1 about page test

Now, point your browser to http://localhost/test/ajax/test.php. Try click link.

AJAX: Loading Preloader Animation Image

AJAX Tutorial: In this post, we add something that make user know ajax still works. We called
preloader. It will help user to know where part of page will change. It also add more attractive to our
web.

You can use many preloader like this:


Ok, we try to use it. Open test.php in previous practice. Replace with following code:

01 <html>
02 <head>
03 <SCRIPT language="JavaScript" SRC="ajax.js"></SCRIPT>
04 </head>
05 <body onload="callAJAX('home.html','displaydiv' , '<center>
06 <img src=loading6.gif></center>')">
07 <a href="#" onclick="callAJAX('home.html','displaydiv', '<center>
08 <img src=loading6.gif></center>')">Home</a>
09 <a href="#" onclick="callAJAX('news.html','displaydiv', '<center><img
10 src=loading6.gif></center>')">News</a>
11 <a href="#" onclick="callAJAX('about.html','displaydiv', '<center><img
12 src=loading6.gif></center>')">About</a>
13 <table>
14 <tr>
15 <td id="displaydiv"></td>
16 </tr>
17 </table>
18
19 </body>
20 </html>

You might also like