jQuery: un objet

les méthodes s'appliquent généralement à tous les éléments sélectionnés:

$('.classe').hide();
$('.classe').show();
de nombreuses méthodes utilitaires
parcourir le DOM: .parent(), .next(), .children(), .parents()
ajouter ou retirer des classes CSS: addClass, removeClass
manipuler: append, wrap, prepend
Intérêt fondamental: la plupart des méthodes de l'objet retournent l'objet lui-même
on peut chaîner les appels !
$('anything').parent().find('still anything').show();
Cette propriété est extrêmement puissante !

•JQuery possède toute une panoplie de fonctions permettant de simplifier les requêtes Ajax

•La plus simple :

$('#maDiv').load('page.html');

•Plus complexe :

$.get('test.html',
function(data) {faire quelque chose);

•Générale :  $.ajax({
url: 'document.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){alert('Erreur chargement'); },

  success: function(xml){faire quelque chose}
});

Inconvénients d’AJAX / XML

•XML est délicat à parser en Javascript/jQuery

$.ajax({ type: "GET", url: "courses.xml",

dataType: "xml",

complete : function(data, status)

  { var products = data.responseXML;

  var html = "";   $(products).find('product').each(function(){   var id = $(this).attr('id');

  var name = $(this).find('name').text();

  var price =$(this).find('price').text();

  html += "<li>#"+id

  +" - <strong>"+name+"</strong> : "

  +price+"</li>"; }); $("#cousesList").html(html); }}); 

•pour des raisons de sécurité, les navigateurs interdisent de faire du « cross-domain » avec XMLHttpRequest dont le résultat serait du XML (et donc du HTML)
….mais pas pour des scripts Javascript !

•D’où l’idée de définir un modèle de données sous la forme d’objet Javascript

¨JSON

•format de données textuel, générique, dérivé de la notation des objets de JavaScript

•permet de représenter de l'information structurée.

•décrit par la RFC 4627 de l’IETF.

•Exemple :

  { "Image": {

  "Width": 800,

  "Height": 600,

  "Title": "Vue du 15ème étage",

  "Thumbnail": {

    "Url": "http://www.example.com/481989943",

  "Height": 125,

  "Width": "100" },

  "IDs": [116, 943, 234, 38793]

 } }