web-dev-qa-db-fra.com

Différence entre AJAX demande et demande régulière du navigateur

Existe-t-il une différence entre une demande AJAX et une demande directe du navigateur (en termes de mode d'appel et de chargement d'une page Web)?

En d'autres termes, je veux dire: une demande directe côté serveur est-elle gérée différemment d'une demande côté client (initiée par le navigateur)?

javascriptajaxxmlhttprequest
31
Qqwy

Une demande AJAX est identique à une demande de navigateur "normale" en ce qui concerne le serveur, à l'exception des en-têtes HTTP potentiellement légèrement différents. par exemple. chrome envoie:

X-Requested-With:XMLHttpRequest

Je ne sais pas si cet en-tête est normalisé ou non, ou s'il est différent dans chaque navigateur ou même inclus du tout dans chaque navigateur.

edit: Je reprends ça, cet en-tête est envoyé par jQuery (et probablement par d’autres bibliothèques JS), pas par le navigateur, comme en témoigne:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/');
xhr.send();

qui envoie:

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie: ....
Host:stackoverflow.com
If-Modified-Since:Sat, 31 Dec 2011 01:57:24 GMT
Referer:http://stackoverflow.com/questions/8685750/how-does-an-ajax-request-differ-from-a-normal-browser-request/8685758
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.12 Safari/535.11

ce qui m'amène à conclure que par défaut il n'y a absolument aucune différence.

24
Mark Kahn

Il peut y avoir des différences d'en-tête, mais la principale différence de comportement concerne le client. 

Lorsque le navigateur effectue une requête régulière comme dans window.location.href = "index.html", il efface la fenêtre en cours et charge la réponse du serveur dans la fenêtre.

Avec une requête ajax, la fenêtre/le document en cours n'est pas affecté et le code javascript peut examiner les résultats de la requête et faire ce qu'il veut avec ces résultats (insérer HTML dynamiquement dans la page, analyser JSON et l'utiliser comme logique de page , etc...).

Le serveur ne fait rien de différent. Il indique simplement comment le client traite la réponse aux deux demandes.

28
jfriend00

Certaines bibliothèques côté client populaires telles que jQuery incluent l'en-tête X-Requested-With dans leurs demandes et le définissent sur XMLHttpRequest pour les marquer comme AJAX. 

Cela semble avoir été jugé assez standard il y a quelques années (probablement en raison de l'énorme popularité de jQuery et de sa présence dans presque tous les sites Web), de nombreux frameworks côté serveur ont même des aides qui vérifient la présence de cet en-tête dans la requête reçue. pour vous:

ASP.NET MVC 5:

HttpRequestBase.IsAjaxRequest()

Django:

HttpRequest.is_ajax()

Flacon:

flask.Request.is_xhr

Cependant, il semble qu'avec la fin du règne de jQuery dans le monde frontal et la normalisation de l'API fetch et la montée en puissance d'autres bibliothèques modernes côté client qui n'ajoutent aucun en-tête à cet effet par défaut, le modèle est tombé dans l'obsolescence également dans le backend; avec ASP.NET MVC n'incluant pas l'aide dans les versions plus récentes et Flask le marquant comme obsolète.

0
slashCoder

Bien que je vous croie, weblogic a quelque chose de totalement bizarre: J'écris une application utilisant le framework ExtJS qui appelle AJAX.

En effectuant j_security_check, je reçois toujours des erreurs lorsque je le fais à la manière AJAX: Weblogic dit: 

unauthorized: var submitButton = new Ext.Button({
            text: 'Logon',
            formBind: true, //only enabled once the form is valid
            disabled: true,
            handler: function() {                
                Ext.Ajax.request({
                    url: "j_security_check",
                    params: {
                        j_username: dlg.getForm().findField('j_username').getValue(),
                        j_password: dlg.getForm().findField('j_password').getValue()
                    },
                    method: "GET"
                });
            }
        });

Cela échoue.

Quand j'émets ceci: 

window.location.href = "j_security_check?j_username=" + dlg.getForm().findField('j_username').getValue() + "&j_password=" + dlg.getForm().findField('j_password').getValue();

Ça marche! Bizarre.

0
Lawrence