It appeared that Gmail has changed how you view the web. Today we know we can make an entire site without having to reload the page and only loading the parts we need.
The technology used is the XMLHttpRequest, recently christened with the name of AJAX.
As an exercise we will see first how to load content after interacting with php and send small pieces of information and finally how to send information larger.

Creating the XMLHTTPRequest object
Make a generic function is the best idea for this model. To try and catch base can make a cross-browser function:

nuevoAjax function () (
var xmlhttp = false;
try (
xmlhttp = new ActiveXObject ( “Msxml2.XMLHTTP”);
) Catch (e) (
try (
xmlhttp = new ActiveXObject ( “Microsoft.XMLHTTP”);
) Catch (e) (
xmlhttp = false;
)
)

if (xmlhttp & & typeof XMLHttpRequest! = ‘undefined’) (
xmlhttp = new XMLHttpRequest ();
)
return xmlhttp;
)

Prime example: Load external data.
The function of uploading content will be defined as follows:

cargarContenido function () (
var container;
container = document.getElementById ( ‘container’);
nuevoAjax ajax = ();
ajax.open ( “GET”, “ejemploajax1.html”, true);
ajax.onreadystatechange = function () (
if (ajax.readyState == 4) (
contenedor.innerHTML = ajax.responseText
)
)
ajaxRequest.send (null)
)
window.onload = function () (cargarContenido ())

There are several things to check here, first get the element that has the id ‘container’, then create a new ajax object then is to load the html file for the GET method and the important thing here is what to do when loaded, this is onreadystatechange .
ReadyState 4 means that it finishes loading, 1, 2 and 3 is progress and I really do not care.
Finalente the send method is to perform the action and call on the window.onload function.
Consider the example.
Easy, no?

Second example: Sending data to the GET method
The following are sending small amounts of data, eg a text input with limit to 255 characters, this will do for the GET method. We also use and modify function crearAjax some cargarContenido.
The idea is to get a form, namely the values of the input that includes the form and send it to php. CargarContenido The amended code would be:

cargarContenido function () (
var t1, t2, container;
container = document.getElementById ( ‘container’);
t1 = document.getElementById ( ‘text1′). value;
t2 = document.getElementById ( ‘text2′). value;
nuevoAjax ajax = ();
ajax.open ( ‘GET’, ‘ejemploajax2.php? t1 = “+ t1 +” & t2 = “+ t2, true);
ajax.onreadystatechange = function () (
if (ajax.readyState == 4) (
contenedor.innerHTML = ajax.responseText
)
)
ajaxRequest.send (null)
)

Php file only contains this code

<?
echo “Data in GET: <pre>”;
print_r ($ _GET);
echo “</ pre>”;

echo “POST Data: <pre>”;
print_r ($ _POST);
echo “</ pre>”;
?>

Now yes, see the example.

Third example: Sending POST data by the method
Finally, finally, send data by post method. We will have to change some things in cargarContenido function:
We must add an additional line setRequestHeader specifies what kind of data will arrive to the server.
Also specify the method in the open method and now I use parameters to send.
The role would be as follows

cargarContenido function () (
var t1, t2, container;
container = document.getElementById ( ‘container’);
t1 = document.getElementById ( ‘text1′). value;
t2 = document.getElementById ( ‘text2′). value;
nuevoAjax ajax = ();
ajax.open ( “POST”, “ejemploajax2.php”, true);
ajax.onreadystatechange = function () (
if (ajax.readyState == 4) (
contenedor.innerHTML = ajax.responseText
)
)
ajax.setRequestHeader ( “Content-Type”, “application / x-www-form-urlencoded”);
ajaxRequest.send ( “t1 =” + t1 + “& t2 =” + t2)
)

We use the same php, consider the example function

Additional notes

* For some strange reason, the object that is used once and can not be used again. So in cargarContenido function always calls the function to create a new ajax object. If you do not understand what I mean, they believe the object outside the function and see how it works only once
* Send and receive data with accents / symbols strangers is a headache. Basically, in php is to use utf8_decode when received and when sent utf8_encode.