How to send AJAX request using JQuery

Ajax request is the combination of asynchronous JavaScript and XML. It is not a programming language. Ajax is client side script that used to communicate with the server while sitting on the same page or refreshing the page. The definition of Ajax I have read is “AJAX is the art of exchanging data with a server, and updating parts of a web page – without reloading the whole page”.

In short; AJAX is about loading data in the background and display it on the web page, without reloading the whole page.

Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.

Using JQuery ajax becomes a part of it. We can just use a simple block of code and in a script tag and its ready to send ajax requests to any server side page. In this example, let’s suppose we are using PHP as server side programming language. All we need to do is to send a request to that PHP page and waits for its response. When the response comes we can handle that response according to our requirement and the amazing thing is. This all will happen without refreshing the web page or going to some other page. This all will happen while sitting on the same page.

Also, see How to make pagination using PHP and Jquery with AJAX

 

JQuery get() method :

The $.get() method requests data from the server with an HTTP GET request.

Example code

$("button").click(function(){
    $.get("phpfile.php?variable1=a&variable2=b", function(response){
        alert(response);
    });
});

The first parameter of $.get() is the URL we wish to send request to and that is phpfile.php

The second parameter is a callback function. Inside that, the response variables carry the response coming from the phpfile.php file as echo command. Which means whatever is echoing out or printing out from the PHP page will be placed inside that response variable. And that response variable can be used anywhere for a purpose.

 

JQuery post() method :

Exactly like get() method. The $.post() method requests data from the server using an HTTP POST request.

Example code

$("button").click(function(){
    $.post("phpfile.php",
    {
        name: "Faisal Imtiaz",
        country: "Pakistan"
    },
    function(response){
        alert(response);
    });
});

JQuery Ajax request method:

The ajax() method is used to perform an AJAX (asynchronous HTTP) request.

All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.


Example code

$("button").click(function(){    
     $.ajax({ 
          url: "phpfile.php", 
          error: function(e){ 
                //when an error occurs at server side response 
          }, 
          complete: function(c){ 
                //when request completed. does not matter if its an error or success in response 
          }, 
          success: function(response){ 
                //when response is a success with status 200.        
                alert(response);   
          } 
     });
});

url variable carry the page address where it sends the request. That page is a PHP file. 
error function will carry the response only when any error occurs in that php file. Forexample if an error of 500 happens then the response will be placed inside error function in the variable e.
complete function carry the reponse whenever PHP file echo anything or even there is an error i response. Complete function will even have 500 300 or any other error. This is very good for testing the response and finding ut the bug in your code.
success function carry the 200 status response. When the request completes successfully and in return PHP sends the response of 200 and whatever is echo out from PHP file.

GOOD LUCK

Leave a Comment