jQuery et Ajax et serialization_jquery

À propos d'AJAX

Le soi-disant Ajax, le nom complet est JavaScript asynchrone et XML. (C'est-à-dire JS et XML asynchrones)

Pour faire simple, cela signifie envoyer et obtenir des données sans actualiser la page, puis mettre à jour la page.

Avantages de l'Ajax

•Aucune prise en charge de plug-in requise
•Excellente expérience utilisateur
•Améliorer les performances des applications web
•Réduire la charge sur les serveurs et la bande passante

Inconvénients de l'Ajax

•Compatibilité insuffisante des navigateurs
• Interrompt la fonctionnalité normale des boutons Suivant et Précédent du navigateur
•Support inadéquat pour les moteurs de recherche
•Manque d'outils de développement et de débogage

Eh bien, c’étaient toutes des lacunes d’il y a quelques années. La technologie se développe rapidement et ces lacunes seront progressivement comblées. Au moins, il n'est pas difficile de déboguer Ajax maintenant.

Le cœur d'Ajax est l'objet XMLHttpRequest, qui est la clé de l'implémentation d'Ajax.

Je ne mentionnerai pas les exemples traditionnels d'implémentation d'Ajax. C'est tellement pénible que je ne m'en souviens même pas, j'ai beaucoup cherché sur Internet.

À propos d'Ajax dans jQuery

La méthode $.ajax() est la méthode Ajax qui encapsule les js les plus originaux.

load(), $.get(), $.post() sont encapsulés $.ajax()

$.getScript() et $.getJSON() sont d'autres encapsulations.

•Méthode Load() •Utilisation : Charger le code HTML distant et l'insérer dans le DOM. Elle est généralement utilisée pour obtenir des fichiers de données statiques. La structure est : load(url [,data] [,callback]). •url est l'adresse demandée
•data est facultatif et est l'objet paramètre envoyé au serveur
•callback est une fonction de rappel, qui est appelée si la requête réussit ou échoue
•Vous pouvez même ajouter des filtres à l'adresse lors du chargement de la page

$("#resDiv").load("test.html .myClass");//这个div里只载入test.html页面里面 样式为myClass 的元素


//举一个完整的例子
$(function(){
$("#resDiv").load("text.php",{name:"troy",textInfo:"hello"},function(responseText,textStatus,XMLHttpRequest){
//responseText：请求返回的内容
//textStatus： 请求状态：success、error、notmodiffied、timeout 4种 
//XMLHttpRequest: XMLHttpRequest对象
});
}); 

•Méthode $.get() •Évidemment, la méthode appelante est différente, cette fonction est donc une fonction globale de jQuery. Les méthodes précédentes et load() fonctionnent toutes sur des objets jQuery
•La méthode $.get() utilise la méthode GET pour faire des requêtes asynchrones. La structure est : $.get(url [,data] [,callback] [,type]) •Les trois premiers paramètres ne seront pas mentionnés. la seule différence est que le rappel n'est appelé que si la demande aboutit
•Le paramètre type est le format du contenu renvoyé par le serveur, notamment xml, html, script, json, text et _default
•Exemple

$("#send").click(function()
$.get("get1.php"
,{
username:$("#username").val(),
content:$("#content").val()
}
,function(data,textStatus){
//data: 返回的内容，可以是XML文档、JSON文件、HTML片段
//textStatus: 请求状态：success、error、notmodiffied、timeout 4种
}
)
}) 

•Méthode $.post() •Elle fonctionne de la même manière que la méthode get, mais l'une est la méthode get et l'autre est la méthode post.
•Méthode $.getScript() •Parfois, il n'est pas nécessaire d'obtenir tous les scripts lorsque la page est chargée pour la première fois, c'est pourquoi jQuery fournit la méthode getScript pour charger directement les fichiers js.
•Exemple

$('#send').click(function(){
$.getScript('test.js',function(){
//do something 这个时候脚本已经加载了，不需要再对js文件进行处理
});
}); 

• Méthode $.getJSON() • Utilisée pour charger des fichiers JSON, l'utilisation est la même que ci-dessus, sauf que les données json sont renvoyées

$('#send').click(function(){
$.getJSON("myurl",function(data){
var html="";
$.each(data,function(commentIndex，comment){
html+=commentIndex+":"+comment['username']+";";
})
alert(html);
})
});
//注意一下ecch这种玩法，同样是个全局函数。他的回调函数中，第一个参数为成员的索引，第二个为变量和内容 

Au fait, développez JSONP pour un accès inter-domaines

$("#send").click(function(){
$.getJSON("http://www.某网站.com/services/getMyCmpJson?tags=car&tagmode=any&format=json&jsoncall back=?"
,function(data){
//某些操作
}
)
})

//JSONP est un protocole non officiel, qui utilise une combinaison de balises json et 3f1c4e4b6b16bbbd69b2ee476dc4f83a. Il est principalement utilisé pour les applications Web inter-domaines

.

•Méthode $.ajax() •Cette méthode est l'implémentation Ajax de jQuery le plus bas niveau, elle est donc naturellement plus puissante et complexe.

Bien qu'il n'ait qu'un seul paramètre, cet objet paramètre contient de nombreux attributs, mais ils sont tous facultatifs. Tous les attributs sont listés ci-dessous : • url : Adresse par défaut de la page actuelle, vous pouvez également écrire manuellement l'adresse demandée

•type : La valeur par défaut est GET, vous pouvez également écrire POST
•timeout : définir le délai d'expiration de la demande (millisecondes)
•data : données envoyées
•dataType : le type de données qui devrait être renvoyé par le serveur.
•beforeSend : La fonction appelée avant l'envoi. Si la fonction renvoie false, la requête ajax sera annulée.

function(XMLHttpRequest){//XMLHttpRequest是唯一的参数
this;//调用本次Ajax请求时传递的options参数
} 

•complete : appelé une fois la demande terminée, quel que soit le succès ou l'échec.

function(XMLHttpRequest，textStatus){//textStatus描述成功请求类型
this;//调用本次Ajax请求时传递的options参数
}

•succès : fonction de rappel une fois la demande réussie

function(data,textStatus){//data为成功返回的数据
this;//调用本次Ajax请求时传递的options参数
}

•erreur : Fonction appelée lorsque la requête échoue

function(XMLHttpRequest，textStatus,errorThrown){
// textStatus为错误信息，errorThrown为捕获的错误对象，通常只有其中一个包含信息
this;//调用本次Ajax请求时传递的options参数
} 

•global : la valeur par défaut est vraie. Indique s’il faut déclencher des événements Ajax globaux.
•Sérialiser les éléments •Méthode Serialize() •Il peut sérialiser le contenu des éléments DOM en chaîne

//不仅可以序列化整个表单，也可以序列化单个元素，并且都是自动编码过的
$.post("myurl",$("#form1").serialize(),function(data,textStatus){
$("#resText").html(data);
})

•Méthode SerializeArray() •Elle peut sérialiser le contenu des éléments DOM au format JSON
•Méthode $.param() •C'est le cœur de la méthode Serialize, utilisée pour sérialiser un tableau ou un objet selon des paires clé-valeur

var obj={a:1,b:2,c:3};
var k=$.param(obj);//输出为a=1&b=2&c=3 

•Événements globaux Ajax dans jQuery •Méthode ajaxStart() : déclenchée au démarrage de la requête Ajax
•Méthode ajaxStop() : déclenchée à la fin de la requête Ajax

<div id="loading">加载中...</div>
$("#loading").ajaxStart(function(){
$(this).show();//ajax开始请求就显示加载中
});
$("#loading").ajaxStop(function(){
$(this).hide();//ajax开始结束就隐藏加载中
}); 

•ajaxComplete():当Ajax请求完成就触发
•ajaxError():当Ajax请求发生就触发,捕捉到的错误可以作为最后一个参数传递
•ajaxSend():当Ajax请求发送前就触发
•ajaxSuccess():当Ajax请求成功就触发
•如果想使某个Ajax请求不受全局事件的影响，可以在$.ajax中将global属性设置为false，这个在前面已经讲过了。当然也可以在ajax请求前：

$.ajaxPrefilter(function(options){//每次发送前请求
options.global=true;
})

好吧，写完了。最后顺带提一下，setTimeout("doMethod()",4000);为4s后执行doMethod这个函数。

//一个简单的定时发送功能
function updateMsg(){
$.post("myurl",{time:timestamp},function(xml){
//do something
});
setTimeout("updateMsg()",4000);
}