[Résolu] AJAX, MySQL et données lourdes

AJAX, MySQL et données lourdes [Résolu] - HTML/CSS - Programmation

Marsh Posté le 17-04-2012 à 13:38:46    

Bonjour,
 
Je fais mes premiers pas avec AJAX, mais je suis familier de PHP/MySQL (et à peu près de Javascript également).
J'ai une base de données qui contient environ 10 000 observations, et j'essaye de faire une requête toute simple pour afficher une variable de ces observations dans un div.
 
Concrètement, j'ai trois fichiers :
 
1. Un index.html qui contient un  

<div id="affichage"></div>


 
2. Un ficher loadObservations.php qui contient essentiellement :

while($obs = mysql_fetch_array($query){
 echo $obs['variable'] . "\n";
}


 
2. Un script.js qui contient une variable xhr pointant vers un XMLHttpRequest standard et (notamment) deux fonctions :

loadObs(){
if (xhr.readyState == 4 || xhr.readyState == 0) {
  xhr.open("GET", 'loadObservations.php', true);
  xhr.onreadystatechange = handleObs;
  xhr.send(null);
 }
}


 
et
 

function handleObs(){
 if (xhr.readyState == 4) {
  var listOfObs = xhr.responseText.split("\n" );
  if (listOfObs.length > 1) {
   for (i = 0 ; i < listOfObs.length - 1 ; i++){
    document.getElementById("affichage" ).innerHTML +=
     "<p>" + listOfObs[i] + "</p>\n";
   }
  }
 }
}


 
 
Ça marche sans problème quand il y a jusqu'à une centaine voire un millier de résultats. Après il n'arrive plus à suivre.
Je fais tourner tout ça en local avec un serveur MAMP.
 
Des idées, des conseils ?
 
Merci !


Message édité par ArnaudR le 17-04-2012 à 14:30:18
Reply

Marsh Posté le 17-04-2012 à 13:38:46   

Reply

Marsh Posté le 17-04-2012 à 14:19:09    

remplace

Code :
  1. if (listOfObs.length > 1) {
  2.   for (i = 0 ; i < listOfObs.length - 1 ; i++){
  3. // on  oblige  s le navigateur a tout redessiner à chaque ajout
  4.       document.getElementById("affichage" ).innerHTML +=
  5.     "<p>" + listOfObs[i] + "</p>\n";
  6.   }


par

Code :
  1. if (listOfObs.length > 1) {
  2. var html = '';
  3.   for (i = 0 ; i < listOfObs.length - 1 ; i++){
  4.       html  +=
  5.     "<p>" + listOfObs[i] + "</p>\n";
  6.   }
  7. // on  oblige    le navigateur a tout redessiner une seule fois
  8. document.getElementById("affichage" ).innerHTML  =html ;
 

ou plus court :

Code :
  1. var html = = '<p>'+xhr.responseText.split("\n" ).join('</p><p>')+'</p>';
  2. document.getElementById("affichage" ).innerHTML  =html ;


ou encore plus court avec un replace

Message cité 1 fois
Message édité par flo850 le 17-04-2012 à 14:20:26

---------------

Reply

Marsh Posté le 17-04-2012 à 14:29:33    

flo850 a écrit :

remplace  

Code :
  1. if (listOfObs.length > 1) {
  2.   for (i = 0 ; i < listOfObs.length - 1 ; i++){
  3. // on  oblige  s le navigateur a tout redessiner à chaque ajout
  4.       document.getElementById("affichage" ).innerHTML +=
  5.     "<p>" + listOfObs[i] + "</p>\n";
  6.   }


par  

Code :
  1. if (listOfObs.length > 1) {
  2. var html = '';
  3.   for (i = 0 ; i < listOfObs.length - 1 ; i++){
  4.       html  +=
  5.     "<p>" + listOfObs[i] + "</p>\n";
  6.   }
  7. // on  oblige    le navigateur a tout redessiner une seule fois
  8. document.getElementById("affichage" ).innerHTML  =html ;


 
ou plus court :  

Code :
  1. var html = = '<p>'+xhr.responseText.split("\n" ).join('</p><p>')+'</p>';
  2. document.getElementById("affichage" ).innerHTML  =html ;


ou encore plus court avec un replace


Merci, je n'avais pas compris que le problème venait de là. C'est beaucoup plus rapide comme ça en effet :jap:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed