Scribd Logo
Upload

Welcome to Scribd!

  • Ajax

    Uploaded by

    cherys
    32 views5 pages
    AJAX is an acronym for Asynchronous JavaScript and XML. It is a technique use JavaScript as Client Side to make background server calls and retrieve additional data as needed. In this post, we try to use ajax in our simple application.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    AJAX is an acronym for Asynchronous JavaScript and XML. It is a technique use JavaScript as Client Side to make background server calls and retrieve additional data as needed. In this post, we try to use ajax in our simple application.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    32 views5 pages

    Ajax

    Uploaded by

    cherys
    AJAX is an acronym for Asynchronous JavaScript and XML. It is a technique use JavaScript as Client Side to make background server calls and retrieve additional data as needed. In this post, we try to use ajax in our simple application.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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