www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons Ajax using jQuery load() Method Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
In the previous lesson we learned about the AJAX and its pros and cons. In this lesson we will learn to load part of a webpage using jQuery load() method.

Using load() method to load data asynchronously is one of the simplest, yet powerful methods. We use it by selecting an element, usually a <div>, where we need the content to load and then we call the load() method on it. The load() method takes a URL, as a parameter, that is required to be loaded.

For the example that follows we need an external file that we can use with our load() method. Save the following HTML in an HTML file as "example.htm":

<h1>Loaded through jQuery load() Method </h1>
<div id="content">
<b>This content will be loaded using load() method</b>
</div>

Save the above in the same directory where your HTML page containing jQuery code resides. The following code will load the above HTML file using jQuery load() method:

<div id = "ajaxExample" ></div>
<script type = "text/javascript" >
$ ( function ()
{
        $ ( "#ajaxExample" ). load ( "example.html" );
});
</script>

That's all it takes to load an external file using jQuery AJAX.

If the file you are loading resides in a different directory, you will have to pass its relative or absolute path to the load() method.

We can also pass a selector along with the URL to the load() method to only load a part of the external file.

Here is an example:

<div id = "ajaxExample" ></div>
<script type = "text/javascript" >
$ ( function ()
{
        $ ( "#ajaxExample" ). load ( "example.html #content" );
});
</script>

We simple append a standard jQuery selector to the URL to get the desired result. Do not forget to insert a blank space between the URL and the selector. We can use any jQuery selector type to make this work.

In addition to the URL plus selector, the load method can take two more parameters i.e. a set of querystring key/value pairs, and a callback function that is executed when the load() method finishes, no matter it succeeds or fails.

Here is an example:

<div id = "ajaxExample" ></div>
<script type = "text/javascript" >
$ ( function ()
{
$ ( "#ajaxExample" ). load ( "example2.html" , function ( response , status , xhr )
{
if ( status == "success" )
      alert ( "Ajax call was successful " );
if ( status == "error" )
      alert ( "Error!" + xhr . status + " - " + xhreq . statusText );
});
});
</script>

In the above example we try to load the file "example2.html", which does not exit, as the name of our external file is "example.html". When the load() method does not find the file it generates an error and our callback function alerts the user about the result. Our callback function in the above example takes 3 parameters, which jQuery fills in for us. The first parameter contains the resulting content in case the call is successful. The second parameter specifies the status of the call, e.g. "success" or "error". We can use it to see if the call was successful or not. The third parameter is the XMLHttpRequest object that is actually used by the jQuery to perform the AJAX calls. It contains several useful properties related to Ajax which we can use to determine the status of the Ajax call etc.
Next >>> Lesson No. 27: jQuery Ajax: get() and post()





Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.