[AJAX] Requete AJAX lente sur serveur OVH

**rere02** · 20/03/2013, 16h18

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

)

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

Merci d'avance !

Rémi

**Bovino** · 20/03/2013, 16h20

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

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

**rere02** · 20/03/2013, 16h55

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

mon script js :

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

**NoSmoking** · 20/03/2013, 21h57

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

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

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>

**rere02** · 21/03/2013, 08h12

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

**NoSmoking** · 22/03/2013, 18h43

(...)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.

**rere02** · 23/03/2013, 17h36

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 !

[AJAX] Requete AJAX lente sur serveur OVH

AJAX

Discussions similaires

Partager

Partager