|
|
|
|
Bonjour tout le monde,
Pour créer un objet XMLHttpRequest compatible avec IE et Firefox j'ai trouvé deux codes différents. Un m'a l'air assez simple et je n'ai pas de mal à le comprendre.
Alors que le 2ème, trouvé ici http://www.openweb.eu.org/articles/objet_xmlhttprequest/, à l'air plus complet mais me pose problème à interpréter.
Le PREMIER:
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
xhr_object.open("POST", scriptName, true);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4) {
--etc--
function getHTTPObject()
{
var xmlhttp = false;
/* Compilation conditionnelle d'IE */
/*@cc_on
@if (@_jscript_version >= 5)
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E)
{
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
/* on essaie de créer l'objet si ce n'est pas déjà fait */
if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (e)
{
xmlhttp = false;
}
}
if (xmlhttp)
{
/* on définit ce qui doit se passer quand la page répondra */
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState == 4) /* 4 : état "complete" */
{
if (xmlhttp.status == 200) /* 200 : code HTTP pour OK */
{
/*
Traitement de la réponse.
Ici on affiche la réponse dans une boîte de dialogue.
*/
alert(xmlhttp.responseText);
}
}
}
}
return xmlhttp;
}
/*@cc_on
@if (@_jscript_version >= 5)
-----
@else
xmlhttp = false;
@end @*/
function getHTTPObject()
{
var xmlhttp = false;
/* Compilation conditionnelle d'IE */
/*@cc_on
@if (@_jscript_version >= 5)
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E)
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (e) // là, il faudrait surement autre chose que (e) mais je sais pas quoi...
{
xmlhttp = false;
}
}
}
}
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
Configuration: Windows XP Firefox 2.0.0.12
Salut,
quel est l'intérêt du DEUXIEME code? Est-ce que l'éventualité
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
est importante à prendre en compte?
L'intérêt du deuxième code apparemment c'est qu'il permet de prendre en compte différente manière d'appeler l'objet XMLHttpRequest en fonction de la version de javascript utilisée par le navigateur IE. Pourquoi ? Certainement parce que microsoft à changé sa façon de gérer ça d'une version à une autre. Est ce que cette éventualité est importante à prendre en compte ? Je dirais qu'idéalement oui ^^ mais comme toujours, si tu commence à faire ton site de manière à prendre en compte tous les navigateurs, toutes les éventualités... tu n'as pas fini! C'est long et laborieux, mais au final ton site à plus de chance de pouvoir être visualisé par divers navigateur. C'est donc à toi de peser le pour et le contre. Personnellement, et ce n'est pas parce que j'utilise le premier code que je dis ça (plus par faignantise, et oui :p), je pense que le premier code est suffisant. Est ce qu'il serait possible de compiler tous les try catch ? -> Compiler ?! Tu veux dire enchainer les uns dans les autres ? Attention toutefois, je ne suis pas certain, mais il est quand même préférable, de devoir nommer différemment tes variables lorsque tu enchaines des if / else, try / catch les uns dans les autres (imbrication). Ainsi ton code deviendrais celui ci :
function getHTTPObject()
{
var xmlhttp = false;
/* Compilation conditionnelle d'IE */
/*@cc_on
@if (@_jscript_version >= 5)
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E)
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (A) // Effectivement autre chose, puisque c'est un nom de variable tu peux mettre ce que tu veux tant que tu n'a pas utilisé déjà ce nom de variable dans un même bloc que celui ou tu es (bloc supérieur)
{
xmlhttp = false;
}
}
}
}
Pour ce qui est des '@' en javascript... aucune idée. Je sais qu'en PHP ca permet de "zapper" l'erreur sur l'instruction s'il y en a une (elle n'est donc pas affichée sur le navigateur), mais en javascript je ne sais pas. Puisqu'il s'agit d'un code de "compilation" (cf. le commentaire), j'imagine que ça permet de dire à l'interpréteur javascript : "compile moi ce code". A vérifier donc. _jscript_version : Ce doit etre pour récupérer la version javascript. ~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~ |
Re,
|
1/ /*@cc_on ... @*/ kezako?
<head>
<title>My first XMLHttpRequest</title>
<script language="JavaScript">
function ajax() {
var req = false;
req = new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange = function() {
if (req.readyState == 0) {document.write("0");}
if (req.readyState == 1) {document.write("1");}
if (req.readyState == 2) {document.write("2");}
if (req.readyState == 3) {document.write("3");}
if (req.readyState == 4) {
if (req.status == 200) {treatRep();}
else {alert("Problem: " + req.statusText);}
}
}
req.open("POST", "sql.php", true);
req.send(null);
function treatRep() {
alert(req.responseText);
}
}
</script>
</head>
<body>
<a href="javascript:ajax();">Click me</a>
</body>
</html>
et sql.php (récupère les données dans la bdd et les renvoie à ajax.html) <?php
mysql_connect("localhost", "root", "");
mysql_select_db("test");
$reponse = mysql_query("SELECT * FROM membres");
$donnees = mysql_fetch_array($reponse);
echo $donnees['nom'];
mysql_close();
?>
Quelques bases en javascript, débute en php/mySQL J'essaie de mettre en ligne mon arbre généalogique.
|
Re, je profite d'une pause miam au boulot pour réagir :)
|
Merci pour vos réponses :)
req.send(data); - Je désinstalle ff 2.0.0.13, ré-installe la version 2.0 et là tout fonctionne! - Je vous remets ci-dessous mes 2 pages de code (elles sont un peu différentes que les premières, mais petit à petit j'essaie d'aller... et bien là où je veux aller!) - J'ai essayé avec la ligne return req.readyState; en plus, ça ne change rien (si ce n'est qu'il y a un petit temps d'attente avant l'affichage du résultat de la requête) - Pour IE7 c'est le calme plat... Je vais essayer de résinstaller IE6 pour voir. - J'ai pris note du site http://www.jquery.com, mais n'ayant jamais travaillé avec des bibliothèques ça va me prendre un peu de temps à décortiquer. En tout cas merci! - Est-ce que quelqu'un aurait une adresse d'un page web qui contient une requête XMLHttpRequest qui fonctionne que je puisse l'essayer de chez moi et jeter un oeil... Parce que là je n'y comprends vraiment plus rien!!! Et encore MILLE MERCI! ajax.html <html>
<head>
<title>My first XMLHttpRequest</title>
<script language="JavaScript">
function ajax() {
var req;
if (window.XMLHttpRequest) { // Mozilla
req = new XMLHttpRequest();
if (req.overrideMimeType) { // problème firefox
req.overrideMimeType('text/xml');
}
}
else {
if (window.ActiveXObject) { // C'est Internet explorer < IE7
try { req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
req = null;
}
}
}
}
return req;
}
function envoyerReq(i) {
var req = ajax();
if (req==null) {
alert ("AJAX impossible");
}
else {
req.onreadystatechange = function() {
if (req.readyState != 4) {
document.write(req.readyState);
}
if (req.readyState == 4) {
document.close();
if (req.status == 200) {
document.open();
document.write(req.responseText);
document.close();
}
else {alert("Problem: " + req.statusText);}
}
}
req.open("POST", "sql.php", true);
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
data = "i="+i;
req.send(data);
}
}
</script>
</head>
<body>
<a href="javascript:envoyerReq(3);">3</a>
<a href="javascript:envoyerReq(7);">7</a>
</body>
</html>
sql.php $i = $_POST['i'];
$j = $i * 2;
mysql_connect("localhost", "mon_site", "********");
mysql_select_db("ma_bdd");
$reponse = mysql_query("SELECT * FROM leaf WHERE sosa='$i' OR sosa='$j'");
$donnees = mysql_fetch_array($reponse);
$leaf01[0] = $donnees['nom'];
$leaf01[1] = $donnees['prenom'];
$leaf01[2] = $donnees['naissance'];
$leaf01[3] = $donnees['deces'];
$donnees = mysql_fetch_array($reponse);
$leaf02[0] = $donnees['nom'];
$leaf02[1] = $donnees['prenom'];
$leaf02[2] = $donnees['naissance'];
$leaf02[3] = $donnees['deces'];
echo $leaf01[0];
echo "<br>";
echo $leaf01[1];
echo "<br>";
echo $leaf01[2];
echo "<br>";
echo $leaf01[3];
echo "<br><br>";
echo $leaf02[0];
echo "<br>";
echo $leaf02[1];
echo "<br>";
echo $leaf02[2];
echo "<br>";
echo $leaf02[3];
mysql_close();
?>
Quelques bases en javascript, débute en php/mySQL J'essaie de mettre en ligne mon arbre généalogique. |
Ben écoute je comprends pas, moi cette fonction :
function callScript ( scriptName, args ){
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
xhr_object.open("POST", scriptName, true);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4) {
//alert(xhr_object.responseText); // DEBUG MODE
//document.write(xhr_object.responseText);
eval(xhr_object.responseText);
}
return xhr_object.readyState;
}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr_object.send(args);
}
Marche très très bien, je l'utilise sur plusieurs site , je viens de mettre à jour FF et ça fonctionne toujours. La petite différence que je vois encore avec ton script, c'est que j'ouvre avant de setter la fonction du onreadystatechange. Essai de mettre l'instruction 'open' avant celle de onreadystatechange = function () {... pour voir ce que ça donne. ~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~ |
Ha! C'était ça! (du moins pour ff) J'ai mis la fonction open avant onreadystatechange et ça marche dans la nouvelle version de ff. J'aurais vraiment pas cru qu'un ptit truc comme ça puisse tout faire planter, dans une seule version en plus... Vraiment MERCI kij :)))
|
Bon le problème ne vient apparemment pas du navigateur mais bien de mon script... Il faut que je ressorte mes bouquins et dès que j'y vois plus clair je reviens faire un ptit bilan ici.
|
Bon j'ai toujours pas réussi à faire une XMLHttpRequest qui fonctionne, mais j'ai résolu mon problème autrement, finalement j'ai même pas besoin d'AJAX (bien la peine de mettre pris la tête la dessus). Mais je m'y replonge dès que je peux.
Quelques bases en javascript, débute en php/mySQL
|
Bonjours, moi j'ai un petit soucis, j'ai repris le deuième code, ca fonctionne correctement sous firefox, mais sous IE j'ai droit à une erreur : 'document.getElementById(...)' a la valeur NULL ou n'est pas un objet
|
Bien sur l'erreur que tu as es normale, il s'agit de cette ligne :
document.getElementById('babble').innerHTML=xmlhttp.responseText;
qui est un exemple de ce qu'il peut être fait au retour de l'appel du script PHP. Si tu n'as aucun élément (par exemple une DIV) dans ta page qui se nomme "babble", une erreur javascript aura lieu. Il y aurait fallu corriger comme ceci pour ne pas avoir de faute :
if ( document.getElementById("babble") )
document.getElementById('babble').innerHTML=xmlhttp.responseText;
~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~ |
Salut!
<div id="babble"> <? echo time(); ?> </div> C'est très curieux ... Quelques bases en javascript, débute en php/mySQL J'essaie de mettre en ligne mon arbre généalogique. |
Certes il y en a bien une :) seulement la fonction javascript est appellée :
rafraichir(); Avant que celle ci soit définie dans la page. Le mieux est donc d'appeler la fonction javascript après avoir construit le Body, comme ceci : <body> <div id="babble"> <? echo time(); ?> </div> </body> <script language="javascript"> rafraichir(); </script> ~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~ |
Ok! je comprends...
|