Loading Pages Asynchronously

In this lesson we are going to talk about jQuery get method for load pages and by default jQuery refers this procedure to $.ajax method.

Shorthand Methods

These methods perform the more common types of AJAX request in less code.
$.get()

Load data from the server using a HTTP get request.

$.getJSON()

Load JSON encoded data from the server using a get HTTP request.

$.getScript()

Load a java script file from the server using a HTTP get request, than execute it.

.load()

Load data from the server and place the returned HTML into the matched element.

$.post()

Load data from the server using a HTTP post request.

Note : Use Mozilla Firefox Browser for check or display these code if other browser's shows this error - XMLHttpRequest cannot load : Cross origin requests are only supported for protocol schemes.

Behind the scene these all above methods call to jQuery Ajax Method, and simply passing into another parameters.

Note : If you call jSON it call to jQuery get method and than jQuery get method call jQuery ajax method. Actually jQuery Ajax handles the all procedure own way) For Understand this let see an example:

Suppose on index page we have a link for go on about page and we want to access this about page on index page without going on it so how can we use this let see a code for doing this dynamically without touch on link or using the link.

$('body').load ('about.html');

By using this method it load about page on index page without open the about page and without use the link. But what ca we do when we want to go there with link but don't want to open about page but want to load about page on index page by just click on the link so let see the code with using preventDefault method.

Example 1

Example 2

Here we can increase performance of our code. In the above code we set var href for when we click on any link on index page it returns a attribute href, by doing this we don't have to need set that what page we want click. In next line code it finds the code with container div and automatically open that page where we click, i mean we don't need to tell in jQuery again and again that what page we want to display. let see the code.

Let complete our code and watch benifits of this lesson-

Example 3

View Demo

So in the last example we create a new div wrap on index page for display about and contact page inside it. In script tag first we create a var wrap for set div.wrap for saving interacting with Dom. After than we write our code for display about and contact page on index page without open it and we just describe this functionality to you above very well. So this concept is very easy enjoy this lesson.