Friday, July 15, 2011

introduction to ajax

today i will write a Newbie tutorial for ajax
about ajax
AJAX stands for Asynchronous JavaScript and XML.

it is not a programming language but an extension to Javascript to load content to a part of the page without reloading the page

some of the powerful implementation of AJAX are
  • Gmail -Google approach to mail
  • facebook -widely used social networking
  • twitter -widely used micro-blogging site
  • and many more out there

AJAX was introduced in 2005.

now start the main part
to create a ajax request we have to first create a ajax request variable
browser's initaliser
For modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) new XMLHttpRequest()
Old versions of Internet Explorer (IE5 and IE6) an ActiveX Object: new ActiveXObject("Microsoft.XMLHTTP")
some unknow old versions of Internet Explorer new ActiveXObject("Microsoft.XMLHTTP")

now we open the variable to get the
<ajax variable>.open(<method>,<address>,<Asynchronous>);
<address> the file to fetch from server.relative link to the path of the script address.
<Asynchronous>
true(Asynchronous):-to continue processing further script
false(synchronous):-to stop processing the script till request is finished.
<method> request method example get,post..request method in hypertext transfer protocol from wikipedia
note
if you use true then write the code for printing the recived data to the page after the function send()


finally send the request to server
send(<post data>)
<post data> to send post variable data like name or email from form input.

the most important part of the script
<ajax variable>.onreadystatechange
Stores a function (or the name of a function) to be called automatically each time the readyState property changes
Property Description
readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4:

0: request not initialized

1: server connection established

2: request received

3: processing request

4: request finished and response is ready
status 200: "OK"

404: Page not found
note:200 is used to check the file exists on server if you are viewing a page directly from computer then use 0 to get "ok" status
to access readyState use <ajax variable>.readyState
this will tell you what is the status of the request

to access status use <ajax variable>.status
this will tell you the last status received from the server for this request [and for example 500 means server internal error]


to access the received data
xml format<ajax variable>.responseXml
text format<ajax variable>.responseText


now you have got the theoretical knowledge we create a function to access a text file and print it to the screen
  1. create a page index.htm and a file with name aboutme.txt in the same directory (or folder)
  2. copy the above code to index.htm
  3. write "hello my name is kuldeep dhaka..my email address is kuldeepdhaka9@gmail.com" or something of your choice to aboutme.txt
  4. run the index.htm in browser and check out what do you see
  5. see to load a ajax link if ajax is supported and goto the link this is useful for advance users
thats all folk's for today.
please comments [+ notify any bug *if any*]
code under creative commons attribute(open source).
a email of mine above the code will be appreciated
<html>
<head>
<script type='text/javascript'>
/*-created by kuldeep dhaka (kuldeepdhaka9@gmail.com)-*/
/*-code tested in mozilla firefox 5.0-*/
/*---------create a new ajax variable------*/
function new_ajax_request_variable()
{
try {return new XMLHttpRequest();}
 catch (e)
 {
        try{return new ActiveXObject("Msxml2.XMLHTTP");}
  catch (e){
   try{return new ActiveXObject("Msxml3.XMLHTTP")}
   catch(e){
    try{return new ActiveXObject("Microsoft.XMLHTTP");}
    catch (e){return "";}
 }}}
}
/*---------ajax request function [main function]----*/
function ajax_request(where,what,method,form_phrase,asyn)
{
var ajax_request=new_ajax_request_variable();
 if(isnull(ajax_request)) 
     {
      alert("your browser do not support ajax");
      return;
     }
 else
     {
  /*---the readystatechange section-----*/
  ajax_request.onreadystatechange=function()
  {
   if(ajax_request.readyState==0) 
    set_property(where,"initalising request....");
   else if(ajax_request.readyState==1) 
    set_property(where,"server connection established....");
   else if(ajax_request.readyState==2) 
    set_property(where,"request received....");
   else if(ajax_request.readyState==3) 
    set_property(where,"processing request(nearly finished)....");
   else if(ajax_request.readyState==4) 
    {
    if(ajax_request.status==200) 
     set_property(where,ajax_request.responseText);
    else if(ajax_request.status==404) 
     set_property(where,"404:file not found");
    else set_property(where,"error[status="+ajax_request.status+"]");
    }
  }
 /*----open section---------*/
 if(isnull(method)) method="GET"; //default value GET
 if (isnull(asyn)) asyn=true; //default value TRUE
 ajax_request.open(method,what,asyn);
 /*----send---------*/
 if(isnull(form_phrase)) ajax_request.send();
 else ajax_request.send(form_phrase);
 }
}
/*-------function to check variable--------*/
function isnull(variable)
{
 if(variable=="" || variable=="undefined" || variable==null) return true;
 else return false;
}
/*----function to write data with an element-----*/
//you can change it according to your need
ie=document.getElementById;
ns=document.layers;
othr=document.all;
function set_property(objid,value)
{
 if (ie) document.getElementById(objid).innerHTML=value;
 else if (ns) document.layers[objid].innerHTML=value;
 else if (othr) document.all[objid].innerHTML=value;
}
</script>
<style type="text/css">
div
{
 padding:30px;
 margin:30px;
 background:#f4f4f4;
 border:1px solid #ccc;
}
div:hover{border:1px solid #aaa;}
body{background:#fff;}
</style>
</head>
<body>
<div id='aboutmebox'>
<button onclick='ajax_request("aboutmebox","aboutme.txt")' >
click me to load aboutme</button>
</div>
</body>
</div>

Labels: , , , , ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home