[AJAX] Script correct ou trop lourd ?

**vbaguet** · 25/10/2012, 12h41

Bonjour à tous,

Alors voilà j'ai fait un petit script en Ajax me permettant d'afficher les dernières quotes présentes dans une base de données.
Cela fonctionne mais n'étant pas très calé en la matière, je me permet de vous le soumettre pour que vous puissiez me dire si je me complique la vie ou pas, si c'est la bonne méthode à adopter et enfin si celle-ci n'est pas trop lourde.

Autre chose, j'aimerais si possible afficher chargement... pendant la breve attente de l'affichage...

Voici mon code :

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
 
 
// Customise those settings
 
var seconds = 5;
var divid = "quotes";
var url = "http://www.holding-paragon.com/wecitizens/quotes.php";
 
////////////////////////////////
//
// Refreshing the DIV
//
////////////////////////////////
 
function showQuotes(){
 
// The XMLHttpRequest object
 
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}
 
// Timestamp for preventing IE caching the GET request
 
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
 
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;
 
// The code...
 
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
var lastQuotes = document.getElementById(divid);
lastQuotes.innerHTML = xmlHttp.responseText;
setTimeout("showQuotes()",5000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}
 
// Start the refreshing process
 
var currentQuote = setTimeout(showQuotes,5000);

Vous pouvez voir ce que ca donne pour le moment sur ce site en haut a droite, pour moi le delai d'affichage est trop long :/

Lien

Un tout grand merci !

**andry.aime** · 25/10/2012, 12h54

Bonjour,

Ton code n'est pas indenté, c'est pas très beau à lire

. Je ne sais plus si la fonction showQuotes instancies seulement un XMLHttpRequest ou bien la requête AJAX est inclue, car tu déclares une autre fonction au beau milieu du code.

Envoyé par vbaguet

Autre chose, j'aimerais si possible afficher chargement... pendant la breve attente de l'affichage...

Code :

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

1
2
3
 document.getElementById(divid).innerHTML = 'Loadinnnnnnnnnnng';
xmlHttp.onreadystatechange=function(){
.....

A+.

**vbaguet** · 25/10/2012, 13h22

Justement j'aimerais faire au plus simple et je pense avoir fait des doublons...
C'est pour ca que je fais appel à vous, je suis vraiment pas doué en Ajax, je suis deja content que ca fonctionne...moyennement...!

Donc si vous pouviez m'aidez...

**vbaguet** · 25/10/2012, 14h27

Et ne pourrait-t-on pas mettre tout dans un seul fichier PHP ? Avec la requête PHP et une variable javascript dans laquelle on place le résultât de la requête PHP. Et on affiche cette variable avec le set timeout toutes les 5 sec...

Code :

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

var quote = <?php echo $result; ?>;

Mais je ne sais pas si la requête va s'exécuter chaque 5 secondes, ce que je veux en fait avec la fonction rand() PHP..;

**andry.aime** · 25/10/2012, 14h47

Vire la déclaration de la fonction fetch_unix_timestamp de la fonction showQuotes pour ne pas le re-déclarer à chaque requête AJAX.

Code :

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

1
2
3
4
function fetch_unix_timestamp()
{
	return parseInt(new Date().getTime().toString().substring(0, 10))
}

Envoyé par vbaguet

Et ne pourrait-t-on pas mettre tout dans un seul fichier PHP ? Avec la requête PHP et une variable javascript dans laquelle on place le résultât de la requête PHP. Et on affiche cette variable avec le set timeout toutes les 5 sec...

Code :

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

var quote = <?php echo $result; ?>;

Mais je ne sais pas si la requête va s'exécuter chaque 5 secondes, ce que je veux en fait avec la fonction rand() PHP..;

Tu veux dire que la requête AJAX appelle la même page encours?
Oui c'est possible, tu testes au début de ton code si $_GET["t"] existe, tu faits echo de la valeur à retourner et faire un exit pour ne pas générer la page en entière.

A+.

**vbaguet** · 25/10/2012, 15h10

ok je vais tester ca

**vbaguet** · 25/10/2012, 15h42

Voilà mon code, ca fonctionne si je mets l'url en dur, mais avec window.location.pathname ca ne fonctionne pas, je comprend pas pourquoi...

Et pour le exit je sais pas trop ou le mettre...

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
 
<?php
if(isset($_GET['t']))
{
        $con = mysql_connect("localhost", "xxxx", "xxxxx");
        mysql_select_db("xxxxxx", $con);
        $row = mysql_fetch_array(mysql_query("SELECT * FROM we_quotes order by rand() limit 1"));
        mysql_close($con);
        echo "<img src=".htmlentities($row[2])." />";
        echo "&laquo; " . htmlentities($row[1]) . " &raquo;";
}
?>
 
<script type="text/javascript">
function fetch_unix_timestamp()
{
	return parseInt(new Date().getTime().toString().substring(0, 10))
}
 
function showQuotes(){
var xmlHttp;
 
try 
{
	xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e)
{
	try 
	{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
	}
	catch (e)
	{
		try
		{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e)
		{
			alert("Your browser does not support AJAX.");
			return false;
		}
	}
}
 
// Timestamp for preventing IE caching the GET request
var timestamp = fetch_unix_timestamp();
var url = window.location.pathname + "?t=" + timestamp;
 
xmlHttp.onreadystatechange=function()
{
	if(xmlHttp.readyState==4)
	{
		var lastQuotes = document.getElementById("quotes");
		lastQuotes.innerHTML = xmlHttp.responseText;
		setTimeout("showQuotes()",5000);
	}
}
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
 
var currentQuote = setTimeout(showQuotes,5000);
 
</script>
 
<div id="quotes"></div>

**Bovino** · 25/10/2012, 15h48

Tout simplement parce que pathname ne renvoie pas le dernier slash, il faut le rajouter à la main :

Code :

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

var url = window.location.pathname + "/?t=" + timestamp;

D'autre part, ça te sert à quoi ta méthode de calcul de timestamp ?

Code :

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

var url = window.location.pathname + "/?t=" + new Date();

fonctionne tout aussi bien...

**vbaguet** · 25/10/2012, 15h52

J'ai rajouté le slash mais le probleme est toujours la... et quand je fais un alert de var url, cela n'affiche pas le lien du fichier php courant...Il m'affiche juste le premier sous dossier du site.

je devrais avoir quelques chose comme http://www.xxx.com/xxx/xxx/xxx.php

:/