Load page contents without refreshing/

Question

Possible Duplicate:
How to start learning Ajax?

Is there a way to reload the page without refreshing the whole page? Like the example in the GRAPH API Explorer

https://developers.facebook.com/tools/explorer when ever you change the input and submit the data the it only refresh a only a part of the page, any idea on how to do something similar? Thanks

@clentfort any example or tutorial on how to do that? – rksh Sep 26 '12 at 15:03 — rksh, Sep 26 '12 at 15:03
http://api.jquery.com/category/ajax/ check this for AJAX – Chandra Sekhar Walajapet Sep 26 '12 at 15:04 — Chandra Sekhar Walajapet, Sep 26 '12 at 15:04

score 3 · Accepted Answer · answered Sep 26 '12 at 15:05

3

Use AJAX. It can be synchronious or asynchronious.

For more information, check XMLHttpRequest object in javascript.

answered Sep 26 '12 at 15:05

Zaffy

16,801
8
50
77

Please don't recommend W3Schools. It is usually out of date, often wrong, and manages to put security holes in just about every bit of example code that could have a security hole in it. – Quentin Sep 26 '12 at 15:07
@Quentin No problem. But this one is a good demo. – Zaffy Sep 26 '12 at 15:08
and idea how can I apply this to a div element? – rksh Sep 26 '12 at 15:10
@Rukshan — Umm. You want to know how to apply the example *which uses a div element* to a div element? – Quentin Sep 26 '12 at 15:11
@Rukshan did you look at xmlhttprequest ? Just change content of a div (div.innerHTML = content) in callback function `onreadystatechange`. But be sure to have readyState == 4 and status == 2xx – Zaffy Sep 26 '12 at 15:12
@quarry yes it works now :) is there a way to show a loading or message until it loads? it takes some times to load i mean like 2 3 seconds – rksh Sep 26 '12 at 15:59
@Rukshan just before you send the request, display some message and then call from onreadystatechange will overwrite it. – Zaffy Sep 26 '12 at 16:01
@quarry I used this to display a loading image like on FB 'document.getElementsByID('img').src="https://m-static.ak.fbcdn.net/rsrc.php/v2/y9/r/jKEcVPZFk-2.gif";' but then the ajax request fails and the loading image is not displaying, any idea why? – rksh Sep 26 '12 at 16:19
@Rukshan because there is an error. Its not getElement`s`ByID but getElementByID. Use error console for debugging. – Zaffy Sep 26 '12 at 16:22

score 0 · Answer 2 · answered Sep 26 '12 at 15:03

The technique is called Ajax.

It is usually achieved by using the XMLHttpRequest object to make a request to a URL designed to act as a web service end point instead of serving up a full document.

For convenience people often use a library that wraps XHR with a friendlier interface. Options include YUI IO, jQuery Ajax and many others

The web service end point often presents the data using the JSON format.

Load page contents without refreshing/

2 Answers2