Computers & ProgrammingFrontend DevelopmentjQuery

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.

MethodDescription
$.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);
ParameterDescription
urlRequired URL to send the request to
dataOptional data to send to the server along with the request
callbackOptional 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);
ParameterDescription
urlRequired URL to send the request to
dataOptional data to send to the server along with the request
successOptional function to run if the request succeeds (data, textStatus, jqXHR)
dataTypeOptional, 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));
ParameterDescription
urlRequired URL to send the request to
successOptional 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);
ParameterDescription
urlRequired URL to send the request to
dataOptional data to send to the server along with the request
successOptional function to run if the request succeeds (data, textStatus, jqXHR)
dataTypeOptional, 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);
    });
});

Leave a Comment

Your email address will not be published.

Scroll to Top