jquery : astuce ajax ...

Une méthode simple pour faire de jolie objets, et de l'ajax simplement :

tout d'abord une astuce sympa pour configurer tous les appels ajax avec une conf par defaut :

$.ajaxSetup({
type: 'POST'
url: 'test.php',
timeout: 3500
});



Une seconde façon, pour faire des appels ajax, via un objets :

var GALLERY = {
container: "#gallery",
url: "getImages",
delay: 5000,
load: function() {
// faire l'appel ajax
},
display: function(image_url) {
// traiter les donnees, et leur affichage

}
};



load: function() {
var _gallery = this;
$.ajax({
type:"get",
url: this.url,
success: function(data) {
var images = data.split('|');
$.each(images, function() {
_gallery.display(this);
});
}
});
}



display: function(image_url) {
$('')
.attr('src', 'images/' + data)
.hide()
.load(function() {
$(this).fadeIn();
})
.appendTo(this.container);
}



$(document).ready(function() {
GALLERY.load();
});


service Rest avec Spring MVC et jquery

Avec Spring 3.0, il est vraiment simple de faire des services RESTFull, voici, un exemple très simple de d'un controller spring qui propose 2 methodes :
La première par un GET permettant de recuperer une personne en JSON
et la seconde de sauver un tableau de personnes. Pour cette dernière, il faut noter l'utilisation d'un POST, et la recupération de l'objet par ResquestBody :

A noter, que JSON ne supporte que très peu de type (par exemple pas de liste, seulement des tableaux:


@Controller
public class MonServices {

@Resource(name = "Modele")
private Modele modele;

@RequestMapping(value = "**/{instance}/personne/{name}", method = RequestMethod.GET)
public @ResponseBody Personne getPersonne(HttpServletRequest request,
HttpServletResponse response, @PathVariable String instance,
@RequestParam(required = false) String httpCode,@PathVariable String name) {

setHTTPStatus(response, "200");
Personne p = new Personne("john",name);
System.out.println("JSON => " + p.toString());
return p;
}

@RequestMapping(value = "**/{instance}/personne/save", method = RequestMethod.POST)
public @ResponseBody Personne [] savePersonne(@RequestBody Personne [] p,HttpServletRequest request,
HttpServletResponse response) {
setHTTPStatus(response, "200");
for (Personne personne : p) {
personne.setFirstname("postOK" + personne.getName());
}
return p;
}
}


Voici le bean Personne, en java :

public class Personne extends ModeleBean{

public Personne() {
// TODO Auto-generated constructor stub
}

public Personne(String firstname, String name) {
this.name = name;
this.firstname = firstname;
}

/**
* @return the name
*/
public String getName() {
return name;
}

/**
* @param name
* the name to set
*/
public void setName(String name) {
this.name = name;
}

/**
* @return the firstname
*/
public String getFirstname() {
return firstname;
}

/**
* @param firstname
* the firstname to set
*/
public void setFirstname(String firstname) {
this.firstname = firstname;
}

private String name;
private String firstname;
}


Pour la parti javascript, je vous conseille JQuery, et les plugins jquery.postJSON :

Pour le GET:

$.getJSON('instance/personne/toto.smvc', function(data) {
var items = [];

$.each(data, function(key, val) {
items.push('>li id="' + key + '"<' + val + '>/li<');
});

$('>ul/<', {
html : items.join('')
}).appendTo('body');
});


Pour le POST:

function postData() {
var personnes = new Array();
personnes[0] = {
name : "duc",
firstname : "lolo"
};
personnes[1] = {
name : "duc",
firstname : "franck"
};

$.postJSON("instance/personne/save.smvc", personnes, function(data) {
var items = [];

$.each(data, function(key, val) {
items.push('>li id="' + key + '"<' + val + '>/li<');
});

$('>ul/<', {
html : items.join('')
}).appendTo('body');
});
return false;
}