Nov 212012
 
Share...Tweet about this on TwitterShare on FacebookShare on Google+Share on StumbleUponShare on LinkedInPin on PinterestShare on TumblrShare on RedditDigg this

This is the first post of the series about how to load dynamically external content to a html page by using jQuery AJAX capabilities.

If you are new to AJAX, please check this short introduction

Ajax (an acronym for Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page.
— Source: Wikipedia

on the other side

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML.
— Source: Wikipedia

jQuery supports JSON, XML, HTML data formats, and supports both GET and POST methods, has an excellent cross browser support and all this is done by using a fairly simply API. All this makes jQuery a very powerful tool for a client side web developer.
As I won’t explain the basics of jQuery, in order to understand it better, please visit the jquery.com web site.

4 ways of performing AJAX calls

There are mainly 4 ways of how jQuery library enables the AJAX requests, and this covers only the first one.

  1. using the load() function
  2. using the get() function
  3. using the post() function
  4. using the ajax() function
We have to keep in mind that due to browser security restrictions, most “Ajax” requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

Using the load() function

As stated on the jQuery web site, this method is the simplest way to fetch data from the server.

load() method signature is as follows:

$(selector).load(url, [data], [callback]);

where only the url parameter is the mandatory one, while the data and callback are optional. If the callback is specified, then this function will be executed after the call is completed, so there is a possibility to perform additional, post loading code.

In order to demonstrate how this works, below is provided an example, a static html page, that would load dynamically the content from another page into a div.

In the below example please note the following:

  1. jquery script library is automatically downloaded from the jquery.com web site. This is a handy way of not hosting the library directly on your site as the jquery.com is highly optimized and the content download is really fast. you may opt for other sites offering the same functionality.
  2. When the “loadContent” button is clicked, a function is attached to the event, and the load() function will be called.
  3. The content of the external “Content.html” file will be loaded, if available, inside the div id="success"
  4. In case of an error, the callback function will make sure that the content of the div id="error" will contain the error message

Content of the Index.html page:
[html]




Error response:




[/html]

content of the “Content.html” page

[html]

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent tristique mi in nulla lacinia imperdiet.
Nulla at tellus leo, porta viverra lectus. Mauris ac
purus vehicula lorem bibendum sodales id sodales
lorem. Donec tincidunt felis ac purus facilisis vulputate.
Proin convallis interdum leo a ultrices. Cras neque ligula,
vestibulum nec venenatis vel, molestie non tortor. Ut tempor
risus ut diam dignissim nec adipiscing erat suscipit.



[/html]

the result, after pressing the load button will be:

Conclusion

In the next post I will describe the get() method, and provide a concrete example of usage.

    Share...Tweet about this on TwitterShare on FacebookShare on Google+Share on StumbleUponShare on LinkedInPin on PinterestShare on TumblrShare on RedditDigg this

    I'm a Software Developer and Solution Architect interested in Software Development, Object-Oriented Design and Software Architecture all this especially bound to the Microsoft.NET platform.Feel free to contact me or know more in the about section

      4 Responses to “AJAX with jQuery – using the load() method”

    1. You can actually work around the limitation that doesn’t let you use load() with content from another domain:
      1. you need a pure server side script that fetch the remote content that you want to load (e.g. with curl if you’re using PHP, see some examples here: http://davidwalsh.name/curl-download), say load_content.php
      2. use the load() method tho load your server side script

      • Hi Elia,
        Thank you for pointing this out.
        In one of the next post I will try to describe how to load some dynamic content from a Web Service (i.e: REST), and it is exactly where it becomes really interesting.
        Cheers:)

    Leave a Reply

    stafford@mailxu.com darroch_yolando@mailxu.com