[AJAX] Requete AJAX lente sur serveur OVH

Version imprimable

20/03/2013, 16h18
rere02

[AJAX] Requete AJAX lente sur serveur OVH

Bonjour à tous !

J'aimerais avoir votre avis sur le problème que je rencontre...

Je viens de réaliser un site Internet, sur une page je fais appel à un script pour mettre une image à jour dans une div lorsque le je change de sélection dans une liste déroulante. Jusqu'ici pas de problème... Sur mon serveur apache (via wamp) tout se fait très rapidement. Cependant la je viens de charger le site sur le serveur définitif (OVH), et là malheur, le changement d'image (69 ko) se fait au bout de 18 secondes... (En ayant une connexion perso de 20 méga, on peut donc exclure le fait que l'image soit trop volumineuse :mouarf:)

Si vous avez un avis sur le sujet, je suis preneur !

Merci d'avance !

Rémi
20/03/2013, 16h20
Bovino

Je vois pas trop le rapport entre AJAX et l'affichage d'une image... :koi:

En tout cas, sans code, c'est difficile de te répondre.

Oui car derrière j'utilise des fonctions php...

mon script js :

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
function getXhr(){
        var xhr = null; 
	if(window.XMLHttpRequest)
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ 
	    try {
	        xhr = new ActiveXObject("Msxml2.XMLHTTP");
	    } catch (e) {
	        xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
        return xhr;
}
 
function a1(){
	var xhr = getXhr();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			document.getElementById('imgb').innerHTML = leselect;
		}
	}
	xhr.open("POST","./inc/p.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById('couleur');
	couleur = sel.options[sel.selectedIndex].value;
	sel2 = document.getElementById('id');
	idproduct = sel2.options[sel2.selectedIndex].value;
	xhr.send("couleur="+couleur+"&id="+id);
}

ma page 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
<?php
if(isset($_POST['couleur'])) $color = $_POST['couleur'];
if(isset($_POST['id'])) $id = $_POST['id'];
?>
<script type="text/javascript">
 
 function change(imga){
document.getElementById('art').src=imga
}
       </script>
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="110" valign="top" class="thumbnail">
        <?php
$dirname = './img2/'.$id.'/'.$color.'/';
$dirname2 = '../img2/'.$id.'/'.$color.'/';
$dir = opendir($dirname2); 
 
while($file = readdir($dir)) {
	if($file != '.' && $file != '..' && !is_dir($dirname.$file) && strpos($file, '.jpg')==true)
	{ ?>
		<img src ='<?php echo $dirname.$file; ?>' alt="" width="100" id="ptim" onmouseover="change('<?php echo $dirname.$file; ?>')" /><br />
	<?php  }
}
 
closedir($dir);
 
 ?>
</td>
    <td align="center" valign="top"><img src ='<?php echo $dirname; ?>0.jpg' name="article" width="505" id ='art' /></td>
  </tr>
</table>

Bonsoir,
as tu réellement besoin de requête pour faire cela, est ce qu'un simple changement de l'attribut src d'une image ne serait pas suffisant ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[onchange]</title>
</head>
<body>
<select onchange="document.getElementById('image').src = this.value">
  <option value="http://web.developpez.com/faq/theme/images/mini_logo_faq_xhtml.gif">XHTML</option>
  <option value="http://web.developpez.com/faq/theme/images/mini_logo_faq_css.gif">CSS</option>
  <option value="http://web.developpez.com/faq/theme/images/mini_logo_faq_js.gif">Javascript</option>
</select>
<br><img id="image" src="http://javascript.developpez.com/template/images/logo.png">
</body>
</html>

21/03/2013, 08h12
rere02

Bonjour, merci de ta réponse.

C'est vrai que ta solution est très bonne mais le problème c'est qu'en réalité il n'y a pas qu'une image qui s'affiche.

En fait c'est pour un catalogue produit, et une couleur peut avoir plusieurs photos.. Donc quand tu changes ta sélection tu as 2 ou 3 photos en miniatures qui s'affichent, ainsi qu'une en taille réelle a côté. Et bien sûr au survol d'une des miniature, celle-ci s'affiche en taille réelle...

Rémi
22/03/2013, 18h43
NoSmoking

Citation:

(...)et là malheur, le changement d'image (69 ko) se fait au bout de 18 secondes...

est tu sûr que c'est le chargement et non pas le chargement et la construction?

Voir avec Firebug onglet réseau par exemple.
23/03/2013, 17h36
rere02

Un grand merci ! En fait je me suis rendu compte que mon code était "dégueulasse", en effet mis à part la div de la photo, il y a 4 autre div que doivent se mettre à jour, et j'ai abusé sur les onclick, onfocus, onblur, onmousemove etc... et cela avait pour conséquence de faire au moins 100 posts redondants... D'où cette rapidité en local mais pas chez OVH...

Maintenant j'ai plus qu'à retravailler mon code ! :ccool: