Ajax using Jquery

Hello Developer !!!

Let me introduce you to Ajax in W3Schools definition

  • Update a web page without refreshing the page
  • Request data from a server – after the page has loaded
  • Receive data from a server – after the page has loaded
  • Send data to a server – in the background
  • While performing ajax request, user can interact with other UI elements, because ajax will be performed in the background.

Something about JQuery Ajax

  • Ajax is a web technology, JQuery has implemented this technology
  • Without even using JQuery, we can call Ajax request using plain javascript code.
  • Ajax is also known as XMLHttpRequest (All browser) and ActiveX (Older IE) object
  • JQuery is using XMLHttpRequest object of JavaScript (Browser object model – i mean inbuilt object) to perform ajax request.

If you are searching for AJAX , you will find many AJAX library as well as Javascript Library for AJAX Requests.

Here am going to tell about the AJAX Process using jquery – Javascript library

Include the latest jquery library fileĀ  in the head section (Download it first)

You can perform AJAX operation either using GET/POST method

You can Send/Receive Data From/to Server in the form of simple Text , XML and JSON format.

AJAX Operation Using GET Method

<script type="text/javascript">

$.get('ajaxRequestPage.php' , {variableName1:"Value1",Variable2:"Value2"},function(responseFromServer){

alert(responseFromServer);

});

</script>

 

AJAX Operation Using POST Method

<script type=”text/javascript”>

$.POST(‘ajaxRequestPage.php’ , {variableName1:”Value1″,Variable2:”Value2″},function(responseFromServer){

alert(responseFromServer);

});

</script>

 

Error Handling of AJAX using Jquery

<script type=”text/javascript”>

$.POST(‘ajaxRequestPage.php’ , {variableName1:”Value1″,Variable2:”Value2″},function(responseFromServer){

alert(responseFromServer);

})
.success(function() { alert(“Successfully Request send to Server”); })
.error(function() { alert(“Error to Request to Server,may be Server is down or no net conn”); })
.complete(function() { alert(“Request called and response received”); });
</script>

 

Apart from GET/POST method, you have other methods like PUT and DELETE method.