Getting Started with Jquery Ajax #1

Leave a comment

if you don’t already know what’s AJAX you can check my previous post about : what’s AJAX ?

Starting Jquery AJAX

jquery framework , offers an easy ways to make AJAX calls , alot easier than normal Javascript AJAX

1. “$.get” to handle Get request :

beginning with  some HTML to apply AJAX on  write this in a file called index.html

<body>
<button id="ajaxButton">Click me </button>
<div id = "datahere" style="width:200px; height:200px; background-color:Blue ; ">
</div></body>

make a php Page and call it default.php  , containing this code the response of the PHP page is a Text Box

<?php  echo"<input type="text" /> ; ?>

now to the Jquery Part in the file index.html

$(document).ready(function () {  
  $("#ajaxButton").click(function () {              
     $.get("default.php", function (data) {        
       $("datahere").html(data);  
       $("datahere").html(data);              
       alert(" request is sent sucessfully ");          
     });          
   });      
});
  • . ready is used to execute the code below after the document is Ready
  • attaching a click event on the button
  • $.get  takes two arguments -till now-

  1. the link to the server page to which the request will be sent
  2. call back function executed after the response comes  this call back function takes an argument called data which contains , the response of the server page  (ie : data variable is a string contains the response -the text box in this case – )
  • $(“datahere”).html(data);   // to load the write into the DIV

BY EXECUTION , THE TEXT box will appear inside the Blue box

 

 

 

 

 

 

 

 

till now you can download the Source Files from here : download the source code #1

NEXT PHASE , Sending data in the AJAX Request :

changing alittle bit to the Javascript :

$(document).ready(function () {  
  $("#ajaxButton").click(function () {              
     $.get("default.php",{"name":"hady","age":"20"} , function (data) {        
       $("datahere").html(data);  
       $("datahere").html(data);              
       alert(" request is sent sucessfully ");          
     });          
   });      
});

and changing the PHP code

<?php 
echo "name is".$_GET['name']."<br/> age is : ".$_GET['age'] ;
 ; ?>
  • now we noticed here is that the $.get function takes a middle argument which is a JSON object
  • we can get the value of the sent Json attributes by function  $_GET[”the name of the attribute”] in the PHP code lines

the output will be like this :

 

 

 

 

 

 

 

 

you can download the code lines till now from here : download the source code #2

2. “$.POST” to handle POST request :

actually $.post is simillar to $.get  in everything so no need for repetition  the only difference it it’s responsible for post request to the server and $.get is responsible for the get request

if you don’t know the difference between post and get check this link .

those are not all the Jquery methods to send an AJAX request  acutally there are others that ease sending and requesting of a special kind of data ( JSON , FORM , Javascript …etc )

more will be Explained in Next posts so Stay tuned

What’s AJAX ?

1 Comment

AJAX :

it’s shorthand to ” Asynchronous JavaScript and XML ”

Historical Background :

in the early web stages , websites where all HTML based so any small change in the content of the web page needs the webpage to be all reloaded , this SUCKS  and adds loads to the bandwidth and the server , after Java applets are introduced , an asynchronous data reloading was available also Microsoft introduced in internet explorer 5 the  XMLHTTP control  then later on google deployed the AJAX when it used it in GMAIL and GOOGLE maps

check this out when Ajax what introduced to the public Ajax: A New Approach to Web Applications

\

src : http://www.adaptivepath.com/ideas/essays/archives/000385.php

AJAX Main achievements :

the transfer of data between servers and browsers became asynchronous no need to reload the page for each single change in the page ; you can find something like  suggested links in search Engines  , Google and Bing instance ,

however XML is not the only used for data interfered  often JSON or although other formats such as preformatted HTML or plain text can also be used.instead .

some Drawbacks :

  • clicked links are not saved into the browser history also it’s difficult to bookmark certain page at a certain position , because the pages changes without changing the URL of the main page so if you are building an Ajax gallery for example you can’t bookmark a single page , or go back or forward but alot of developers are Creating techniques to over come this , as by using the Hash Object

 

Ajax frameworks:

Ajax Frame works are  frame works Built to help users to Develop ajax applications Easily AJAX has different Frame works in different languages

  • Javascript AJAX  frameworks : like Jquery , MooTools , dojo toolkit , ASP.net AJAX
  • JAVA Frameworks for server side AJAX :  Google webkit , BackBase , Apache webkit
  • C++ : wt  webkit
  • ASP.NET AJAX : Microsoft Atlas formerly
  • Pyjamas , a widget library with a Python to JavaScript compiler