Using AJAX in jQuery

Asynchronous JavaScript and XML (AJAX) was the base building block of Single Page Applications (SPAs). This method is used to update the content of a web page without reloading the whole page. This method helps save precious resources and decreases the time taken for loading a page considerably, since only parts of the page are reloaded and not the entire page.

More than often, you have visited the Google search page for searching answers to your questions. Have you noticed how the page displays results as you type into the search box and provides useful suggestions of related searches? Or the product filters on Amazon and Ebay websites. These effects are achieved with AJAX.

The jQuery Ajax load

The load() method loads data from a server and puts the returned data into the selected element.

Its syntax is as follows:

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

Parameters

The load() method take the URL, data, and callback as parameters.

The callback parameter can have the following parameters:

  • responseTxt: This parameter contains the resulting content when successful
  • statusTxt: This parameter contains the status of the request, that is, success, notmodified, error, timeout, parsererror
  • xhr: This parameter contains the XMLHttpRequest object

Returns

The data from the URL is placed in the selected element.

Description

The load() method loads data from a server and puts the returned data into the selected element. The following example loads the Sample.txt file into the specified <div> tag:

$("#div1").load("Sample.txt" , function(responseTxt, statusTxt, xhr);

jQuery Ajax Get

The Get request gets the data from the server with an HTTP GET request:

  • GET: This requests data from a specified resource

Its syntax is as follows:

$.get(URL,callback);

Parameters

This takes the URL and callback as parameters. Here the callback parameter is optional.

Returns

The Get request returns the data fetched from the URL.

Description

The Get request gets the data from the server with an HTTP GET request:

$.get("Sample.html", myfunction(data)

The required HTML file is as follows:

<p> This is the data from the Sample.html file</p>

The preceding code will fetch the data from the html file and the line This is the data from the Sample.html will be displayed in an alert box on triggering.

jQuery Ajax Post

The Post request gets data from the server with an HTTP POST request:

  • POST: This requests data from a specified resource

Its syntax is as follows:

$.post(URL, data, callback);

Parameters

This takes URL, data, and callback as parameters. Here, the data and callback parameters are optional.

Returns

This returns the data fetched from the URL.

Description

This gets data from the server with an HTTP POST request:

$.post("Sample.html", myfunction(data)

The required HTML file is as follows:

<p> This is the data from the Sample.html file</p>

The preceding code will fetch the data from the HTML file and This is the data from the Sample.html will be displayed in an alert box when triggered.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.14.131.47