Explication détaillée de jQuery Ajax
Explication détaillée de jQuery Ajax
jQuery fournit plusieurs fonctions pour l'envoi de requêtes Ajax. La fonction principale et la plus complexe est jQuery.ajax (options), toutes les autres. Les fonctions Ajax en sont un appel simplifié.Nous pouvons utiliser ce résultat lorsque nous voulons contrôler entièrement Ajax, sinon il est plus pratique d'utiliser des méthodes simplifiées telles que get, post,load, etc. Donc jQuery.ajax( options ) La méthode est introduit en dernier. Introduisons d'abord la méthode de chargement la plus simple :
1. Renvoie : jQuery wrapper setDescription : La
méthode de chargement peut charger le code du fichier HTML distant et l'insérer dans le DOM.
La méthode GET est utilisée par défaut et la méthode Post est utilisée si le paramètre data est passé.
- Se convertit automatiquement en méthode POST lors du passage de paramètres supplémentaires. Dans jQuery 1.2, vous pouvez spécifier un sélecteur pour filtrer le document HTML chargé, et seul le code HTML filtré sera inséré dans le DOM. La syntaxe est du type "url #some > selector", et le sélecteur par défaut est "body>*".
Explication :
load est la fonction Ajax la plus simple, mais son utilisation a des limites. :
Il est principalement utilisé pour renvoyer directement l'interface Ajax du HTML
load est une méthode d'ensemble de wrapper jQuery qui doit être appelée sur l'ensemble de wrapper jQuery et chargera le HTML renvoyé dans le object.Même si la fonction de rappel est définie, elle se chargera toujours
Cependant, il est indéniable que l'interface de chargement est intelligemment conçue et simple à utiliser. 🎜>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Ajax - Load</title>
<script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
$(function()
{
$("#btnAjaxGet").click(function(event)
{
//发送Get请求
$("#divResult").load("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click" + "×tamp=" + (new Date()).getTime());
});
$("#btnAjaxPost").click(function(event)
{
//发送Post请求
$("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxPost_click" });
});
$("#btnAjaxCallBack").click(function(event)
{
//发送Post请求, 返回后执行回调函数.
$("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxCallBack_click" }, function(responseText, textStatus, XMLHttpRequest)
{
responseText = " Add in the CallBack Function! <br/>" + responseText
$("#divResult").html(responseText); //或者: $(this).html(responseText);
});
});
$("#btnAjaxFiltHtml").click(function(event)
{
//发送Get请求, 从结果中过滤掉 "鞍山" 这一项
$("#divResult").load("../data/AjaxGetCityInfo.aspx?resultType=html" + "×tamp=" + (new Date()).getTime() + " ul>li:not(:contains('鞍山'))");
});
})
</script>
</head>
<body>
<button id="btnAjaxGet">使用Load执行Get请求</button><br />
<button id="btnAjaxPost">使用Load执行Post请求</button><br />
<button id="btnAjaxCallBack">使用带有回调函数的Load方法</button><br />
<button id="btnAjaxFiltHtml">使用selector过滤返回的HTML内容</button>
<br />
<div id="divResult"></div>
</body>
</html> L'exemple ci-dessus montre comment utiliser la méthode Load Astuce : il faut toujours faire attention au cache du navigateur. Lors de l'utilisation de la méthode GET, nous devons ajouter le paramètre timestamp (. net Date()).getTime() pour garantir que l'URL est envoyée à chaque fois Différent, vous pouvez éviter la mise en cache du navigateur
Astuce : Lorsqu'un espace est ajouté après le paramètre url, tel que ". ", une erreur "symbole non reconnu" apparaîtra, mais la requête peut toujours être envoyée normalement. . Mais le HTML ne peut pas être chargé dans le DOM. Le problème est résolu après suppression.
2.jQuery.get( url, [data], [callback], [type] )
Retours : XMLHttpRequest
Description :
Charger les informations via une requête HTTP GET à distance.
Il s'agit d'une simple fonction de requête GET pour remplacer le complexe $.ajax. La fonction de rappel peut être appelée lorsque la demande aboutit. Si vous devez exécuter une fonction en cas d'erreur, utilisez $.ajax.
Explication :
Cette fonction envoie une requête Get. Les paramètres peuvent être épissés directement dans l'url, tels que :
$.get("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click");<. 🎜> ou via le paramètre data Pass : $.get("../data/AjaxGetMethod.aspx", { "param": "btnAjaxGet2_click" }); Les deux méthodes ont le même effet, le paramètre data sera automatiquement ajouté à l'URL demandée
Si un paramètre dans l'URL est passé via le paramètre data, celui-ci ne sera pas automatiquement fusionné. Le paramètre du nom.
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}où data est le données renvoyées, testStatus représente le code d'état, qui peut être les valeurs suivantes :
"timeout","error","notmodified","success","parsererror"
Ceci dans la fonction de rappel sert à obtenir la référence de l'objet options. Pour diverses instructions sur les options, veuillez consulter :
http://docs.jquery.com/Ajax/jQuery.ajax#options
Le paramètre type fait référence au type de données, qui peut être les valeurs suivantes :
"xml", "html", "script", "json", "jsonp", "text ".
la valeur par défaut est "html".
la méthode jQuery.getJSON( url, [data], [callback] ) est équivalente à jQuery.get(url, [data] ,[rappel], "json")
3. jQuery.getJSON( url, [data], [callback] )
Retours : XMLHttpRequest
est équivalent à : jQuery.get(url, [data],[callback], "json")
Description :
Chargez les données JSON via une requête HTTP GET.
Dans jQuery 1.2, vous pouvez charger des données JSON provenant d'autres domaines en utilisant une fonction de rappel sous forme de JSONP, telle que "myurl?callback=?". jQuery remplacera automatiquement ? par le nom de fonction correct pour exécuter la fonction de rappel.
Remarque : Le code après cette ligne sera exécuté avant l'exécution de cette fonction de rappel.
Explication :
La fonction getJSON définit uniquement le paramètre de type de la fonction get sur "JSON". Les données obtenues dans la fonction de rappel ont été analysées selon le Format JSON L'objet est :
$.getJSON("../data/AjaxGetCityInfo.aspx", { "resultType": "json" }, function(data, textStatus)
{
alert(data.length);
alert(data[0].CityName);
});La chaîne renvoyée par le serveur est la suivante :
[{""pkid"":""0997"",""ProvinceId" ":"" XJ"",""CityName"":""Akesu"",""CityNameEn"":""Akesu"",""PostCode"":""843000"",""isHotCity"": false},
{""pkid"":""0412"",""ProvinceId"":""LN"",""CityName"":""Anshan""," "CityNameEn"" :""Anshan"",""PostCode"":""114000"",""isHotCity"":false}]
Dans l'exemple, je renvoie un tableau. Utiliser des données. length pour obtenir le tableau. Le nombre d'éléments, data[0] accède au premier élément, data[0].CityName accède à l'attribut CityName du premier élément.
4.jQuery .getScript( url, [callback] )
Renvoie : XMLHttpRequest
Équivalent à : jQuery.get(url, null, [callback] , "script")
Description :
Charger et exécuter un fichier JavaScript via une requête HTTP GET.
Avant jQuery 1.2, getScript ne pouvait appeler que des fichiers JS dans le même domaine. Dans la version 1.2, vous pouvez appeler des fichiers JavaScript sur plusieurs domaines. Remarque : Safari 2 ou version antérieure ne peut pas exécuter de scripts de manière synchrone dans la portée globale. Si vous ajoutez un script via getScript, veuillez ajouter une fonction de retard.
Explication :
Lorsque j'utilisais la bibliothèque de classes dojo dans le passé, les fichiers officiels par défaut ne prenaient pas en charge le cross-domain, ce qui m'a finalement conduit à abandonner l'utilisation du dojo (même si j'ai trouvé une version cross-domain sur Internet, mais cela me semblait pas parfait). Je suis donc particulièrement préoccupé par le cœur de cette fonction. J'ai fait des recherches sur l'implémentation et l'utilisation
Comprenez d'abord l'implémentation interne de jQuery, toujours en utilisant la fonction get. .Toutes les fonctions jQuery Ajax, y compris get, utilisent enfin jQuery.ajax(), getScript Le paramètre de type avec la valeur "script" est transmis, et enfin la requête avec le type script est traitée comme suit dans la fonction Ajax :
<🎜. >
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = s.url;Le code ci-dessus crée dynamiquement un bloc d'instructions de script et l'ajoute à la tête : head.appendChild(script);Une fois le script chargé, supprimez-le de la tête :
// Handle Script loading
if ( !jsonp ) {
var done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function(){
if ( !done && (!this.readyState ||
this.readyState == "loaded" || this.readyState == "complete") ) {
done = true;
success();
complete();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
head.removeChild( script );
}
};
}Cette fonction est principalement testée pour l'accès inter-domaines et la prise en charge de plusieurs fonctions du navigateur :| IE6 | FireFox | Notes |
| Pass | Par | les données et textStatus dans la fonction de rappel sont disponibles | < /tr>
| Référence inter-domaines js | Pass | Réussite | < td width="193" valign="top" style="word-break: break-all;">données et état du texte dans le les fonctions de rappel ne sont pas modifiées
Voici les instructions de test clés, qui sont également utilisées pour démontrer comment utiliser la fonction getScript :
$("#btnAjaxGetScript").click(function(event)
{
$.getScript("../scripts/getScript.js", function(data, textStatus)
{
alert(data);
alert(textStatus);
alert(this.url);
});
});
$("#btnAjaxGetScriptCross").click(function(event)
{
$.getScript("http://resource.elong.com/getScript.js", function(data, textStatus)
{
alert(data);
alert(textStatus);
alert(this.url);
});
});5. jQuery.post( url, [data], [ callback], [type ] )
Retours : XMLHttpRequest
Description :
Charger les informations via une requête HTTP POST à distance.
Il s'agit d'une simple fonction de requête POST pour remplacer le complexe $.ajax. La fonction de rappel peut être appelée lorsque la demande aboutit. Si vous devez exécuter une fonction en cas d'erreur, utilisez $.ajax.
Explication :
L'utilisation spécifique est la même que celle de get, sauf que la méthode de soumission passe de "GET" à "POST".
6. jQuery.ajax( options )
Retours : XMLHttpRequest
Description :
Chargez des données distantes via des requêtes HTTP.
Implémentation AJAX bas niveau 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 cet objet directement, mais dans des cas particuliers, il peut être utilisé pour terminer manuellement la requête.
$.ajax() n'a qu'un seul paramètre : le paramètre clé/valeur de l'objet, comprenant chaque information de configuration et de fonction de rappel. Voir les options de paramètres détaillées ci-dessous.
Remarque : Si vous spécifiez l'option dataType, veuillez vous assurer que le serveur renvoie les informations MIME correctes (par exemple, xml renvoie "text/xml"). Des types MIME incorrects peuvent provoquer des erreurs imprévisibles. Voir Spécification du type de données pour les requêtes AJAX.
Remarque : Si dataType est défini sur "script", alors toutes les requêtes POST distantes (pas sous le même nom de domaine) seront converties en requêtes GET. (Parce que la balise de script DOM sera utilisée pour le chargement)
Dans jQuery 1.2, vous pouvez charger des données JSON sur plusieurs domaines et vous devez définir le type de données sur JSONP lorsque vous l'utilisez. 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. Lorsque le type de données est défini sur "jsonp", jQuery appellera automatiquement la fonction de rappel.
Explication :
Il s'agit de la fonction principale d'Ajax dans jQuery. Toutes les fonctions ci-dessus qui envoient des requêtes Ajax finiront par appeler cette fonction. Le paramètre options prend en charge de nombreux paramètres. . L'utilisation de ces paramètres peut contrôler complètement la requête ajax. L'objet this dans la fonction de rappel Ajax est également l'objet options
Étant donné que les fonctions get et post simplifiées sont les plus couramment utilisées, le paramètre options est. non utilisé ici. Expliqué en détail.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
