jQuery AJAX Shorthand Methods

In this article, we will cover the most basic methods used in jQuery when dealing with Ajax related methods.

Ajax Methods

The methods listed in the following table are common jQuery Ajax methods that require much less code than standard Ajax.

Method	Description
`$.get()`	Loads data using an Ajax HTTP GET request
`$.getScript()`	Executes JavaScript using an Ajax HTTP GET request
`load()`	Loads and puts the returned HTML into the selected element
`$.post()`	Loads data using an Ajax HTTP POST request

HTML Example

We will use the following HTML for the examples listed below.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // ... jQuery Code ...
        });
    </script>
</head>
<body>
    <img id="img1" src="go.png" /> ; 
    <div id="div1"> <!-- Some Content --> </div>
</body>
</html>

load() Method

The load() method loads data from the server and places the returned HTML into the matched element. This is one of the most common methods used. The load() method also allows you to retrieve a portion of the content from the target URL.

For example, when this statement, $('#result').load('ajax/test.html #container'); is executed, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container.

This element, with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

Syntax

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

Parameter	Description
`url`	Required URL to send the request to
`data`	Optional data to send to the server along with the request
`callback`	Optional function to run after the method is completed

$("#go").click(function () {
    $("#div1").load('demo_jquery_ajax_load.txt');
});

get() Method

The get() method is used to perform an AJAX HTTP GET request.

Syntax

$(selector).get(url,data,success(data,textStatus,jqXHR),dataType);

Parameter	Description
`url`	Required URL to send the request to
`data`	Optional data to send to the server along with the request
`success`	Optional function to run if the request succeeds (`data`, `textStatus`, `jqXHR`)
`dataType`	Optional, specifies the data type expected of the server response (“xml”, “html”, “text”, “script”, “json”, “jsonp”)

$("#go").click(function () {
    $.get("demo_jquery_ajax_load.txt", function (result) {
        $("#div1").html(result);
    });
});

getScript() Method

The getScript() method is used to get and execute a JavaScript using an AJAX HTTP GET request.

Syntax

$(selector).getScript(url,success(script, textStatus, jqXHR));

Parameter	Description
`url`	Required URL to send the request to
`success`	Optional function to run if the request succeeds (`script`, `textStatus`, `jqXHR`)

$("#go").click(function () {
    $.getScript("demo_jquery_ajax_getScript.js");
});

post() Method

The post() method is used to perform an AJAX HTTP POST request.

Syntax

$(selector).post(url,data,success(data,textStatus,jqXHR),dataType);

Parameter	Description
`url`	Required URL to send the request to
`data`	Optional data to send to the server along with the request
`success`	Optional function to run if the request succeeds (`data`, `textStatus`, `jqXHR`)
`dataType`	Optional, specifies the data type expected of the server response (“xml”, “html”, “text”, “script”, “json”)

$("input").keyup(function () {
    var txt = $("input").val();
    $.post("jquery_ajax_gethint.aspx", { strinput: txt }, function (data) {
        $("span").html(data);
    });
});