Quelles sont les fonctions ajax ?

Les fonctions ajax incluent : 1. "$(selector).load()", utilisé pour charger des données distantes dans l'élément sélectionné ; 2. "$.ajax()" 3. "$.get() " ; . "$.post()"; 5. "$.getJSON()"; 6. "$.getScript()".

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3. Fonction de demande

ajax

Request	Description
$ (sélecteur) .load (URL, données, rappel)	Lo charge des données distantes dans l'élément sélectionné
$ .ajax ( options)	Charger les données distantes dans l'objet XMLHttpRequest
$.get(url,data,callback,type)	Utilisez HTTP GET pour charger les données distantes
$.post(url, data, callback, type)	Utilisez HTTP POST pour charger des données distantes
$.getJSON(url,data,callback)	Utilisez HTTP GET pour charger des données JSON distantes
$.getScript(url,callback)	Charger et exécutez des fichiers JavaScript distants

(url) L'URL (adresse) des données en cours de chargement

(data) L'objet clé/valeur des données envoyées au serveur

(callback) Lorsque les données sont chargées, la fonction exécutée

(type) est renvoyé Le type de données (html, xml, json, jasonp, script, text)

(options) Toutes les options de paire clé/valeur de la requête AJAX complète

One, $.get(url,[data], [callback] )

Explication : url est l'adresse de la requête, data est la liste des données demandées et callback est la fonction de rappel une fois la requête réussie. Cette fonction accepte deux paramètres, le premier est les données renvoyées par le. serveur, et le deuxième paramètre est l'état du serveur qui est un paramètre facultatif.

Et parmi eux, le format des données renvoyées par le serveur est en fait sous la forme d'une chaîne, pas du format de données json que nous souhaitons. Il est cité ici juste à titre de comparaison et d'illustration

$.get("data.php",$("#firstName.val()"),function(data){
$("#getResponse").html(data); }//返回的data是字符串类型
);

Deuxièmement, $.post. (url,[data],[callback],[type])

Explication : Cette fonction est similaire au paramètre $.get(), avec un paramètre de type supplémentaire, le type est request Le type de données peut être html, xml, json et d'autres types. Si nous définissons ce paramètre sur : json, le format renvoyé sera le format json. S'il n'est pas défini, il le sera. Le format renvoyé par $.get() est le même, les deux sont des chaînes

$.post("data.php",$("#firstName.val()"),function(data){
$("#postResponse").html(data.name);
},"json"//设置了获取数据的类型，所以得到的数据格式为json类型的
);

Trois, $.ajax(opiton)

Explication : La fonction $.ajax() est puissante et peut effectuer de nombreuses opérations précises sur ajax Contrôle, veuillez vous référer aux informations pertinentes si vous avez besoin d'une explication détaillée

$.ajax({
url: "ajax/ajax_selectPicType.aspx",
data:{Full:"fu"},
type: "POST",
dataType:'json',
success:CallBack,
error:function(er){
BackErr(er);}
});

Quatre, $.getJSON(url,[data],[callback])

$.getJSON("data.php",$("#firstName.val()"),function(jsonData){
$("#getJSONResponse").html(jsonData.id);}//无需设置，直接获取的数据类型为json，所以调用时需要使用jsonData.id方式
);

Quand Ajax rencontre jQuery Il existe de plus en plus d'applications basées sur AJAX, et pour les développeurs front-end, ce n'est pas une chose agréable de traiter directement avec la HTTPRequest sous-jacente. Puisque jQuery est encapsulé JavaScript, j'ai dû réfléchir à la question des applications AJAX. En effet, si vous utilisez jQuery pour écrire en AJAX, ce sera N fois plus pratique que de l’écrire directement en JS. (Je ne sais pas utiliser jQuery. Allez-vous perdre vos connaissances en JS...) On suppose ici que tout le monde est familier avec la syntaxe jQuery, et faisons un résumé de certaines applications d'ajax.

Charger la page statique

load( url, [data], [callback] );
url (String) Adresse URL de la page HTML demandée
data (Map) (paramètre facultatif) clé envoyée au serveur /value data
callback (Callback) (paramètre facultatif) La fonction de rappel lorsque la requête est terminée (il n'est pas nécessaire qu'elle réussisse)

La méthode load() peut facilement charger le contenu de la page statique dans l'objet jQuery spécifié.

$('#ajax-p').load('data.html');

De cette façon, le contenu de data.html sera chargé dans l'objet DOM avec l'ID ajax-p. Vous pouvez même implémenter l'opération Ajax de chargement d'une partie du contenu en spécifiant l'ID, tel que :

$('#ajax-p').load('data.html#my-section');

Implémentation des méthodes GET et POST

get( url, [data], [callback] )

• url (String) Adresse URL pour envoyer la demande.

• données (Carte)(Paramètre facultatif) Les données à envoyer au serveur, exprimées sous forme de paires clé/valeur, seront ajoutées à l'URL de la requête en tant que QueryString

• callback (Callback) (paramètre facultatif) fonction de rappel lorsque le chargement est réussi (Cette méthode n'est appelée que lorsque l'état de retour de la réponse est réussi)
  

Évidemment, il s'agit d'une fonction qui implémente spécifiquement la méthode GET, et elle est assez simple à utiliser

$.get('login.php', {
   id      : 'Robin',
   password: '123456',
   gate    : 'index'
  }, function(data, status) {
   //data为返回对象，status为请求的状态
   alert(data);
   //此时假设服务器脚本会返回一段文字"你好，Robin！"，
那么浏览器就会弹出对话框显示该段文字
   alert(status);
   //结果为success, error等等，但这里是成功时才能运行的函数
  });

post( url, [data], [callback], [type] )

• url ( String) pour envoyer l'adresse URL de la requête.
  

• data (Map) (paramètre facultatif) Les données à envoyer au serveur, exprimées sous forme de paires clé/valeur

• callback (Callback) (facultatif paramètre) Chargement réussi de la fonction de rappel (cette méthode est appelée uniquement lorsque l'état de retour de la réponse est succès)

• type (String) (paramètre facultatif) Le type de données demandées, xml, texte, json, etc.

est également fourni par jQuery Une fonction simple, son utilisation réelle

$.post('regsiter.php', {
   id:'Robin',
   password: '123456',
   type:'user'
  },function(data, status) {
   alert(data);
  }, "json");

Fonction de chargement de script basée sur des événements : getScript()

getScript( url, [callback] )

• url (String) Adresse du fichier JS à charger

• callback (Fonction) (Facultatif) Chargé avec succès La fonction de rappel
  

getScript() peut charger et exécuter à distance des scripts JavaScript. Cette fonction peut s'étendre Domaine chargeant des fichiers JS (magique...?!). L'importance de cette fonction est énorme Oui, cela peut réduire considérablement la quantité de code pour le chargement initial de la page, car vous pouvez charger les fichiers JS correspondants en fonction de l'interaction de l'utilisateur au lieu de tous les charger lorsque la page est initialisée.

$.getScript('ajaxEvent.js', function() {
   alert("Scripts Loaded!");
   //载入ajaxEvent.js，并且在成功载入后显示对话框提示。
  });

Construire un pont pour la communication de données : getJSON()

getJSON(url,[data],[callback])

• url (String) Envoyer l'adresse de la demande

• data (Map) (facultatif) Paramètres clé/valeur à envoyer

• callback (Fonction ) (Facultatif) Fonction de rappel lorsque le chargement est réussi.
  

JSON est un format de transmission de données idéal, qui peut être bien intégré à JavaScript ou à d'autres langages hôtes langage et peut être utilisé directement par JS. Utiliser JSON par rapport au traditionnel GET et POST envoient directement des données « nues », dont la structure est plus raisonnable et plus sûre. Quant à la fonction getJSON() de jQuery, elle définit uniquement les paramètres JSON. Une version simplifiée de la fonction ajax(). Cette fonction peut également être utilisée sur plusieurs domaines et présente certains avantages par rapport à get() et post(). De plus, cette fonction peut être écrite en écrivant l'url de la requête Au format "myurl?callback=X", laissez le programme exécuter la fonction de rappel X.

$.getJSON('feed.php',{
   request: images,
   id:      001,
   size:    large
   }, function(json) {
    alert(json.images[0].link);
    //此处json就是远程传回的json对象，假设其格式如下：
    //{'images' : [
    // {link: images/001.jpg, x :100, y : 100},
    // {link: images/002.jpg, x : 200, y 200:}
    //]};
   }
 );

La fonction ajax() de niveau inférieur

Bien que les fonctions get() et post() soient très simples et faciles à utiliser, elles ne peuvent toujours pas répondre à certaines exigences de conception plus complexes, telles que réaliser différentes actions à différents moments lors de l'envoi d'ajax. jQuery propose une fonction plus spécifique : ajax().

ajax( options )

ajax() fournit un grand nombre de paramètres, il peut donc implémenter des fonctions assez complexes.

errorCette méthode a trois paramètres : l'objet XMLHttpRequest, le message d'erreur et (éventuellement) l'objet d'erreur capturé. globalifModifiedBoolean(Par défaut : false) Obtenez uniquement de nouvelles données lorsque les données du serveur changent.

Nom du paramètre	Type	Description
url	String	(Par défaut : adresse de la page actuelle) L'adresse à laquelle envoyer la demande.
type	String	(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.
timeout	Number	Définir le délai d'expiration de la demande (millisecondes). Ce paramètre remplace le paramètre global.
async	Boolean	(Par défaut : true) Par défaut, toutes les requêtes sont des requêtes asynchrones. Si vous devez envoyer des requêtes synchrones, veuillez définir cette option sur false. Notez que les requêtes synchrones verrouillent le navigateur et que l'utilisateur doit attendre que la requête soit terminée avant de pouvoir effectuer d'autres opérations.
beforeSend	Fonction	Vous pouvez modifier les fonctions de 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. function (XMLHttpRequest) { this; // les options pour cette requête ajax } function (XMLHttpRequest) { this; // les options pour cette requête ajax }
cache	Boolean	(Par défaut : true) Nouvelle fonctionnalité de jQuery 1.2, la définition sur false ne chargera pas les informations de demande à partir du cache du navigateur.
complete	Fonction	Fonction de rappel une fois la demande terminée (appelée lorsque la demande réussit ou échoue). Paramètres : objet XMLHttpRequest, chaîne d'informations de réussite. function (XMLHttpRequest, textStatus) { this; // les options pour cela requête ajax } fonction (XMLHttpRequest, textStatus) { this ; options pour cette requête ajax }
contentType	String	(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 applications.
data	Object, String	Données envoyées au serveur. Sera automatiquement converti au format de chaîne de demande. Ajouté à l'URL dans les requêtes GET. Voir 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′.
dataType	String	Le type de données attendu renvoyé par le serveur. S'il n'est pas spécifié, jQuery renverra automatiquement ResponseXML ou ResponseText en fonction des informations MIME du paquet HTTP et le transmettra comme paramètre de fonction de rappel. Valeurs disponibles : "xml" : Renvoie un document XML qui peut être traité par jQuery. "html" : renvoie des informations HTML en texte brut ; contient des éléments de script. "script" : renvoie le code JavaScript en texte brut. Les résultats ne sont pas automatiquement mis en cache. "json" : renvoie les données JSON. "jsonp" : format JSONP. Lors de l'appel d'une fonction au format JSONP, tel que "myurl?callback=?", remplacera automatiquement ? par le nom de fonction correct pour exécuter la fonction de rappel.
Fonction	(Par défaut : jugement automatique (xml ou html)) Cette méthode sera appelée lorsque la requête échoue.	fonction (XMLHttpRequest, textStatus, errorThrown) { // Normalement, un seul parmi textStatus et errorThown a une valeur this ; // les options pour cet ajax. requête } fonction (XMLHttpRequest, textStatus, errorThrown) { // Normalement, un seul parmi textStatus et errorThown a une valeur this ; // les options pour cet ajax. request }
Boolean	(Par défaut : true) S'il faut déclencher des événements AJAX globaux. La définition sur false ne déclenchera pas d'événements AJAX globaux, tels que ajaxStart ou ajaxStop. Peut être utilisé pour contrôler différents événements Ajax
	Utilisez les informations d’en-tête Last-Modified du paquet HTTP pour déterminer.
processData	Boolean	(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 “application/x-www-form-urlencoded”。 如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success	Function	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

你可以指定xml、script、html、json作为其数据类型，可以为beforeSend、error、sucess、complete等状态设置 处理函数，众多其它参数也可以订完完全全定义用户的Ajax体验。下面的例子中，我们用ajax()来调用一个XML文档：

$.ajax({
    url: 'doc.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        alert(xml);
  //此处xml就是XML的jQuery对象了，你可以用find()、next()或XPath等方法在里面寻找节点，
和用jQuery操作HTML对象没有区别
    }
});

进一步了解AJAX事件

前面讨论的一些方法都有自己的事件处理机制，从页面整体来说，都只能说是局部函数。jQuery提供了AJAX全局函数的定义，以满足特殊的需求。下面是jQuery提供的所有函数（按照触发顺序排列如下）：

• ajaxStart
  (全局事件) 开始新的Ajax请求，并且此时没有其他ajax请求正在进行

• beforeSend
  (局部事件) 当一个Ajax请求开始时触发。如果需要，你可以在这里设置XMLHttpRequest对象

• ajaxSend
  (全局事件) 请求开始前触发的全局事件

• success
  (局部事件) 请求成功时触发。即服务器没有返回错误，返回的数据也没有错误

• ajaxSuccess
  全局事件全局的请求成功

• error
  (局部事件) 仅当发生错误时触发。你无法同时执行success和error两个回调函数

• ajaxError
  全局事件全局的发生错误时触发

• complete
  (局部事件) 不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件

• ajaxComplete
  全局事件全局的请求完成时触发

• ajaxStop
  (全局事件) 当没有Ajax正在进行中的时候，触发
  局部事件在之前的函数中都有介绍，我们主要来看看全局事件。对某个对象进行全局事件监听，那么全局中的AJAX动作，都会对其产生影响。比如，当页面在进行AJAX操作时，ID为”loading”的p就显示出来：

$("#loading").ajaxStart(function(){
   $(this).show();
 });

全局事件也可以帮助你编写全局的错误相应和成功相应，而不需要为每个AJAX请求独立设置。有必要指出，全局事件的参数是很有用的。除了 ajaxStart、ajaxOptions，其他事件均有event, XMLHttpRequest, ajaxOptions三个参数。第一个参数即事件本身；第二个是XHR对象；第三个是你传递的ajax参数对象。在一个对象里显示全局的AJAX情况：

$("#msg").beforeSend(function(e,xhr,o) {
 $(this).html("正在请求"+o.url);
 }).ajaxSuccess(function(e,xhr,o) {
 $(this).html(o.url+"请求成功");
 }).ajaxError(function(e,xhr,o) {
 $(this).html(o.url+"请求失败");
});

很显然，第三个参数也可以帮助你传递你在AJAX事件里加入的自定义参数。 在单个AJAX请求时，你可以将global的值设为false，以将此请求独立于AJAX的全局事件。

$.ajax({
   url: "request.php",
   global: false,
   // 禁用全局Ajax事件.
 });

如果你想为全局AJAX设置参数，你会用上ajaxSetup()函数。例如，将所有AJAX请求都传递到request.php，；禁用全局方法；强制用POST方法传递：

$.ajaxSetup({
  url: "request.php",
  global: false,
  type: "POST"
});

【相关教程推荐：AJAX视频教程】

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!