Archive | AJAX RSS feed for this section

EXT JS a JAVA SCRIPT library

28 Dec

extjs.gif

In EID vacation I decided to study on some JavaScript library. After finishing DOJO I started ext JS. I was really excited when I have started it.

They have vast collections of tools like Grids, Trees, From, Tab etc. And implementation is not so difficult if we have little bit knowledge in DOM and HTML.
There is a layout manager to place the contents in exact place.

Their API documentations are good for advance development. But for newbie better first finish the tutorials.

Examples: http://extjs.com/deploy/dev/examples/feed-viewer/view.html
Documentations: http://extjs.com/learn
Download: http://extjs.com/download

Hope you guys will enjoy EXT JS 🙂

Advertisements

DOJO a great AJAX based library

22 Dec

Last few days I was studying on an AJAX library call DOJO. This is really a fantastic lib. We already know about the new email interface in YAHOO. What you feel if we need to write a script like that or like GOOGLE reader. This really time consume to bring a professional look. Actually this is why we use Frame work or tools. DOJO is such a tool to make some thing professional in AJAX.

Dojo is an Open Source DHTML toolkit written in JavaScript. It builds on several contributed code bases (nWidgets, Burstlib, f(m)), which is why we refer to it sometimes as a “unified” toolkit. Dojo aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development.

Dojo does all of these things by layering capabilities onto a very small core which provides the package system and little else. When you write scripts with Dojo, you can include as little or as much of the available APIs as you need to suit your needs. Dojo provides multiple points of entry, interpreter independence, forward looking APIs, and focuses on reducing barriers to adoption.

Download DOJO
Documentation
Demo

Basically what is AJAX?

6 Dec

BACKGROUND

Few days back I had to face a question, Could AJAX reduce page loading time?
Since then I have been thinking to write something on it. The term “AJAX” is not
new in web application. Google has been using it since 2005.

INTRODUCTION

We all know AJAX process one kind of HTTP request for us. Always we are using
HTTP request in web browser. When a request appears to web server in the
response it returns some content. Generally it is a bundle of html codes. After
getting this bundle, the web browser load the new content and we loss previously
loaded page. On this context AJAX can play an excellent rule.

WHAT IS AJAX

AJAX = Asynchronous JavaScript and XML.

The mechanism of AJAX is very simple. JavaScript send a xmlHTTP request to
server and preserve the returned content in a variable. So it is not affecting
currently loaded page.

CONFIGURE AJAX

CPain, JQuery, Prototype are famous libraries for AJAX and pretty easy to
use. And writing an AJAX function is also not a big deal. First need an xmlHTTP
reference to process.// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

// Internet Explorer

xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);

xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);

When xmlHttp object is ready then we can send request to server. There are tow
basic function “open” and “send” to process request. First one set the
properties and second one send the request.

xmlHttp.open (“GET”,” abc.php”, true);

xmlHttp.send();

xmlHttp.onreadystatechange is a special instruction to set a “function” or
“function name” to catch the response. After sending request successfully the
return content store in a variable called “xmlHttp.responseText”. We can trace
the success rate of the request from some status flags (Loading-1, Loaded-2,
Interactive-3, and Complete-4). These status flags stored in “xmlHttp.readyState”.

xmlHttp.onreadystatechange=function()

{

         if(xmlHttp.readyState==4)

        {

            Alert(xmlHttp.responseText );

        }

}

So AJAX is nothing but browsing a specific URL from a JavaScript document
keeping the existing page loaded as it is. This is so far what AJAX is.

AJAX & PAGE LOADING TIME:

First of all AJAX is not a tool to reduce the system press. It can do nothing
except fetching content from server. But if we can use AJAX in such a way that
first time we will load small amount of data and the rest data will fetch if
user request for it. In that case AJAX can reduce the page loading time
drastically.Let’s say we are showing 10 pictures in a page. If one image needs
‘X’ amount of time, then total time is

T = 10X

Now if we decide to load one image first time and rest 9 images will load if
user clicks on first loaded image. Then first loading time of the page is

T = 1X

So it will reduce the system press by 9 times. This is actually how AJAX can
reduce the page loading time.

REFERENCE:

http://www.w3schools.com/ajax/default.asp
http://www.prototypejs.org/api/ajax
http://cpaint.sourceforge.net/
http://docs.jquery.com/Ajax

EXAMPLE

See the following example to see how AJAX works.

<html>

    <head>

    <script type=”text/javascript”>

        function ajax ()
       {
              var xmlHttp;

             try
            {
                    // Firefox, Opera 8.0+, Safari
                   xmlHttp=new XMLHttpRequest();
             }
            catch (e)
            {
                // Internet Explorer
               try
              {     
                       xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
               }
               catch (e)
                {
                      try
                      {
                          xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
                       }
                        catch (e)
                      {                       
                             alert(“Your browser does not support AJAX!”);
                             return false;
                      }
                }
              }
              return xmlHttp;

    }

     function ajaxFunction()
     {

              var xmlHttp;
               xmlHttp = ajax();
               xmlHttp.onreadystatechange=function()
              {
                      if(xmlHttp.readyState==4)
                    {

                       document.myForm.time.value=xmlHttp.responseText;
                   }
             }

           xmlHttp.open(“GET”,”time.php”,true);
           xmlHttp.send(null);
}
</script>
</head>
</body>

    <form name=”myForm”>
                <input type=”button” onclick=”ajaxFunction();” value=”Click Me” />
                Time: <input type=”text” name=”time” />
    </form>
</body>
</html>

<?php

    //time.php
    // Save in same Directory
     echo date(‘H a’);

?>

Well, I tried to make this example easy to all. Hopefully everybody will enjoy it.