À propos de jQuery ajax - Comment utiliser ajax()

Lors de l'apprentissage d'ajax, vous rencontrerez le problème de l'utilisation d'ajax(). Ensuite, je présenterai en détail l'utilisation spécifique d'ajax().

Exemple

Charger un morceau de texte via AJAX :

Code jQuery :

$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});

Code HTML :

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Content</button>

Définition et utilisation

La méthode ajax() charge les données distantes via une requête HTTP.

Cette méthode est l'implémentation AJAX sous-jacente de jQuery. Pour des implémentations de haut niveau simples et faciles à utiliser, voir $.get, $.post, etc. $.ajax() renvoie l'objet XMLHttpRequest qu'il a créé. Dans la plupart des cas, vous n'aurez pas besoin de manipuler cette fonction directement, sauf si vous devez manipuler des options moins couramment utilisées pour plus de flexibilité.

Dans le cas le plus simple, $.ajax() peut être utilisé directement sans aucun paramètre.

Remarque : Toutes les options peuvent être définies globalement via la fonction $.ajaxSetup().

Syntaxe

jQuery.ajax([settings])

Paramètres

Description

paramètres

Facultatif. Une collection de paires clé-valeur utilisées pour configurer les requêtes Ajax.

La valeur par défaut de n'importe quelle option peut être définie via $.ajaxSetup().

Paramètres

options

Type : Objet

Facultatif. Paramètres de requête AJAX. Toutes les options sont facultatives.

async

Type : Booléen

Valeur par défaut : vrai. Par défaut, toutes les requêtes sont asynchrones. Si vous devez envoyer des requêtes synchrones, définissez cette option sur false.

Notez que les requêtes synchrones verrouillent le navigateur et que les autres opérations utilisateur doivent attendre que la requête soit terminée avant de pouvoir être exécutées.

beforeSend(XHR)

Type : Fonction

Fonction qui peut modifier l'objet XMLHttpRequest avant d'envoyer la requête, comme l'ajout d'en-têtes HTTP personnalisés.

L'objet XMLHttpRequest est le seul paramètre.

C'est un événement de l'Ajax. Si false est renvoyé, cette requête ajax peut être annulée.

cache

Type : Booléen

Valeur par défaut : vrai, la valeur par défaut est fausse lorsque dataType est script et jsonp. Définissez sur false pour ne pas mettre cette page en cache.

Nouvelles fonctionnalités dans jQuery 1.2.

complet(XHR, TS)

Type : Fonction

Une fois la demande terminéeFonction de rappel (appelée après la réussite ou l'échec de la demande) .

Paramètres : objet XMLHttpRequest et une chaîne décrivant le type de requête.

C'est un événement de l'Ajax.

contentType

Type : String

Valeur par défaut : "application/x-www-form-urlencoded". Type d'encodage du contenu lors de l'envoi d'informations au serveur.

La valeur par défaut convient à la plupart des situations. Si vous transmettez explicitement un type de contenu à $.ajax() alors il sera définitivement envoyé au serveur (même s'il n'y a aucune donnée à envoyer).

context

Type : Objet

Cet objet est utilisé pour définir le contexte des fonctions de rappel liées à Ajax. En d'autres termes, laissez ceci dans la fonction de rappel pointer vers cet objet (si ce paramètre n'est pas défini, alors cela pointera vers le paramètre options passé lors de l'appel de cette requête AJAX). Par exemple, spécifier un élément DOM comme paramètre de contexte définira le contexte de la fonction de rappel de réussite sur cet élément DOM.

Comme ceci :

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});

données

Type : Chaîne

Données envoyées au serveur. Sera automatiquement converti au format de chaîne de demande. Ajouté à l'URL dans les requêtes GET. Consultez la description de l’option processData pour désactiver cette conversion automatique. Doit être au format Clé/Valeur. S'il s'agit d'un tableau, jQuery attribuera automatiquement le même nom à différentes valeurs. Par exemple, {foo:["bar1", "bar2"]} est converti en '&foo=bar1&foo=bar2'.

dataFilter

Type : Fonction

Une fonction pour prétraiter les données originales renvoyées par Ajax. Fournissez deux paramètres, data et type : data sont les données d'origine renvoyées par Ajax et type est le paramètre dataType fourni lors de l'appel de jQuery.ajax. La valeur renvoyée par la fonction sera ensuite traitée par jQuery.

dataType

Type : String

Le type de données qui devrait être renvoyé par le serveur. S'il n'est pas spécifié, jQuery effectuera automatiquement des jugements intelligents basés sur les informations MIME du package HTTP. Par exemple, le type XML MIME est reconnu comme XML. Dans la version 1.4, JSON générera un objet JavaScript et le script exécutera le script. Les données renvoyées par le serveur seront ensuite analysées en fonction de cette valeur et transmises à la fonction de rappel. Valeurs disponibles :

"xml" : Renvoie un document XML pouvant être traité avec jQuery.

"html" : renvoie les informations HTML en texte brut ; la balise de script incluse sera exécutée une fois insérée dans le dom.

"script" : renvoie le code JavaScript en texte brut. Les résultats ne sont pas automatiquement mis en cache. Sauf si le paramètre "cache" est défini. Remarque : lors de requêtes distantes (pas sous le même domaine), toutes les requêtes POST seront converties en requêtes GET. (Car la balise du script DOM sera utilisée pour le chargement)

"json" : renvoie les données JSON.

"jsonp" : format JSONP. Lors de l'appel d'une fonction à l'aide d'un formulaire JSONP, tel que "myurl?callback=?", jQuery remplacera automatiquement ? par le nom de fonction correct pour exécuter la fonction de rappel.

"text": Renvoie une chaîne de texte brut

erreur

Type : Fonction

Valeur par défaut : jugement automatique (xml ou html). Cette fonction est appelée lorsque la requête échoue.

a les trois paramètres suivants : objet XMLHttpRequest, message d'erreur et (facultatif) objet d'exception capturé.

Si une erreur se produit, le message d'erreur (le deuxième paramètre) peut être "timeout", "error", "notmodified" et "parsererror" en plus de null.

C'est un événement de l'Ajax.

global

Type : Booléen

S'il faut déclencher l'événement AJAX global. Valeur par défaut : vrai. La définition sur false ne déclenchera pas d'événements AJAX globaux tels que ajaxStart ou ajaxStop qui peuvent être utilisés pour contrôler différents événements Ajax.

ifModified

Type : Booléen

Obtenir de nouvelles données uniquement lorsque les données du serveur changent. Valeur par défaut : faux. Utilisez les informations d’en-tête Last-Modified du paquet HTTP pour le déterminer. Depuis jQuery 1.4, il vérifie également le « etag » spécifié par le serveur pour s'assurer que les données n'ont pas été modifiées.

jsonp

Type : String

Réécrivez le nom de la fonction de rappel dans une requête jsonp. Cette valeur est utilisée pour remplacer la partie "callback" du paramètre URL dans une requête GET ou POST telle que {jsonp:'onJsonPLoad'} qui entraînera la transmission de "onJsonPLoad=?"

jsonpCallback

Type : String

Spécifiez un nom de fonction de rappel pour la requête jsonp. Cette valeur sera utilisée à la place du nom de fonction aléatoire généré automatiquement par jQuery. Ceci est principalement utilisé pour permettre à jQuery de générer des noms de fonctions uniques, ce qui facilite la gestion des requêtes, et fournit également des fonctions de rappel et une gestion des erreurs. Vous pouvez également spécifier ce nom de fonction de rappel lorsque vous souhaitez que le navigateur mette en cache les requêtes GET.

mot de passe

Type : String

Mot de passe utilisé pour répondre à la demande d'authentification d'accès HTTP

processData

Type : Booléen

Valeur par défaut : vrai. Par défaut, les données transmises via l'option data, s'il s'agit d'un objet (techniquement parlant, tant qu'il ne s'agit pas d'une chaîne), seront traitées et converties en chaîne de requête pour correspondre au type de contenu par défaut "application/x -www-form-urlencoded" ". Définissez sur false si vous souhaitez envoyer des informations sur l'arborescence DOM ou d'autres informations que vous ne souhaitez pas convertir.

scriptCharset

Type : String

Uniquement lorsque le type de données est "jsonp" ou "script" lorsqu'il est demandé, et que le type est "GET", il sera utilisé pour forcer modification du jeu de caractères. Généralement utilisé uniquement lorsque les encodages de contenu local et distant sont différents.

succès

Type : Fonction

Fonction de rappel une fois la demande réussie.

Paramètre : Données renvoyées par le serveur et traitées selon le paramètre dataType ; une chaîne décrivant le statut.

C'est un événement de l'Ajax.

traditionnel

Type : Booléen

Définissez sur true si vous souhaitez sérialiser les données de manière traditionnelle. Veuillez vous référer à la méthode jQuery.param dans la catégorie Outils.

timeout

Type : Nombre

Définissez le délai d'expiration de la demande (millisecondes). Ce paramètre remplace le paramètre global.

type

Type : Chaîne

Par défaut : "GET"). Méthode de requête ("POST" ou "GET"), la valeur par défaut est "GET". Remarque : D'autres méthodes de requête HTTP telles que PUT et DELETE peuvent également être utilisées, mais ne sont prises en charge que par certains navigateurs.

url

Type : Chaîne

Valeur par défaut : Adresse de la page actuelle. L'adresse à laquelle envoyer la demande.

nom d'utilisateur

Type : Chaîne

Nom d'utilisateur utilisé pour répondre aux demandes d'authentification d'accès HTTP.

xhr

Type : Fonction

Doit renvoyer un objet XMLHttpRequest. La valeur par défaut est ActiveXObject sous IE et XMLHttpRequest sinon. Utilisé pour remplacer ou fournir un objet XMLHttpRequest amélioré. Ce paramètre n'était pas disponible avant jQuery 1.3.

Fonction de rappel

Si vous souhaitez traiter les données obtenues par $.ajax(), vous devez utiliser la fonction de rappel : beforeSend, error, dataFilter, success, complete.

beforeSend

est appelé avant d'envoyer la requête et transmet un XMLHttpRequest en tant que paramètre.

error

est appelée lorsqu'une erreur de requête se produit. En transmettant l'objet XMLHttpRequest, une chaîne décrivant le type d'erreur et un objet d'exception (le cas échéant)

dataFilter

est appelé une fois la requête réussie. Transmettez les données renvoyées et la valeur du paramètre "dataType". Et doit renvoyer de nouvelles données (éventuellement traitées) transmises à la fonction de rappel de réussite.

succès

Appelé après demande. Transmettez les données renvoyées et une chaîne contenant le code de réussite.

complete

Cette fonction est appelée lorsque la requête est terminée, quel que soit le succès ou l'échec. Transmettez l'objet XMLHttpRequest et une chaîne contenant un code de réussite ou d'erreur.

Type de données

La fonction $.ajax() s'appuie sur les informations fournies par le serveur pour traiter les données renvoyées. Si le serveur signale que les données renvoyées sont XML, les résultats renvoyés peuvent être itérés à l'aide de méthodes XML normales ou de sélecteurs jQuery. Si d'autres types sont visibles, tels que HTML, les données sont traitées comme du texte.

Vous pouvez également spécifier d'autres méthodes de traitement des données via l'option dataType. En plus du XML simple, vous pouvez également spécifier du HTML, json, jsonp, un script ou du texte.

Parmi eux, les données renvoyées par les types texte et xml ne seront pas traitées. Les données transmettent simplement l'attribut ResponseText ou ResponseHTML de XMLHttpRequest à la fonction de rappel de réussite.

Remarque : Nous devons nous assurer que le type MIME signalé par le serveur Web correspond au type de données que nous sélectionnons. Par exemple, dans le cas de XML, le serveur doit déclarer text/xml ou application/xml pour obtenir des résultats cohérents.

S'il est spécifié comme type HTML, tout JavaScript intégré sera exécuté avant que le HTML ne soit renvoyé sous forme de chaîne. De même, si le type de script est spécifié, le JavaScript généré côté serveur sera exécuté en premier, puis le script sera renvoyé sous forme de données texte.

Si elles sont spécifiées comme type json, les données obtenues seront analysées comme un objet JavaScript et l'objet construit sera renvoyé comme résultat. Pour y parvenir, il tente d’abord d’utiliser JSON.parse(). Si le navigateur ne le prend pas en charge, une fonction est utilisée pour le construire.

Les données JSON sont une sorte de données structurées qui peuvent être facilement analysées via JavaScript. Si le fichier de données obtenu est stocké sur un serveur distant (avec des noms de domaine différents, c'est-à-dire une acquisition de données inter-domaines), vous devez utiliser le type jsonp. L'utilisation de ce type crée un paramètre de chaîne de requête callback=? qui est ajouté à l'URL demandée. Le serveur doit ajouter le nom de la fonction de rappel avant les données JSON afin de compléter une requête JSONP valide. Si vous souhaitez spécifier le paramètre nom de la fonction de rappel pour remplacer le rappel par défaut, vous pouvez définir le paramètre jsonp de $.ajax().

Remarque : JSONP est une extension du format JSON. Il nécessite du code côté serveur pour détecter et gérer les paramètres de chaîne de requête.

Si le type script ou jsonp est spécifié, alors lorsque les données sont reçues du serveur, la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a est en fait utilisée à la place de l'objet XMLHttpRequest. Dans ce cas, $.ajax() ne renvoie plus d'objet XMLHttpRequest et ne transmet pas les fonctions de gestion des événements, telles que beforeSend.

Envoi des données au serveur

Par défaut, les requêtes Ajax utilisent la méthode GET. Si vous souhaitez utiliser la méthode POST, vous pouvez définir la valeur du paramètre de type. Cette option affecte également la manière dont le contenu de l'option de données est envoyé au serveur. L'option

data peut contenir soit une chaîne de requête, telle que key1=value1&key2=value2, soit un mappage, tel que {key1: 'value1', key2: 'value2'} . Si cette dernière forme est utilisée, le renvoi de données est converti en chaîne de requête. Ce traitement peut également être contourné en définissant l'option processData sur false. Cela peut ne pas être approprié si nous souhaitons envoyer un objet XML au serveur. Et dans ce cas, nous devrions également modifier la valeur de l'option contentType pour remplacer le application/x-www-form-urlencoded par défaut par d'autres types MIME appropriés.

Options avancées

L'option globale est utilisée pour empêcher de répondre aux fonctions de rappel enregistrées, telles que .ajaxSend ou ajaxError, et des méthodes similaires. Ceci est utile dans certains cas, par exemple lorsque les requêtes envoyées sont très fréquentes et courtes, et cela peut être désactivé dans ajaxSend.

Si le serveur nécessite une authentification HTTP, un nom d'utilisateur et un mot de passe peuvent être définis via les options de nom d'utilisateur et de mot de passe.

Les requêtes Ajax sont limitées dans le temps, de sorte que les avertissements d'erreur sont capturés et traités et peuvent être utilisés pour améliorer l'expérience utilisateur. Le paramètre de délai d'attente de la requête est généralement laissé à sa valeur par défaut ou est défini globalement via jQuery.ajaxSetup. L'option de délai d'attente est rarement réinitialisée pour une requête spécifique.

Par défaut, la requête est toujours envoyée, mais le navigateur peut récupérer des données de son cache. Pour désactiver l'utilisation des résultats mis en cache, définissez le paramètre cache sur false. Si vous souhaitez signaler une erreur si les données n'ont pas changé depuis la dernière requête, vous pouvez définir ifModified sur true.

scriptCharset permet de définir un jeu de caractères spécifique pour les requêtes avec des balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a, utilisées pour les scripts ou les données similaires jsonp. Ceci est particulièrement utile lorsque les jeux de caractères du script et de la page sont différents.

La première lettre d'Ajax est la première lettre d'asynchrone, ce qui signifie que toutes les opérations sont parallèles et que l'ordre d'achèvement n'a aucun rapport. Le paramètre async de $.ajax() est toujours défini sur true, ce qui indique qu'un autre code peut encore être exécuté après le démarrage de la requête. Il est fortement déconseillé de définir cette option sur false, ce qui signifie que toutes les requêtes ne sont plus asynchrones, ce qui entraînera également un blocage du navigateur.

La fonction $.ajax renvoie l'objet XMLHttpRequest qu'elle crée. Normalement, jQuery gère et crée simplement cet objet en interne, mais les utilisateurs peuvent également transmettre un objet xhr auto-créé via l'option xhr. L'objet renvoyé est généralement ignoré, mais fournit toujours une interface de bas niveau pour observer et manipuler la requête. Par exemple, appeler .abort() sur un objet peut suspendre une requête avant qu'elle ne se termine.

Cet article explique en détail l'utilisation d'ajax() et les connaissances associées. Si vous souhaitez en savoir plus sur ajax, veuillez faire attention au site Web php chinois.

Recommandations associées :

Explication détaillée du formulaire d'opération dynamique jQuery+ajax tr étapes td

jquery+ajax le rend adaptatif lors de l'application iframe Fortement

JSONP résout le problème inter-domaines ajax (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!