[AJAX] Utilisation Ajax et IE

**Seb06** · 18/06/2006, 10h26

Bonjour tout le monde ! je débute en Ajax, et la ...c'est la galère qui commence

. En guise d'échauffement j'ai voulu faire une petite page qui affiche permet de faire defiler des images dans un petit <div>.

Ca fonctionne impeccable sous firefox, du premier coup d'ailleurs. Puis sous IE rien du tout. La première image s'affiche, et rien ne se passe quand on appuie sur un des boutons.

Si quelqu'un a une idée, merci de partager

index.htm

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<script src="javascript.js">
</script>
</head>
<body onload="actionPage('init');">
<div class=image id=img style="width:450px;height:450px;border:1px solid;"></div>
<input type=button value="<--" onClick="actionPage('precedente');">
<input type=button value="-->" onClick="actionPage('suivante');">
<a href=# onClick="alert(blabla);">blabla</a>
</body> 
</html>

javascript.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
 
if (window.XMLHttpRequest) {
  XMLHttpRequestObject = new XMLHttpRequest();
} else {
  XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
 
function actionPage(action) {
  if (XMLHttpRequestObject) { 
    XMLHttpRequestObject.onreadystatechange = function() 
  { 
    if (XMLHttpRequestObject.readyState == 1) {
      el = document.getElementById("img"); 
      el.innerHTML = "<b>Chargement en cours</b>";    
    } else if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { 
      el = document.getElementById("img"); 
      el.innerHTML = XMLHttpRequestObject.responseText; 
    } 
  } 
  XMLHttpRequestObject.open("GET", "indexphp.php?action="+action, true); 
  XMLHttpRequestObject.send(null);
  }
}

indexphp.php

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
 
<?
  session_start();
 
  function afficheImageInit() {
    $rep1="./images";
    $rep2=opendir($rep1);       
    $i=0;
    while ($file = readdir($rep2)) {
      if (($file!=".")&&($file!="..")) {
        $_SESSION['init'][$i]=$file;
        $i++;
      }
    }
    closedir($rep2);
    $_SESSION['max']=$i-1;
    $_SESSION['position']=0;
  }
 
  switch($_GET['action']) {
    case "init":
      afficheImageInit();
      break;
    case "precedente":
      if($_SESSION['position']>0) {
        $_SESSION['position']--;
      } else {
        $_SESSION['position']=$_SESSION['max'];        
      }
      break;
    case "suivante":
      if($_SESSION['position']<$_SESSION['max']) {  
        $_SESSION['position']++;
      } else {
        $_SESSION['position']=0;
      }    
      break; 
  }
  $position=$_SESSION['position'];
  echo "<img src=images/".$_SESSION['init'][$position].">";
?>

**FremyCompany** · 18/06/2006, 11h48

Simplissime...
Tu ne peux utiliser un Object XmlHttpRequest qu'une SEULE FOIS...
Ca m'étone même que ca marche sur FF...

**Seb06** · 18/06/2006, 12h13

il faudrait donc que le code JS devienne

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
 
 
function actionPage(action) {
  if (window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
  } else {
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (XMLHttpRequestObject) { 
    XMLHttpRequestObject.onreadystatechange = function() 
  { 
    if (XMLHttpRequestObject.readyState == 1) {
      el = document.getElementById("img"); 
      el.innerHTML = "<b>Chargement en cours</b>";    
    } else if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { 
      el = document.getElementById("img"); 
      el.innerHTML = XMLHttpRequestObject.responseText; 
    } 
  } 
  XMLHttpRequestObject.open("GET", "indexphp.php?action="+action, true); 
  XMLHttpRequestObject.send(null);
  }
}