Basic Ajax usage with jQuery

In this article we will be talking about the basic usage of Ajax with jQuery 1.4.2 production (24KB, Minified and Gzipped).
In order to use the JavaScript examples in this article, you should first download jQuery and include it on your page using:
  1. <script type="text/javascript" src="jquery-1.4.2.js"></script>  
    2.
Throughout this article our Ajax scripts will communicate with ‘serverscript.php‘ our Server script.
  1. <?php  
    2. 

  2. if(isset($_POST['firstname']) &&  
    3. 

  3.    isset($_POST['lastname'])) {  
    4. 

  4.  echo "Hey {$_POST['firstname']} {$_POST['lastname']}, 
    5. 

  5.    you rock!\n(repsonse to your POST request)";  
    6. 

  6. }  
    7. 

  7. if(isset($_GET['firstname']) &&  
    8. 

  8.    isset($_GET['lastname'])) {  
    9. 

  9.  echo "Hey {$_GET['firstname']} {$_GET['lastname']}, 
    10. 

  10.    you rock!\(response to your GET request)";  
    11. 

  11. }  
    12. 

  12. ?>  
    13.
Method One - POST (Asynchronous with data):
Transfer data to the server (using POST method), and retrieve a response:
  1. function doAjaxPost() {  
    2. 

  2.  $.ajax({  
    3. 

  3.    type: "POST",  
    4. 

  4.    url: "serverscript.php",  
    5. 

  5.    data: "firstname=clint&lastname=eastwood",  
    6. 

  6.    success: function(resp){  
    7. 

  7.      // we have the response  
    8. 

  8.      alert("Server said:\n '" + resp + "'");  
    9. 

  9.    },  
    10. 

  10.    error: function(e){  
    11. 

  11.      alert('Error: ' + e);  
    12. 

  12.    }  
    13. 

  13.  });  
    14. 

  14. }  
    15. 

  15.   
    16. 

  16. doAjaxPost();  
    17.
Method Two - GET (Asynchronous with data):
Transfer data to the server (using GET method), and retreive a response:
  1. function doAjaxGet() {  
    2. 

  2.  $.ajax({  
    3. 

  3.    type: "GET",  
    4. 

  4.    url: "serverscript.php",  
    5. 

  5.    data: "firstname=clint&lastname=eastwood",  
    6. 

  6.    success: function(resp){  
    7. 

  7.      // we have the response  
    8. 

  8.      alert("Server said:\n '" + resp + "'");  
    9. 

  9.    },  
    10. 

  10.    error: function(e){  
    11. 

  11.      alert('Error: ' + e);  
    12. 

  12.    }  
    13. 

  13.  });  
    14. 

  14. }  
    15. 

  15.   
    16. 

  16. doAjaxGet();  
    17.
Note that GET is the default type for Ajax calls using jQuery, so we really do not need to explicitly state it, but I’ve placed it there just for clarity.
Practical jQuery Example using POST:
  1. <html>  
    2. 

  2. <head>  
    3. 

  3.   
    4. 

  4. <script type="text/javascript" src="jquery-1.4.2.js"></script>  
    5. 

  5. </head>  
    6. 

  6. <body>  
    7. 

  7.   <script>  
    8. 

  8. function doAjaxPost() {  
    9. 

  9.  // get the form values  
    10. 

  10.  var field_a = $('#field_a').val();  
    11. 

  11.  var field_b = $('#field_b').val();  
    12. 

  12.   
    13. 

  13.  $.ajax({  
    14. 

  14.    type: "POST",  
    15. 

  15.    url: "serverscript.php",  
    16. 

  16.    data: "firstname="+field_a+"&lastname="+field_b,  
    17. 

  17.    success: function(resp){  
    18. 

  18.      // we have the response  
    19. 

  19.      alert("Server said:\n '" + resp + "'");  
    20. 

  20.    },  
    21. 

  21.    error: function(e){  
    22. 

  22.      alert('Error: ' + e);  
    23. 

  23.    }  
    24. 

  24.  });  
    25. 

  25. }  
    26. 

  26. </script>  
    27. 

  27.   
    28. 

  28. First Name:  
    29. 

  29. <input type="text" id="field_a" value="Sergio">  
    30. 

  30. Last Name:  
    31. 

  31. <input type="text" id="field_b" value="Leone">  
    32. 

  32. <input type="button" value="Ajax Request" onClick="doAjaxPost()">  
    33. 

  33.   
    34. 

  34. </body>  
    35. 

  35. </html>  
    36.


jQuery Example in Browser
Well there you have it, not too tricky and with a weight of only 24Kb for the base library you can’t go wrong. Of course, jQuery can be used for a whole heap of other tasks.
Until next time (when we cover MooTools), Happy A’jaxing!

Comments

Post a Comment