Avec l'aide de XMLHttpRequest, le navigateur peut interagir avec le serveur sans actualiser la page entière. C'est ce qu'on appelle l'Ajax (JavaScript asynchrone et XML). Ajax peut offrir aux utilisateurs une expérience utilisateur plus riche.
Les requêtes Ajax sont pilotées par JavaScript. Une requête est envoyée à l'URL via du code JavaScript. Lorsque le serveur répond, une fonction de rappel sera déclenchée. Les informations renvoyées par le serveur peuvent être traitées dans la fonction de rappel. Étant donné que l'ensemble du processus d'envoi des demandes et des réponses est asynchrone, les autres codes Javascript de la page continueront à s'exécuter pendant cette période sans interruption.
jQuery fournit certainement un bon support pour Ajax, et il élimine également les différences douloureuses dans la prise en charge d'Ajax entre les différents navigateurs. Il fournit non seulement la méthode $.ajax() complète, mais également davantage de fonctions telles que $.get(), $.getScript(), $.getJSON(), $.post() et $().load. (), etc. Pour une méthode simple.
Bien qu'il s'appelle Ajax, de nombreuses applications Ajax n'utilisent pas XML, en particulier les applications jQuery Ajax. La plupart d'entre elles n'utilisent pas XML à la place, elles sont plus couramment utilisées : texte brut, HTML et JSON (JavaScript) Object Notation) ; .
Généralement, en raison des restrictions de la politique de même origine (même protocole, même nom de domaine, même port), Ajax ne peut pas effectuer de requêtes inter-domaines, à moins qu'une solution telle que JSONP (JSON with Padding) ne soit utilisée pour obtenir certaines requêtes concernées. Fonctionnalité inter-domaines limitée.
Quelques concepts importants sur l'Ajax
GET vs POST, ce sont les deux méthodes les plus couramment utilisées pour envoyer des requêtes au serveur. Une bonne compréhension des différences entre ces deux méthodes est très importante pour le développement Ajax.
La méthode GET est généralement utilisée pour effectuer certaines opérations non destructives (c'est-à-dire obtenir uniquement des informations du serveur sans modifier les informations sur le serveur). Par exemple, les services de requêtes de recherche utilisent généralement des requêtes GET. De plus, les requêtes GET peuvent également être mises en cache par le navigateur, ce qui peut entraîner des problèmes imprévisibles. Généralement, les requêtes GET ne peuvent envoyer des données au serveur que via des chaînes de requête.
La méthode POST est généralement utilisée pour effectuer certaines opérations destructrices sur le serveur (c'est-à-dire modifier les données sur le serveur). Par exemple, lorsque vous publiez un article de blog, vous devez utiliser une requête POST. Contrairement aux requêtes GET, les requêtes POST ne présentent pas de problèmes de mise en cache. Dans les requêtes POST, la chaîne de requête faisant partie de l'URL peut également soumettre des données au serveur, mais cette méthode n'est pas recommandée. Toutes les données doivent être envoyées séparément de l'URL.
Type de données, jQuery nécessite généralement de spécifier le type de données renvoyé par le serveur. Dans certains cas, le type de données peut déjà être inclus dans le nom de la méthode, comme $.getJSON(). available Partie de l'objet configuré qui sera éventuellement utilisée comme paramètre de la méthode $.ajax(). Les types de données incluent généralement les éléments suivants :
Exécution asynchrone, le A en Ajax fait référence à asynchrone. À ce stade, il peut être difficile pour de nombreux débutants en jQuery de comprendre ce qu'est l'asynchrone, car les requêtes Ajax sont asynchrones par défaut et les informations renvoyées par le serveur ne sont pas immédiatement disponibles. Toutes les informations renvoyées par le serveur ne peuvent être traitées que dans une fonction de rappel. Par exemple, le code suivant est erroné :
var response; $.get('foo.php', function(r) { response = r; }); console.log(response); // undefined!
L'approche correcte doit être de traiter les données renvoyées par le serveur dans la fonction de rappel. La fonction de rappel n'est exécutée que lorsque la requête Ajax est terminée avec succès. Ce n'est qu'à ce moment que les données du serveur peuvent être obtenues : <🎜. >
$.get('foo.php', function(response) { console.log(response); });
同源策略及 JSONP,前面已经说过,一般情况下 Ajax 的请求会被限制在相同协议(http 或 https)、相同端口、相同域名下才能正确执行,但是 HTML 的