XMLHttpRequest ou AJAX simple

L'objet XMLHttpRequest

AJAX signifie Asynchronous JavaScript And Xml.

Asynchrone signifie que l'on traite des données sans figer le navigateur.

XML signifie que la source de données est traitée par XMLHttpRequest, tout en sachant que cet objet peut aussi traiter les données qui sont du simple texte.

La technologie AJAX permet, grâce à l'objet javascript XMLHttpRequest, d'introduire à la demande dans une page web déjà chargée, des éléments venant d'une requête web.

Exemple

Dans l'exemple ci-dessous, il y aune temporisation de 1 seconde pour avoir le temps de voir ce qui se passe.

Cliquez ici ! (Nombre de clics : 422)

Le fichier ajaxilu.js

function Ajax(url , datas , method , asyn , returnFormat , cookie , f_onComplete , f_onError, f_onLoad){
	var data = null;
	if (typeof datas == 'string') {
		data = datas;
	} else {
		data = datas[0];
		for (var i = 1; i < datas.length; i++) {
			data += "&" + datas[i];  					
		}
	}
	
	
// construit l objet requeteur
	var http = (window.XMLHttpRequest)?new XMLHttpRequest():(window.ActiveXObject)?new ActiveXObject("Microsoft.XMLHTTP"):null;
	if (http == null) f_onError(1 , 'Ajax non supporté');
	
	if (method != "POST") {
		if (data) url += "?" + data;
		data = null;
	}	

 //envoie la requete et appel le callback
	http.open(method,url,asyn);
	if (method == "POST")
		http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	if (asyn){
		http.onreadystatechange = function () {
			if (http.readyState == 4) {
				if (http.status == 200) {
					if (returnFormat != "txt") response = http.responseXML; else response = http.responseText;
					f_onComplete(response);
				} else {
					f_onError(http.status , 'Erreur ' + http.status);
				}		
			} else if (http.readyState == 1) {
				f_onLoad();			
			}
		};
		if (cookie) http.setRequestHeader( 'Set-Cookie' , cookie );
		http.send(data);
	} else {
		if (cookie) http.setRequestHeader( 'Set-Cookie' , cookie );	
		http.send(data);
		if (http.status == "200"){
			if (returnFormat != "txt") response = http.responseXML; else response = http.responseText;
			f_onComplete(response);
		} else {
			f_onError(http.status , 'Erreur ' + http.status);
		}	
	}
}

function RequestContent(url , datas , method , asyn , returnFormat , cookie , div /*, strLoad = 'Chargement ...'*/){
	if (arguments[7]) var strLoad = arguments[7]; else var strLoad = 'Chargement ...';
	function f_onComplete(response) {
		$(div).innerHTML = response;	
	}
	function f_onError(code, message) {
		$(div).innerHTML = message;
	}	
	function f_onLoad() {
		$(div).innerHTML = strLoad;
	}	
	Ajax(url , datas , method , asyn , returnFormat , cookie , f_onComplete , f_onError, f_onLoad);
}

/*
url          : url du fichier php qui va traiter la requête
datas        : string ou tableau des données à envoyer, par exemple ['action=' + action , 'datas=' +  encodeURIComponent(mesdatas)] 
method       : 'GET' ou 'POST'
asyn         : asynchrone, true ou false 
returnformat : 'txt' ou 'xml'
cookie       : string contenant un cookie à transmettre, généralement 'PHPSESSID=' + sid
               sid étant préalablement défini par <script type="text/javascript">var sid = "<?= session_id() ?>"</script> (après session_start();)
               Pour passer plusieurs cookies, contruire le strind de la même manière que l'on construit data dans la fonction Ajax
div          : id de l'élément (généralement un div) dans lequel le résultat sera placé

Pour échapper les caractères spéciaux à passer dans les requêtes, utiliser 
encodeURIComponent()
qui est fait pour cela.

Pour décoder en php, utiliser la fonction 
function decodeHexEncoded($value) {
    if (is_array($value)) {
        foreach ($value as $key => $val) {
            $value[$key] = decodeHexEncoded($val);
        }
    } else {
        $value = preg_replace('/%([0-9a-f]{2})/ie', "chr(hexdec('\\1'))", (string) $value);
    }
    return $value;
}
car urldecode remplace l'encodage du caractère + par des espaces
*/

Le code html

<p><a href="/wiki/XMLHttpRequest_ou_AJAX_simple"
    onclick="RequestContent('../ajax/click.php' , '' , 'GET' ,true , 'txt' , '' , 'clics'); 
    return false;">Cliquez ici !</a>
(Nombre de clics : <span id="clics">260</span>)</p>

Le fichier click.php

<?php
	sleep(1);

	$str = @file_get_contents('click.txt');
	if($str !== FALSE) $nbr = unserialize($str) + 1; else $nbr = 1;

	//Lignes pour désactiver la mise en cache
	header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
	header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
	header("Cache-Control: no-store, no-cache, must-revalidate");
	header("Cache-Control: post-check=0, pre-check=0", false);
	header("Pragma: no-cache");

	echo $nbr;

	file_put_contents('click.txt', serialize($nbr));
	@chmod('click.txt', 0777);
?>