[AJAX] Exécuter un script sans recharger la page web

**medhan** · 30/08/2013, 13h33

Bonjour,

Je développe en PHP. Je veux bien insérer sur mon site une partie de météo qui peut donner ma météo sur plusieurs villes. Pour faire j'ai intégré un script gratuit fourni par un site de météo qui est comme suite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="widget_38aa06bb04de9be0a4f93a7458174ce0">
  <p>&nbsp;</p>
  <p><a href="http://www.my-meteo.fr/previsions+meteo+maroc/agadir.html" title="M&eacute;t&eacute;o Agadir 7 jours">M&eacute;t&eacute;o Agadir 7 jours</a>
    
      <script type="text/javascript">
(function() {
    var my = document.createElement("script"); my.type = "text/javascript"; my.async = true;
    my.src = "http://www.my-meteo.fr/meteo+webmaster/widget/js2.php?ville=<?php echo $_POST['combo_ville'] ?>&format=classique&nb_jours=5&temps&icones&precip&c1=000000&c2=000000&c3=787878&c4=d4d4d4&c5=56d4f4&c6=d12e2e&police=0&t_icones=9&x=180&y=479&id=38aa06bb04de9be0a4f93a7458174ce0";
    var z = document.getElementsByTagName("script")[0]; z.parentNode.insertBefore(my, z);
  })();
      </script>
    
    
    </p>
</div>

Ce script me donne la météo d'une ville portant un numéro que j’intègre facilement par php.

Mon problème : Je veux que l'utilisateur peut consulter la météo de plusieurs villes sans recharger à chaque fois la page web.. Alors, comment je peux afficher ma météo sans recharger ma page web ?

**medhan** · 01/09/2013, 03h05

Bonjour,

Je suis peut être en avance mais avec toujours un petit blocage. J'ai pu m'inspirer d'un tutoriel et j'ai fais ce qui suit :

j'ai codé la page (index.php) comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php
    require("./connect.php");
?>
 
<html>
    <head>
        <title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
 
 
 
        <script type='text/javascript'>
 
            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;
            }
 
 
 
                function go(){
                var xhr = getXhr();
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                    if(xhr.readyState == 4 && xhr.status == 200){
                        leselect = xhr.responseText;
                        // On se sert de innerHTML pour rajouter les options a la liste
                        document.getElementById('id_meteo').innerHTML = leselect;
                    }
                }
 
                // Ici on va voir comment faire du post
                xhr.open("POST","ajax_meteo.php",true);
                // ne pas oublier ça pour le post
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // ne pas oublier de poster les arguments
                // ici, l'id de l'auteur
                sel = document.getElementById('auteur');
                id = sel.options[sel.selectedIndex].value;
                xhr.send("id="+id);
            }
 
 
 
 
 
        </script>
 
 
 
    </head>
    <body>
        <form>
            <fieldset style="width: 500px">
                <legend>METEO</legend>
                <label>Ville : </label>
 
 
                <select name='auteur' id='auteur' onchange='go()'>
                    <option value='-1'>Aucun</option>
                    <?php
 
                        $res = mysql_query('SELECT id_ville, ville FROM t_villes_meteo ORDER BY ville');
                        while($row = mysql_fetch_assoc($res))
                        {
                            echo "<option value='".$row["id_ville"]."'>".$row["ville"]."</option>";
                        }
                    ?>
                </select>
 
 
 
                <br><br><br>
                <div id='id_meteo'>
 
 
                </div>
 
            </fieldset>
        </form>
 
 
    </body>
</html>

Sur une autre page appelée (ajax_meteo.php) j'ai fais ce code :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php
    require("./connect.php");
 
 
    $sql = "SELECT id_ville, ville FROM t_villes_meteo WHERE id_ville = ".$_POST["id"]." ";
    $req = mysql_query($sql) or die(mysql_error());
    $row = mysql_fetch_array($req);
 
 
$id_ville=$row['id_ville'];
$ville=$row['ville'];
 
?>
 
 
 
</br>
</br>
 
 
<!-- widget meteo -->
<div id="widget_e00fc18850d1b1e32a408b491a1dd1c3">
<a href="http://www.my-meteo.fr/previsions+meteo+maroc/<?php echo $ville ?>.html">M&eacute;t&eacute;o <?php echo $ville ?> 5 jours </a>
 
<script type="text/javascript">
(function() {
    var my = document.createElement("script"); my.type = "text/javascript"; my.async = true;
    my.src = "http://www.my-meteo.fr/meteo+webmaster/widget/js2.php?ville=<?php echo $id_ville ?>&format=classique&nb_jours=5&temps&c1=414141&c2=a1a1a1&c3=d4d4d4&c4=ffffff&c5=56d4f4&c6=d12e2e&police=0&t_icones=1&x=180&y=384&id=e00fc18850d1b1e32a408b491a1dd1c3";
    var z = document.getElementsByTagName("script")[0]; z.parentNode.insertBefore(my, z);
  })();
 </script>
 
</div>
<!-- widget meteo -->

Mon idée est de passer la variable "id_ville" de ma ville de (index.php) en méthode poste vers (ajax_meteo.php) et essayer de rapporter le résultat de la page (ajax_meteo.php) dans la "div" de (index.php).

J'ai maintenant un problème que je ne comprend pas sur ma page index.php :

- Le titre dont le code dessous fonctionne très bien en changeant la ville

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="http://www.my-meteo.fr/previsions+meteo+maroc/<?php echo $ville ?>.html">M&eacute;t&eacute;o <?php echo $ville ?> 5 jours </a>

- Mais l’apparition de la météo de la ville (code dessous) ne se fait pas....!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script type="text/javascript">
(function() {
    var my = document.createElement("script"); my.type = "text/javascript"; my.async = true;
    my.src = "http://www.my-meteo.fr/meteo+webmaster/widget/js2.php?ville=<?php echo $id_ville ?>&format=classique&nb_jours=5&temps&c1=414141&c2=a1a1a1&c3=d4d4d4&c4=ffffff&c5=56d4f4&c6=d12e2e&police=0&t_icones=1&x=180&y=384&id=e00fc18850d1b1e32a408b491a1dd1c3";
    var z = document.getElementsByTagName("script")[0]; z.parentNode.insertBefore(my, z);
  })();
 </script>

Le code ma table ville si vous voulez est :

Code sql :

Sélectionner tout - Visualiser dans une fenêtre à part

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
CREATE TABLE `t_villes_meteo` (
  `id_ville` int(4) NOT NULL,
  `ville` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id_ville`)
)
 
INSERT INTO `t_villes_meteo` (`id_ville`, `ville`) VALUES
  (330,'Casablanca'),
  (331,'Rabat-Sale'),
  (332,'Fes'),
  (333,'Meknes'),
  (334,'Marrakech'),
  (335,'Tanger'),
  (336,'Agadir'),
  (337,'Oujda'),
  (338,'Tetouan'),
  (339,'Safi'),
  (340,'Beni Mellal'),
  (341,'EL Jadida'),
  (342,'Taza'),
  (343,'Laarache'),
  (344,'Essaouira'),
  (345,'Ourzazat'),
  (676,'Kenitra'),
  (678,'Kouribga'),
  (680,'Laayoune'),
  (681,'Kenifra'),
  (682,'Kenitra');
COMMIT;

Grosse question: Alors comment je peux faire tourner ce code das (ajax_meteo.php) et le faire apparaitre correctement sur (index.php) ??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script type="text/javascript">
(function() {
    var my = document.createElement("script"); my.type = "text/javascript"; my.async = true;
    my.src = "http://www.my-meteo.fr/meteo+webmaster/widget/js2.php?ville=<?php echo $id_ville ?>&format=classique&nb_jours=5&temps&c1=414141&c2=a1a1a1&c3=d4d4d4&c4=ffffff&c5=56d4f4&c6=d12e2e&police=0&t_icones=1&x=180&y=384&id=e00fc18850d1b1e32a408b491a1dd1c3";
    var z = document.getElementsByTagName("script")[0]; z.parentNode.insertBefore(my, z);
  })();
 </script>

Invité · 01/09/2013, 11h21

Bonjour,
il faut "évaluer" les scripts après Ajax => FAQ : Comment évaluer le contenu des balises script retourné par un appel Ajax?

Voilà, après avoir récupéré le script "original" (celui normalement généré par le site météo) :

meteo_ajax.php :

Code mixte :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php
header('Content-type: text/html; charset=UTF-8');       // encodage UTF-8
    require("./connect.php");
    $sql = "SELECT id_ville, ville FROM t_villes_meteo WHERE id_ville = ".intval($_POST["id"])." ";
    $req = mysql_query($sql) or die(mysql_error());
    $row = mysql_fetch_array($req);
$id_ville = $row['id_ville'];
$ville = $row['ville'];
?>
<!-- widget meteo -->
<div id="widget_38aa06bb04de9be0a4f93a7458174ce0">
	<p><a href="http://www.my-meteo.fr/previsions+meteo+maroc/<?php echo strtolower($ville); ?>.html" title="Météo <?php echo $ville; ?> 7 jours" target="_blank">Météo <?php echo $ville; ?> 7 jours</a>
	<script type="text/javascript">
	bloc_widget = document.getElementById('widget_38aa06bb04de9be0a4f93a7458174ce0');
	var lien = bloc_widget.getElementsByTagName("a")[0];
	var reg = new RegExp("^http://www.my-meteo.fr/");
	var reg2 = new RegExp("^Météo");
	if (lien && lien.getAttribute("href").match(reg)){ // Commenter cette ligne, si on ne veut pas de lien sur le nom de la ville (ci-dessus)
		var style_normal = 'font:normal 12px Arial, Helvetica, sans-serif; background-color:#d4d4d4; color:#000000; text-decoration:underline; line-height:20px;';
		var style_hover = 'font:normal 12px Arial, Helvetica, sans-serif; color:#000000; text-decoration:none; background-color:#d4d4d4; line-height:20px;';
		lien.style.cssText = style_normal;
		lien.onmouseover = function() { lien.style.cssText = style_hover; };
		lien.onmouseout = function() { lien.style.cssText = style_normal; }
		bloc_widget.style.cssText = 'text-align:center; background-color:#d4d4d4; border:1px solid #787878; width:178px; padding:0px;';
		iframe_widget = document.createElement('iframe');
		iframe_widget.style.cssText = 'width:178px; height:479px;';
		iframe_widget.src = 'http://www.my-meteo.fr/meteo+webmaster/widget/iframe2.php?ville=<?php echo $id_ville; ?>&format=classique&nb_jours=5&temps&icones&precip&c1=000000&c2=000000&c3=787878&c4=d4d4d4&c5=56d4f4&c6=d12e2e&police=0&t_icones=9&id=38aa06bb04de9be0a4f93a7458174ce0';
		iframe_widget.frameBorder = 0;
		iframe_widget.scrolling = 'no';
		iframe_widget.allowTransparency = true;
		bloc_widget.appendChild(iframe_widget);
	}	 // Commenter cette ligne, si on ne veut pas de lien sur le nom de la ville (ci-dessus)
	</script>
    </p>
</div>

meteo.php :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script type='text/javascript'>
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;
}
 
function go(){
	var xhr = getXhr();
	// ici, l'id de l'auteur
	sel = document.getElementById('auteur');
	id = sel.options[sel.selectedIndex].value;
 
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			var htmlText = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById('id_meteo').innerHTML = htmlText;
			evalScripts('id_meteo'); // on évalue les scripts
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","meteo_ajax.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	xhr.send("id="+id);
 
}
// évaluer le contenu des balises script retourné par un appel Ajax
function evalScripts(iddiv) {
	var mesScripts = document.getElementById(iddiv).getElementsByTagName("script");
	for (var i=0; i<mesScripts.length; i++) {
	eval(mesScripts[i].innerHTML);
	}
}
</script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id='id_meteo'></div>

[AJAX] Exécuter un script sans recharger la page web

AJAX

Discussions similaires

Partager

Partager