jQuery load

What jQuery-AJAX load() Method?

The jQuery load() method can be termed as simple but it is very powerful AJAX method.

The load() method is used for loading data from a server and it also puts the data which is returned onto the selected element.  

Syntax:

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

The URL which is needed to be loaded is specified by the required URL parameter.

A set of querystring key or the value pairs which is needed to be sent along with the required is specified by the optional data parameter.

The optional callback parameter is termed as the name of a function which is needed to be executed after the load() method is completed. 

It is possible for adding a jQuery selector to the URL parameter.

The optional callback parameter is used for specifying a callback function to run when the load() method is completed. The callback function parameters are provided below:

  1. responseTxt – It has the resulting content when the call succeeds.
  2. statusTxt – It has the status of the call.
  3. xhr – It has the XMLHttpRequest object.
Example:
Text File (demo.txt)
This is Sample Text.

HTML Document (load.html)
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>CP Tutorials</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").load("demo.txt");
            });
        });
    </script>
</head>
<body>
<h2>Example of Load()</h2>
<div id="div1"></div>
<button type="button">Get Data</button>
</body>
</html>