Search within TutorialsPark

Jquery Ajax: Introduction


Learn to use jQuery Ajax to allow you to make asynchronous server requests.


jQuery Ajax : Introduction

Ajax stands for Asynchronous JavaScript and XML , it enables you to make requests to the server asynchronously, i.e to make requests in the background without preventing the user from interacting with the content.

The most common realworld usage of Ajax is to submit data from a form Element, the advantage of using Ajax is that you need not load a new document to display the newly fetched data. The page is updated without reloading.

JavaScript is essential to use Ajax, because most of code is executed within the browser in the background, the scripts are used to read and send data to and from the server.

With Ajax you instruct the browser to communicate with the server and then return a result when the operation is completed. These communications are handled through callback function.

The asynchronous nature of request enables you to create a rich HTML document that can be updated seamlessly using responses from the Server.


jQuery Ajax: jQuery Method load()

The jQuery load() function is used to display downloaded data in a wrapped set of element.

The load() function has at the most three parameters URL , data and Callback. The demo below uses the function load() to download the file demoMsg.txt and display the content of the file.

Example: jQuery load() Method demoMsg.txt File

Example: jQuery Method load() Effect

Give it a TRY! » Note: The text document is downloaded using Ajax load method, click the button execute script.


jQuery Ajax: jQuery Callback using load() function

The jQuery method load(url, data, callback) can be used to callback function that jQuery will call when the Ajax Operation is complete.

Example: jQuery Callback using load() function

Give it a TRY! » Note: The callback function is called when the load operation is complete.


jQuery Ajax : Passing Data to the Server using load() Method

The jQuery load() function can also be used to pass data to server, the data is used using the POST method and if no parameter object is specified , load() uses GET as the default.

Example: Passing Data to the Server using load() Method

Give it a TRY! » Note:Values are loaded after providing an option as a value.