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

Version imprimable

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div id="widget_38aa06bb04de9be0a4f93a7458174ce0"> <p> </p> <p><a href="http://www.my-meteo.fr/previsions+meteo+maroc/agadir.html" title="Météo Agadir 7 jours">Mété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 ?

Actualiser div sans recharger la page

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:

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:

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:

<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:

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:

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:

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>

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:

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:

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:

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