html - Creating a page that updates without reloading

Question

I am debating on what to I should learn to accomplish this. Mainly If I take a bunch of info from a database to load on a page what is the best way to manipulate the page and not have to reload. Is the best thing to use something like XML or is there something else I should use. I know a lot of this uses HTML Dom and XML Dom, but I dont want to start learning one yet that I dont need.

Answer 1

The name of the technique you are looking for is AJAX, which stands for Asynchronous Javascript and XML (although most AJAX these days uses JSON [JavaScript Object Notation] instead of XML).

AJAX requires working knowledge of JS and the DOM. Look at jQuery as a library that makes AJAX and DOM manipulation easy.

How it fits together:

Javascript makes asynchronous requests to your server (without refreshing the page) that return the required data. When the request completes, the JS then inserts that data into the DOM

Using jQuery simplifies this process:

$('#data-container-id').load("my-data.html",{get:"data"})

will fetch "my-data.html?get=data" and put the returned html into a div with the id "data-container-id"