jQuery - AJAX load() Method
The load() function of jQuery is a basic yet effective AJAX technique.
The load() function fetches data from a server and places it in the specified element.
Syntax :-
$(selector).load(URL,data,callback); The URL parameter is required one. The URL you want to load is specified by the parameter.
The data and callback parameters are optional.
The data parameter defines a set of querystring key/value pairs to submit with the request.
The callback parameter specifies the name of a function that will be called when the load() method has finished.
Example:-
Here is the content of our example file: "demo.htm" :
<h2>A html sample page</h2>
<p>Welcome to html demo page.</p> The content of the file "demo.htm" is loaded into a particular div element in the example below :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b1").click(function () {
$("#div1").load("jquery-resources/demo.htm");
});
});
</script>
</head>
<body>
<div id="div1">Let jQuery AJAX Change This Text</div>
<br />
<button id="b1">Load External Content</button>
</body>
</html> Output :-
The load() Method with Callback Function
When the load() procedure is done, the optional call-back parameter defines a callback function to run. The callback function may contain several parameters :
- responseTxt - includes the results if the call successfully completes.
- statusTxt - Includes the call status.
- xhr - XMLHttpRequest object is stored here.
After the load() function completes, the following example shows an alert box. It shows "External material loaded successfully!" if the load() function succeeds, and an error message if it fails :
Example:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b3").click(function () {
$("#div3").load("jquery-resources/demo.htm", function (responseTxt, statusTxt, xhr) {
if (statusTxt == "success")
alert("External content loaded successfully!");
if (statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div3">Let jQuery AJAX Change This Text</div>
<br />
<button id="b3">Get External Content</button>
</body>
</html> Output :-