Objet XMLHttpRequest ne se crée pas

Version imprimable

Bonjour,

Je voudrais accéder à un fichier php via un XMLHttpRequest, mais celui-ci ne se crée pas...

Y-a-t'il une bibliothèque à charger avant ? Ou quelque chose de mal fait ?

Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
 function AfficheCoordonnees(idClient, idAgent){
 
                   xhr = new XMLHttpRequest(); 
                // Ici on va voir comment faire du post
                xhr.open("GET","../php/ajax-coord.php",true);
                // ne pas oublier ça pour le post
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // ne pas oublier de poster les arguments
                xhr.send("idClient="+idClient+"&idAgent="+idAgent);
 alert(xhr.status);
            }

Aucune consultation du fichier ajax-coord.php, et l'alerte me renvoie sans cesse "0"....

Pouvez-vous m'aider svp ?

Merci d'avance

Salut,

Le retour de l'objet XMLHttpRequest doit être géré dans le callback readystatechange et pas ailleurs :
Code:

1 2 3 4 5 6 7 xhr.onreadystatechange = function () { if(xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } } xhr.send("idClient="+idClient+"&idAgent="+idAgent);

05/04/2020, 22h58
Watilin

Citation:

Envoyé par yves51

Y-a-t'il une bibliothèque à charger avant ?

Non, XMLHttpRequest est pris en charge nativement par tous les navigateurs.

Citation:

Ou quelque chose de mal fait ?

À tout hasard, si ton script est en mode strict, alors ton instruction xhr = ... échoue car la variable n’est pas déclarée. Dans tous les cas, je te conseille de passer en mode strict, surtout si du débutes, ça ne coûte pas grand chose et ça fait prendre de bonnes habitudes ;)
05/04/2020, 23h47
yves51

Merci pour les conseils

J'ai pu avancer, le fichier ajax-coord.php est effectivement ouvert avec les paramètres, mais j'ai toujours un pb : à aucun moment je ne me retrouve dans la condition
if(xhr.readyState == 4 && xhr.status == 200)

Quand je lance la fonction, j'obtiens une alerte (

Code:

alert(xhr.readyState + " - " + xhr.status

)) avec "4 - 0" - mais jamais je n'obtiens le 'ok'.

D'où cela peut venir ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function AfficheCoordonnees(idClient, idAgent){ var xhr = getXhr(); xhr.open("POST","../php/ajax-coord.php",true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send("idClient="+idClient+"&idAgent="+idAgent); xhr.onreadystatechange = function() { alert(xhr.readyState + " - " + xhr.status); if(xhr.readyState == 4 && xhr.status == 200) { alert('ok'); } } }

06/04/2020, 10h31
yves51
D'autre part, même si la requête d'enregistrement d'une nouvelle ligne fonctionne dans le fichier php, je renvoie ensuite un texte à l'aide d'un echo.

Cependant aucune valeur ne ressort de xhr.responseText...
Code:

1 2 3 4 if(xhr.readyState == 4 ) { alert(xhr.responseText); }
L'alerte fonctionne, mais elle est vide...
07/04/2020, 10h14
Watilin

Quand status = 0, ça signifie que la requête n’est pas partie, sinon tu aurais un code serveur, même en cas d’erreur (par exemple 404). Souvent c’est le signe que la requête a été bloquée par la politique de même origine (same origin policy), et dans ce cas tu aurais un message d’erreur dans la console.

Au risque d’enfoncer des portes ouvertes, vérifie également que tu es bien en http: (ou https:) sur un serveur local. Si tu es en file:, ne cherche pas plus loin, le problème est là :)

Sinon, je m’écarte un peu du sujet mais j’ai remarqué que tu as modifié les triple-égal (===) de Toufik83. Il faut savoir que le double-égal en JavaScript est traître : il fait de la conversion implicite de type, et peut causer des résultats inattendus. Pour éviter de futurs maux de tête, prends l’habitude d’utiliser le triple-égal, c’est ton ami ;) (Plus de détails : Opérateurs de comparaison)
07/04/2020, 12h05
yves51

Merci pour tout, je regarde cela !
07/04/2020, 14h18
yves51

Effectivement j'avais réduit à == pour me laisser plus de chances, et surtout enlevé le xhr.status === 200. Ca a fonctionné pendant un moment, puis non.

Je vois par endroits que cela pourrait venir des mots de passe et login utilisateurs...

La page initale est accessible par un session avec login et mdp, mais pas la page ajax-coord.php. Dois-je néanmoins passer les paramètres ?
07/04/2020, 14h23
yves51

Je précise qu'à chaque fois que le script ne fonctionne pas, le fichier ajax-coord.php est pourtant bien ouvert, la requête créant un nouvel enregistrement est bien lancée à chaque fois...
Cependant je ne me retrouve pas dans la condition xhr.readyState === 4 && xhr.status === 200, et le code de validation n'est pas lancé...
07/04/2020, 14h30
yves51

j'ai bien essayé

Code:

xhr.open("POST","https://www.coupefile-immobilier.pro/js/ajax-coord.php",false,"user", "mdp");

mais pas plus de résultat...
08/04/2020, 11h49
Watilin

Citation:

Envoyé par yves51

Effectivement j'avais réduit à == pour me laisser plus de chances, et surtout enlevé le xhr.status === 200. Ca a fonctionné pendant un moment, puis non.

Je vois par endroits que cela pourrait venir des mots de passe et login utilisateurs...

La page initale est accessible par un session avec login et mdp, mais pas la page ajax-coord.php. Dois-je néanmoins passer les paramètres ?

Ça dépend s’il s’agit d’une authentification HTTP (le genre où le navigateur ouvre une fenêtre spéciale pour demander les identifiants, et le genre qui renvoie des erreurs 401) ou si c’est une session gérée par PHP.

Citation:

Envoyé par yves51

j'ai bien essayé

Code:

xhr.open("POST","https://www.coupefile-immobilier.pro/js/ajax-coord.php",false,"user", "mdp");

mais pas plus de résultat...

Cette syntaxe est prévue pour l’authentification HTTP.

Dans le cas d’une session PHP, c’est toi (ou plutôt ton code serveur) qui gère l’authentification « à la main », et les identifiants sont passés comme des paramètres GET ou POST ordinaires.

Je suis en train de me dire que peut-être le problème vient d’alert. Je n’utilise plus cette fonction depuis un moment et je ne sais pas comment les navigateurs gèrent ça aujourd’hui. Il n’y a encore pas si longtemps, un appel à alert interrompait le script jusqu’à ce que tu cliques sur « OK ». Aujourd’hui, peut-être que ton script, en particulier la requête ajax, continue en arrière-plan, et donc quand l’alerte indique que status est 0, en fait sa valeur a changé entre temps.
(Je ne sais pas si je suis très clair.)
Il faut savoir aussi que le readyState est susceptible de changer plusieurs fois et donc de provoquer plusieurs appels à onreadystatechange. Tu trouveras peut-être plus pratique d’utiliser onload à la place.

Dans tous les cas, remplace alert() par console.log() et ouvre la console pour voir les messages ;)
08/04/2020, 14h38
yves51

Merci, c'est vrai que je suis peu habitué à utiliser la console....

Voilà ce qu'elle m'indique :

Citation:

Access to XMLHttpRequest at 'ajax-coord.php' from origin 'site.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

J'ai recherché sur les forums mais je ne vois pas exactement comment intégrer le 'Access-Control-Allow-Origin' dans mon code... Dois-je indiquer l'adresse globale du site ou la page php, ou la page d'origine ?

Est-ce que cela passe par xhr.setRequestHeader ?

Je précise que les 2 fichiers sont pourtant bien sur le même site...

Merci pour les retours en tout cas
08/04/2020, 22h33
Watilin
Citation:

Envoyé par yves51

Je précise que les 2 fichiers sont pourtant bien sur le même site...

Il doit y avoir une différence, sinon la requête n’aurait pas été bloquée. Vérifie entre autres qu’il n’y a pas un mélange de tantôt http:, tantôt https:, et si la partie www. est toujours présente ou pas.
Les règles qui définissent si deux sites sont différents ou pas sont résumées ici : origine.

L’ajout de l’en-tête Access-Control-Allow-Origin se fait côté serveur. On ne peut pas faire ça côté client, ça fait partie du mécanisme de sécurité. En PHP, on utilise la fonction header(). Si tu prévois de faire une API publique, utilise l’origine joker * ; sinon, mets l’origine de la page depuis laquelle la requête ajax est faite.
Par exemple, si la page qui fait la requête ajax est sous l’origine https://www.coupefile-immobilier.pro, ton code PHP contiendra ceci :
Code:

1 2 3 <?php header('Access-Control-Allow-Origin: https://www.coupefile-immobilier.pro'); header('Vary: Origin');
L’en-tête Vary est là pour éviter des problèmes de cache, comme expliqué sur le MDN : Access-Control-Allow-Origin.