Did you find this useful?
Socialize it today.


jQuery Ajax Shorthand Methods

Tuesday, July 17, 2012

In the previous article, we learned about Ajax and how jQuery can be used to implement Ajax in a simple, more powerful manner. 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. Click the image button to load remote data into the div element using the jQuery Ajax load() method.


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');
    });


click here
Click on the icon to execute the jQuery Ajax load() method!


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);
          });
 });


click here
Click on the icon to execute the jQuery Ajax get() method!


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");
          });


click here
Click on the icon to execute the jQuery Ajax getScript() method!


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);
    });
});


Search for US States using the input textbox.


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Pro jQuery JavaScript and jQuery: The Missing Manual HTML CSS and JavaScript Editor