1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| //-----------------------------------= fct getXHR = utilisé dans Ajax =-------------------------------------------
//fct pour instancier l'objet xhr en fonction du navigateur du client :
function getXhr()
{
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
{
xhr = new XMLHttpRequest();
}
else if(window.ActiveXObject) // Internet Explorer
{
try
{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else // XMLHttpRequest non supporté par le navigateur
{
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
//-----------------------------------= FIN DE : fct getXHR = utilisé dans Ajax =---------------------------------
//-----------------------------------------------= Fct ajax/XML go & clean penalites.php =--------------------------------------
function go(c){
if(!c.data.replace(/\s/g,''))
c.parentNode.removeChild(c);
}
function clean(d){
var bal=d.getElementsByTagName('*');
for(i=0;i<bal.length;i++){
a=bal[i].previousSibling;
if(a && a.nodeType==3)
go(a);
b=bal[i].nextSibling;
if(b && b.nodeType==3)
go(b);
}
return d;
}
//------------------------------------------------------------------------------------------------------------------------------
//-----------------------------------= Fct ajax/XML pr penalites.php =--------------------------------------
function ajaxPenalitesPoules()
{
//Principe : Apres avoir instancié xhr, de maniere procédurale, on va d'abord exécuté la partie B, puis apres la partie A.
var xhr = getXhr(); //On instancie xhr comme un objet de la classe XMLHttpRequest grace a l'appel de la fct getXhr()
//Partie A
xhr.onreadystatechange = function() //A chaque changement d'état de l'objet xhr, on exécute la fonction entre { }:
{
//A chaque changement d'état, on test que l'état de l'objet xhr est "pret" ( = à 4), et si tous la réponse du serveur web est "OK" ( = 200)
if(xhr.readyState == 4 && xhr.status == 200)
{
//Si on est ici, c'est qu'on a terminé de récupéré correctement les données traités et transformé en XML, par conséquent, on récupere le tout dans une var nommé MaReponse, en précisant que les datas sont du XML (par la méthode : .responseXML.documentElement) (a la différence la méthode standard : .responseText)
//De plus on néttoie grace a la fct clean, afin que l'arborescence du fichier XML soit cohérent selon les différents navigateurs.
MaReponse = clean(xhr.responseXML.documentElement);
//Grace a la méthode innetHTML, on "injecte" du code html sur la page principale, dans la balise div identifié : ZListDerEqu. Le code injecte est l'ensemble de la chaine de texte du noeud (.firstChlid.nodeValue), de la balise XML "A" de l'objet MaReponse.
document.getElementById('ZlistDerEqu').innerHTML = MaReponse.getElementsByTagName("A")[0].firstChild.nodeValue;
document.getElementById('TxtEqu').innerHTML = MaReponse.getElementsByTagName("B")[0].firstChild.nodeValue;
}
//Ici la fin de la fct
}
//Partie B:
//On passe en post nos var déclaré ci-dessous, vers la page ajaxPenalitesPoules.php, en mode asynchrone (true)
xhr.open("POST","ajaxPenalitesPoules.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //Indispensable
//On récupere la valeur de la balise identifié id_pou sur notre page principale.
sel = document.getElementById('id_pou');
idpou = sel.options[sel.selectedIndex].value; //On traite cette valeur pour pouvoir la passer en parametre grace a Xhr
xhr.send('MonIDPou='+idpou); //On passe notre valeur en POST vers la page ajaxPenalitesPoules.php, qui va généré en fct de cette var (MonIDPou) le fichier XML contenant les balises A et B.
}
//-----------------------------------= FIN DE : Fct ajax pour la page penalites.hp =----------------------------- |
[AJAX] "injection php" avec Ajax.
Répondre avec citation
Partager