XMLHttpRequest : un moyen de faire des requêtes en javascript sans quitter sa page.
Voici un petit bout de code javascript que j'ai créé pour faire mon premier XMLHttpRequest. En gros, ce code gère le cas d'un second menu qui dépend d'un premier menu : lorsque l'on change le premier menu, une requête est envoyée sur un serveur (on imagine que celà déclenche une requête dans une base de données ou quelque chose du genre) qui renvoie une réponse. La réponse est alors analysée par le javascript pour composer le second menu.On a ainsi un bel exemple de genération de menu dynamique via xmlhttprequest.
Vous pouvez télécharger le code suivant sur le fichier : ajax_slave_update.js
// cette fonction genere les options d'un menu slave
// en fonction de la valeur d'un menu master
// les options du menu slave sont obtenues en allant
// a l'adresse "url" a laquelle on a ajouté
// la valeur du menu slave
// master_menu : id du menu master
// slave_menu : id du menu slave
// url : url de la requete (ex : generate.php?master_value= )
// la valeur du menu master sera ajoutee a url.
// le texte de la reponse doit etre de la forme :
// opt_array = array();
// opt_array['value1'] = 'label1';
// opt_array['value2'] = 'label2';
// opt_array['value3'] = 'label3';
// opt_array['value4'] = 'label4';
function ajax_slave_menu_update(master_menu,slave_menu,url) {
// we look for the master value
master = document.getElementById(master_menu);
master_value = master.options[master.selectedIndex].value;
// we launch the XMLHttpRequest
url += master_value;
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function handleHttpResponse() {
if (http.readyState == 4) {
javascript = http.responseText;
eval(javascript);
slave = document.getElementById(slave_menu);
// first, we erase existing options in slave menu
opt = slave.options;
for (var i=0; i < opt.length; i++) {
opt[i] = null;
i--;
}
// second, we fill the slave menu with the new options
for (new_opt in opt_array) {
opt[opt.length] = new Option(opt_array[new_opt], new_opt, false, false);
}
}
}
// generic cross-platform code for creating the XMLHttpRequest object
function getHTTPObject() {
var xmlhttp;
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject();
Tags : javascript, ajax
Ecrire votre commentaire
Vous devez vous connecter pour pouvoir ajouter un commentaire.
