What Is Ajax Used For

jQuery - Ajax

AJAX is an acronym standing for Asynchronous JavaScript and XML and this engineering helps u.s. to load data from the server without a browser page refresh.

If yous are new with AJAX, I would recommend yous go through our Ajax Tutorial earlier proceeding further.

JQuery is a slap-up tool which provides a rich set of AJAX methods to develop adjacent generation web awarding.

Loading Unproblematic Data

This is very piece of cake to load any static or dynamic data using JQuery AJAX. JQuery provides load() method to do the job −

Syntax

Here is the elementary syntax for load() method −

          [selector].load( URL, [data], [callback] );

Here is the clarification of all the parameters −

URL − The URL of the server-side resources to which the asking is sent. It could exist a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a database.
data − This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the Mail method. If omitted, the GET method is used.
callback − A callback function invoked later on the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text received from the server and second parameter is the status code.

Example

Consider the post-obit HTML file with a small JQuery coding −

<html>    <head>       <championship>The jQuery Example</title>       <script type = "text/javascript"           src = "https://ajax.googleapis.com/ajax/libs/jquery/ii.1.3/jquery.min.js">       </script> 		       <script type = "text/javascript" language = "javascript">          $(document).set(function() {             $("#commuter").click(function(upshot){                $('#stage').load('/jquery/result.html');             });          });       </script>    </head> 	    <body>       <p>Click on the button to load /jquery/result.html file −</p> 		       <div id = "phase" style = "background-color:cc0;">          Phase       </div> 		       <input type = "button" id = "driver" value = "Load Information" />    </body> </html>

Hither load() initiates an Ajax request to the specified URL /jquery/consequence.html file. After loading this file, all the content would be populated within <div> tagged with ID phase. Assuming, our /jquery/outcome.html file has just one HTML line −

<h1>THIS IS RESULT...</h1>

When you click the given button, then result.html file gets loaded.

Getting JSON Data

There would be a situation when server would return JSON string confronting your request. JQuery utility function getJSON() parses the returned JSON cord and makes the resulting cord available to the callback office every bit start parameter to take further action.

Syntax

Here is the simple syntax for getJSON() method −

          [selector].getJSON( URL, [data], [callback] );

Hither is the clarification of all the parameters −

URL − The URL of the server-side resource contacted via the GET method.
information − An object whose backdrop serve as the proper name/value pairs used to construct a query cord to exist appended to the URL, or a preformatted and encoded query string.
callback − A function invoked when the asking completes. The data value resulting from digesting the response body equally a JSON string is passed every bit the commencement parameter to this callback, and the condition every bit the second.

Example

Consider the post-obit HTML file with a small JQuery coding −

<html>    <head>       <championship>The jQuery Example</title>       <script type = "text/javascript"           src = "https://ajax.googleapis.com/ajax/libs/jquery/ii.1.3/jquery.min.js">       </script> 		       <script type = "text/javascript" language = "javascript">          $(document).prepare(function() {             $("#driver").click(office(event){ 				                $.getJSON('/jquery/result.json', office(jd) {                   $('#stage').html('<p> Name: ' + jd.proper name + '</p>');                   $('#phase').append('<p>Age : ' + jd.age+ '</p>');                   $('#stage').append('<p> Sexual activity: ' + jd.sex+ '</p>');                }); 					             });          });       </script>    </head> 	    <trunk>       <p>Click on the button to load event.json file −</p> 		       <div id = "stage" way = "background-color:#eee;">          STAGE       </div> 		       <input type = "button" id = "driver" value = "Load Data" />    </body> </html>

Here JQuery utility method getJSON() initiates an Ajax request to the specified URL result.json file. After loading this file, all the content would exist passed to the callback role which finally would exist populated inside <div> tagged with ID stage. Assuming, our result.json file has following json formatted content −

{    "name": "Zara Ali",    "age" : "67",    "sex activity": "female" }

When you click the given button, then issue.json file gets loaded.

Passing Data to the Server

Many times y'all collect input from the user and you laissez passer that input to the server for further processing. JQuery AJAX made it piece of cake enough to pass collected data to the server using data parameter of whatsoever available Ajax method.

Case

This case demonstrate how can pass user input to a web server script which would send the aforementioned consequence back and we would print information technology −

<html>    <head>       <title>The jQuery Example</title>       <script type = "text/javascript"           src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">       </script> 		       <script type = "text/javascript" language = "javascript">          $(document).gear up(function() {             $("#commuter").click(part(upshot){                var name = $("#name").val();                $("#stage").load('/jquery/consequence.php', {"proper noun":proper name} );             });          });       </script>    </caput> 	    <torso>       <p>Enter your name and click on the button:</p>       <input type = "input" id = "name" size = "xl" /><br /> 		       <div id = "stage" style = "groundwork-color:cc0;">          Stage       </div> 		       <input type = "button" id = "driver" value = "Show Issue" />    </body> </html>

Hither is the code written in upshot.php script −

<?php    if( $_REQUEST["proper noun"] ){       $proper name = $_REQUEST['name'];       echo "Welcome ". $name;    } ?>

Now you tin can enter whatsoever text in the given input box and then click "Evidence Consequence" button to run into what you have entered in the input box.

JQuery AJAX Methods

You lot have seen basic concept of AJAX using JQuery. Post-obit table lists down all of import JQuery AJAX methods which yous tin utilize based your programming need −

Sr.No.	Methods & Description
one	jQuery.ajax( options ) Load a remote page using an HTTP request.
2	jQuery.ajaxSetup( options ) Setup global settings for AJAX requests.
3	jQuery.go( url, [information], [callback], [type] ) Load a remote page using an HTTP Become asking.
iv	jQuery.getJSON( url, [data], [callback] ) Load JSON data using an HTTP GET asking.
5	jQuery.getScript( url, [callback] ) Loads and executes a JavaScript file using an HTTP Go asking.
6	jQuery.post( url, [data], [callback], [blazon] ) Load a remote folio using an HTTP POST request.
7	load( url, [data], [callback] ) Load HTML from a remote file and inject it into the DOM.
8	serialize( ) Serializes a ready of input elements into a string of data.
9	serializeArray( ) Serializes all forms and form elements like the .serialize() method merely returns a JSON data construction for you to work with.

JQuery AJAX Events

You can call various JQuery methods during the life bicycle of AJAX call progress. Based on different events/stages post-obit methods are bachelor −

You can go through all the AJAX Events.

Sr.No.	Methods & Description
1	ajaxComplete( callback ) Attach a function to exist executed whenever an AJAX request completes.
2	ajaxStart( callback ) Adhere a function to be executed whenever an AJAX asking begins and there is none already active.
iii	ajaxError( callback ) Attach a function to be executed whenever an AJAX request fails.
4	ajaxSend( callback ) Attach a part to be executed before an AJAX asking is sent.
5	ajaxStop( callback ) Adhere a function to exist executed whenever all AJAX requests have ended.
6	ajaxSuccess( callback ) Attach a function to be executed whenever an AJAX request completes successfully.