jQuery - SPLessons
boy2 Chapter 12

jQuery Ajax

jQuery - SPLessons

jQuery Ajax

shape Description

jQuery Method strongly provides methods or functions for Ajax Development. The term AJAX is Asynchronous Javascript And XML.From server, jQuery Ajax will fetch the content in the background and updates the parts of web page without reloading the whole page.

jQuery with Ajax fetches data using GET or POST method by including TXT, HTML, XML.

jQuery load() Method

shape Description

jQuery Ajax has a powerful function called load() which is used to load the static or dynamic data from server and returned into the selected elements of HTML document.

shape Description

Here syntax of load() method

$(selector).load(url,data,[callback]);

where

shape Example


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("demo_test.txt");
    });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

Output:

jQuery Ajax Methods

shape Table

JQuery provides a rich set of Ajax methods to develop the web application.

Method Description
$.ajax(options) With the help of HTTP request, a remote page is loaded using this method.
$.ajaxSetup(options) This method will setup settings globally for AJAX requests.
$.get(url,[data],[callback],[type] ) This method loads URL for the document requested to open using GET.
$.getJSON(url,[data],[callback]) The method loads JSON data with the help of HTTP GET request.
$.getScript(url,callback) The method loads and executes a JavaScript file utilizing HTTP GET request.
$.getJSON(url,[data],[callback]) The method loads JSON data utilizing HTTP GET request.
$.post(url,data,callback,type) The method loads URL for the document requested to open utilizing POST.
load(url,[data],[callback]) The method loads HTML from a remote file and inject it into the DOM.
serialize() The method serializes a group of form input elements into a data string.
serializeArray() Like the .serialize() method, this method also serializes all forms and form input elements but it returns a JSON data.

jQuery Ajax Events

shape Table

AJAX events are listened by a group of AJAX function which are declared globally across all AJAX requests sent via jQuery. The following are global AJAX functions.

Method Description
ajaxComplete( callback ) ajaxComplete method add to the function, when AJAX request completes than execute.
ajaxStart(callback) ajaxStart method add to the function, when AJAX request begin than execute.
ajaxError(callback) ajaxError method add to the function, when AJAX request fails than execute.
ajaxSend(callback) Add a function that has to be executed before an AJAX request is sent.
ajaxStop(callback) ajaxStop method add to the function, when AJAX request stop than execute.
ajaxSuccess( callback ) ajaxSuccess method add to the function, when AJAX request successfully completed than execute.

Summary

shape Key Points

  • Ajax will fetch the content in the background and updates the parts of web page without reloading the whole page.
  • load() function loads the static or dynamic data from server and returned into the selected elements of HTML document.