Http request et javascript

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

J'ai un petit souci que je ne maîtrise pas bien concernant l'appel d'une page php (via httpRequest) contenant une fonction javascript.

J'ai une page php contenant une fonction javascript permettant d'afficher un graph via HightChart (librairie javascript permettant de faire des graphs). En appelant cette page seule, j'affiche bien mon graph qui est lancé via une fonction javascript :

Code:

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<script src="../ClassFonctionJS/js/jQuery.js"></script>
<script type="text/javascript">
 
 
$(document).ready( function(){
    alert ('oi');
    groupBar();
});
 
function groupBar() {
alert('oui');
            $('#bar_liaison').highcharts({
                chart: {
                    type: 'column',
                    height : 400,
                    width: 1000
                },
                title: {
                    text: 'Nombre de liaisons utilisées',
                    style: {
                        fontSize : '12px'
                    }
                },
                subtitle: {
                    text: 'Source: Valenciennes Métropole',
                    style: {
                            fontSize : '9px'
                        }
                },
                xAxis: {
                    categories: [<?php echo join($legend_bar,',') ?>],
                    title: {
                        text: null
                    },
                    labels: {
                        rotation: -20,
                        style: {
                            fontSize: '9px'
                        }
                    }
                },
                yAxis: [{
                    min: 0,
                    //max: 120,
                    labels: {
                        style: {
                            color: 'red'
                        }
                    },
                    title: {
                        text: 'Nombre total de liaison',
                        align: 'middle'
                    },
                    labels: {
                        overflow: 'justify'
                    },               
                    opposite: true
                },
                // second yAxis
                {
                    min: 0,
                   // max: 80,
                    labels:{
                        style :{
                            color: 'red'
                        }
                    },
                    title: {
                        text: 'Nombre de liaison',
                        align: 'middle'
                    },
                    labels: {
                        overflow: 'justify'
                    }
                }],
                tooltip: {
                    pointFormat:  "{series.name} : {point.y:.0f} fois"
                    //valueSuffix: ' ha'
                },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 60,
                    y: 35,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: '#FFFFFF',
                    shadow: true,
                    layout: 'horizontal', // permet de mettre la legende en horizontal
                    //width : 150, // en fixant une largeur on peut jouer sur le nombre de colonne à afficher
                    itemStyle: {
                        color: 'black',
                        fontSize: '9px'
                    }
                },
 
                plotOptions: {
                    series: {
                        animation: false,
                        marker: {
                            radius: 2,
                            fillColor : 'black'
                        }
                    },
                    spline: {
                            dataLabels: {
                                enabled: true,
                                crop : false, // permet de ne pas bloquer l'affichage d'un label si hot
                                format: '{point.y:.0f}',
                                style: {
                                        fontSize: '12px' 
                                    }
                            }
                    }
                },
                series: [<?php echo $series_bar ?>,<?php echo $line_data?>]   
            });
        };
</script>

avec le page php suivante :

..../FO_Location/StatLiaison.php?id_Liaison=36

Par contre si je veux ouvrir cette page via httpRequest , la page se charge (avec le contenu écrit en php) mais pas le graph car apparemment la fonction javascript n'est pas appelée. (j ai mis un alerte au moment f de l'appel mais rien ne se passe).

Je pense que je ne dois pas très maitriser tout le mécanisme du httprequest :

Voici mon code :

Code:

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
function Select_StatLiaison(id)
{
    var bal=document.createElement("div");
 
    url = Request_StatLiaison(id);
    Asynchrone(url,"divStatLiaison");
}
 
function Request_StatLiaison(id)
{
     return ("http://..../fo_location/StatLiaison.php?id_Liaison="+escape(id)+"&nocache="+Math.random());
}
 
function Asynchrone(v_url,div)
{
 
     if(window.XMLHttpRequest) // FIREFOX
     {      
        try
        {
            xhr = new XMLHttpRequest();
        }
 
        catch (e){
            try{
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e){
                try {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    alert("XHR not created");
                }          
            }
         } // end catch (e)
     }// end if
 
     else if(window.ActiveXObject) // IE
     {        
        xhr = new ActiveXObject("Microsoft.XMLHTTP");      
     }
 
     else
     {
          alert("Fonction non supportée par le navigateur");
          xhr = false;
 
        return(false);
     }
 
      xhr.open("POST", v_url, true);
      xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded; charset=iso-8859-1');
      //xhr.setRequestHeader('Cache-Control','no-cache');
 
      xhr.onreadystatechange = function() {
          //alert(xhr.readyState);
          //alert(v_url);
 
 
      if (xhr.readyState == 4){ 
 
 
      //if (xhr.status == 200) // 200 : requete réussie
          if (xhr.status != 404 && xhr.status != 500) // 200 : requete réussie // 0 : requete vide  !!
          {            
            var element = document.getElementById(div);
 
            try
            {            
                  //alert(xhr.responseText);                 
              element.innerHTML = xhr.responseText;
              return false;
 
            }
 
            catch(e)
            {
                try
                {        
                    var wrappingElement = document.createElement('div');
                    wrappingElement.innerHTML = xhr.responseText;
 
                    while (element.firstChild) {
                      element.removeChild(element.firstChild);
                    }
                    element.appendChild(wrappingElement);
 
                } // end of catch
                catch (e)
                {
                    //alert('3');
                } // end fo catch
              } // end of catch
           }    // end if xhr.status == 200
 
           if (xhr.status == 404)
           {
                html = 'Fichier non trouvé 404 : <br/>';
                html += xhr.responseText;
           }
 
           if (xhr.status == 500)
           {
                html = 'Erreur 500 serveur : <br/>';
                html += xhr.responseText;
           }
 
           // on affiche le fragment HtML
            //$('contenu')innerHTML = html;
      } // end if xhr.readyState == 4
 
      else
      {
          return false;
      }    
  } // end of function
  xhr.send(null);   
}

(j'ai supprimé une partie de l'adresse url volontairement , mais l'adresse en bonne)

Quand je fais appel à ma page php , la fonction javascript n'est donc pas appelée. Y a t-il un processus particulier ou un ajout de code supplementaire à mettre pour enclencher l'appel des fonctions javascript ? J'ai aussi essayé de mettre un OnLoad dans le body mais cela ne fonctionne pas non plus.

En pièce jointe j'ai fait un imprime écran de la page appelée.

Merci pour votre aide !
Pièce jointe 332634

05/12/2017, 11h48
Marco46

Je te conseille fortement d'utiliser une librairie pour gérer tes xhr plutôt que de réinventer la roue. (EDIT : Tu importes jQuery à ce que je vois, utilises donc les fonctions xhr de jQuery)

Tu ne peux pas appeler une page php via du javascript. Au mieux tu peux appeler un webservice (écrit en php ou pas) qui va te retourner des datas (json, xml, ...) sans changer de page.

Pour que ce soit clair, le php est exécuté côté serveur et te retourne une page entière. Le javascript est exécuté côté client. A mon avis tu as un problème d'architecture avant d'avoir un problème de code.
05/12/2017, 14h38
mcdelay

2 pièce(s) jointe(s)

Merci pour ta réponse. J'utilise jQuery (seulement) pour utiliser $(document).ready .

J'utilise httpRequest depuis pas mal de temps (j'implémente à chaque fois le même code) et je ne me suis pas trop penché pour utiliser ajax via jQuery. Pour expliquer un peu mieux mon code, sur ma page mère j'ai un tableau où sur chaque ligne j'ai mis un évement onMouseover qui lance ma fonction javascript (avec en paramétre l'identifiant d'une liaison) contenant le httprequest utilisant la fonction hr.open("POST", v_url, true) , qui donc ouvre ma page php contenant le graph. Il me semblait donc bien au final que j'ouvrais une page php se trouvant effectivement sur le serveur ? J'ai mis en pièce le résultat final...Pièce jointe 332699
05/12/2017, 15h56
Invité
Bonjour,

Citation:

Envoyé par mcdelay

... J'utilise jQuery (seulement) pour utiliser $(document).ready . ...

Autrement dit, tu achètes une voiture pour avoir le porte-clé.... :roll:

En jQuery, il existe des syntaxes très simple :
- .ajax()
- .post()
- .load()
- ...
Il serait temps de t'y intéresser.

Mets la clé dans le contact et en voiture Simone !
05/12/2017, 16h44
Marco46

Citation:

Envoyé par mcdelay

Il me semblait donc bien au final que j'ouvrais une page php se trouvant effectivement sur le serveur ?

Mais tu l'ouvres où ? Ton php va s'exécuter sur le serveur et te retourner des données, reste à voir sous quelle forme et comment l'intégrer dans ta page courante.

+1 avec jreaux62
05/12/2017, 19h18
NoSmoking

Bonjour,

Citation:

Envoyé par mcdelay

... J'utilise jQuery (seulement) pour utiliser $(document).ready . ...

non pas que à preuve

Citation:

$('#bar_liaison').highcharts({
08/12/2017, 12h06
Watilin

mcdelay, je vois pas mal de code de récupération dans ton script, à base de try/catch (parfois même des try imbriqués dans des catch), ainsi que de gestion d’erreurs de requête assez fragile à grand renfort de if/else. Tout ça me laisse penser que tu n’utilises pas les outils de développement de ton navigateur pour examiner les erreurs. Appuie sur F12.

Deux outils vont t’aider principalement :
:arrow: l’onglet console qui affiche les erreurs de script et te permet d’utiliser console.log à la place de alert ;
:arrow: l’onglet réseau qui te permet d’examiner les requêtes, voir les codes retournés par le serveur, les en-têtes http, etc.

Ces outils vont te permettre de supprimer beaucoup de lignes de code et te concentrer sur l’essentiel.

Tu as également moyen de bien alléger ton code concernant ajax, à la fois la création de l’objet xhr et la gestion de la réponse du serveur. L’ActiveX ajax est obsolète depuis la mort d’IE6 (j’en veux pour preuve que IE7 supporte nativement l’objet XMLHttpRequest) ; et même onreadystatechange est quasiment déprécié aujourd’hui, car XMLHttpRequest a des méthodes onload, onprogress et onerror, plus pratiques, dont le support est assuré à 94 % au moment où j’écris ceci.

Mais comme tu utilises jQuery, je me joins à jreaux62 et Marco46 pour te conseiller d’utiliser les méthodes ajax de jQuery.