Introduction

JQuery AJAX methods allow developers to load data from external sources and place it into the html of a web page, all without having to reload the page. This tutorial will show you the basic JQuery AJAX methods and how to use them in context.

The load() method

The basic syntax of the JQuery load() method:

The URL parameter specifies the URL that your method is loading. The data parameter is optional, and can specify key/value pairs to send with the request. The callback parameter is also optional. This parameter may define the name of the function to execute after the load() method is executed.

The .get() method

The GET method is requests data from a specified resource. GET is used for getting some data from the server. The GET method can return cached data.

In JQuery we use .get() for a GET HTTP request.

The URL parameter specifies the URL that you are requesting. The callback parameter, which is optional, can hold the name of a function that you want to execute if the request succeeds.

In the above example, the .get() method is executed when the button is clicked. The URL we are requesting in this example is “demo_test.asp”. The second parameter is the callback function. In this example, the callback specifies the status of this request.

The .post() method

The POST HTTP request can retrieve data from the server. This request method does not cache data, and usually sends data along with the request.

In JQuery we use .post() for a POST HTTP request.

The URL parameter specifies the URL that your method is loading. The data parameter is optional, and can specify key/value pairs to send with the request. The callback parameter is also optional. This parameter may define the name of the function to execute after the load() method is executed.

In the above example, the .post() method is executed when the button is clicked. The URL in this particular example is “demo_test_post.asp”. We are passing the name and city key/value pairs into the request using the optional data parameter. The first callback parameter in our example holds the content of our page that was requested. The second callback parameter is holding the status value of the request.

These three methods are the most popular JQuery AJAX methods. There are many more methods that JQuery has to offer, to see those, check out the W3C JQuery AJAX Reference.