☰

jQuery και Ajax

Η jQuery προσφέρει μια σειρά από συναρτήσεις με τις οποίες μπορούμε να μεταφέρουμε δεδομένα (ασύγχρονα) από έναν σέρβερ.

Η βασική συνάρτηση είναι η jQuery.ajax() ή πιο σύντομα η $.ajax() και διατυπώνεται με δύο βασικές συντακτικές μορφές.

jQuery.ajax(url [,settings])

jQuery.ajax([settings])

ή πιο σύντομα:

$.ajax(url [,settings]) ή $.ajax([settings])

Η $.ajax() επιστρέφει το αντικείμενο jqXHR που είναι ένα superset του αντικειμένου XMLHttpRequest.

Έτσι σε μια απλή σύνταξη μπορούμε να έχουμε:

var jq = $.ajax("test.html");
jq.done(function(data, textStatus, jqXHR) {
  $("#placeholder").html(data);
});

Επειδή η ajax λειτουργεί ασύγχρονα και στο παρασκήνιο, απαιτείται κάποιος χρόνος για την αποστολή της αίτησης και επιστροφής των δεδομένων από τον server.

Για να ξέρουμε πότε τα δεδομένα είναι διαθέσιμα χρησιμοποιούμε ειδικά συμβάντα (events) και διαχειριστές συμβάντων.

Η μέθοδος done() εκτελείται όταν ολοκληρωθεί επιτυχώς η αποστολή-λήψη δεδομένων.

Το παραπάνω σκριπτ θα μπορούσε να γραφτεί και ως:

$.ajax("test.html").done(function(data, textStatus, jqXHR) {
	$("#placeholder").html(data);
});

Σε περίπτωση αποτυχίας (για να 'πιάσετε' το λάθος) μπορείτε να χρησιμοποιήσετε τη μέθοδο:

.fail(function(jqXHR, textStatus, errorThrown) {});

Η οποία σε συνδυασμό με την done() μπορεί να γραφτεί ως εξής:

$.ajax("test.html")
.done(function(data, textStatus, jqXHR) {
	$("#placeholder").html(data);})
.fail(function(){$("#placeholder").html("failed");});

Τέλος, μπορείτε να προσθέσετε και την always() η οποία εκτελείται πάντα ανεξάρτητα αν προέκυψε λάθος ή όχι.

$.ajax("test.html")
.done(function(data, textStatus, jqXHR) {
  $("#placeholder").html(data);})
.fail(function(){
  $("#placeholder").html("failed!");})
.always(function(){
  $("#placeholder").html(alert("always"));});

Σημείωση

Οι συναρτήσεις done(), fail() και always() έχουν αντικαταστήσει τις παλιότερες συναρτήσεις success(), error() και complete() αντίστοιχα.

Εκτός από μεθόδους μπορείτε να περάσετε και άλλα ορίσματα στη συνάρτηση $.ajax() όπως φαίνεται και στον αρχικό ορισμό jQuery.ajax(url [,settings]).

Έτσι, έχουμε την ιδιότητα type με τιμές GET ή POST, την data όπου ορίζουμε τα δεδομένα που θα σταλούν στον σέρβερ, την dataType για να ορίσουμε τον τύπο δεδομένων που θα λάβουμε (όπως json, xml, html, text) κ.λπ.

Σε μια τέτοια περίπτωση η συνάρτηση θα διαμορφωθεί ως εξής:

$.ajax("test.php", {
  type:"GET",
  data:{name:'Manos', age:39},
  dataType:'html'
  })
.done(function(data) {
  $("#placeholder").html(data);});

Επίσης, σύμφωνα με τον δεύτερο γενικό ορισμό jQuery.ajax([settings]), το παραπάνω σκριπτ μπορεί να διατυπωθεί ως εξής:

$.ajax({
  url:"test.php",
  type:"GET",
  data:{name:'Manos', age:39},
  dataType:'html'
  }).done(function(data) {
  	$("#placeholder").html(data);});

Άλλες συναρτήσεις

Εκτός από τη γενική συνάρτηση που είδαμε παραπάνω, η jQuery προσφέρει μια σειρά από συναρτήσεις για περισσότερη συντομία αλλά και για πιο ειδικές περιπτώσεις.

Αυτές είναι:

Η συνάρτηση load()

Η γενική μορφή της load() είναι:

.load(url [,data] [,complete(responseText, textStatus, XMLHttpRequest)]);

Και επιστρέφει ένα αντικείμενο jQuery.

Στην απλή του έκδοση μπορούμε να έχουμε:

$("#placeholder").load('test.html');

Όπου η load() φορτώνει το test.html στην ετικέτα με id= placeholder.

Αν καλούμε ένα php αρχείο και θέλουμε να στείλουμε και δεδομένα στον σέρβερ, τότε μπορούμε να γράψουμε:

$("#placeholder").load('test.php', {name:'Manos', age:39});

Προσοχή: Όταν καλείτε αρχεία χωρίς δεδομένα, τότε η load() χρησιμοποιεί τη μέθοδο GET, αλλά όταν υπάρχουν δεδομένα όπως στο παράδειγμα, τότε χρησιμοποιεί τη μέθοδο POST.
Θα πρέπει δηλαδή το αρχείο php να διαβάζει τα δεδομένα με $_POST['name'] και $_POST['age'].

Για να προσθέσετε μια συνάρτηση callback (δηλαδή μια συνάρτηση που θα καλείται όταν έχει ολοκληρωθεί η αποστολή-λήψη) τότε γράφετε:

$('#placeholder').load('test.html', function() {
	alert('Load was performed.');
});

Φυσικά μπορείτε να χρησιμοποιήσετε και τις παραμέτρους της συνάρτησης callback όπως στο παράδειγμα παρακάτω:

$("#placeholder").load("test1.html", function(response, status, xhr) {
	if (status == "error") {
		$("#error").html(xhr.status + " " + xhr.statusText);
	}
});

Η συνάρτηση $.get()

Η γενική μορφή της $.get() είναι:

$.get(url [,data] [,success(data, textStatus, jqXHR)] [,dataType]);

Η διαφορά της με την load() είναι ότι έχει μια επιπλέον παράμετρο [, datatype] στο τέλος στην οποία δηλώνουμε τον τύπο δεδομένων που θα επιστρέψει ο σερβερ όπως (xml, json, script, or html).
Αν δεν καταχωρηθεί τιμή για αυτή την παράμετρο, τότε η jQuery θα προσπαθήσει να αναγνωρίσει τον τύπο.

Η $.get() επιστρέφει το αντικείμενο jqXHR που είναι ένα superset του αντικειμένου XMLHttpRequest.

Η $.get() είναι μια συντομογραφία της παρακάτω γενικής συνάρτησης.

$.ajax({
	url: url,
	data: data,
	success: success,
	dataType: dataType
});

Παραδείγματα με $.get()

Απλή κλήση ενός αρχείου

$.get("test.php");

Κλήση αρχείου με αποστολή δεδομένων

$.get("test.php", {name:'Manos', age:39});

Κλήση αρχείου και διαχείριση λήψης δεδομένων επιστροφής.

$.get("test.php", function(data){
	alert("Data Loaded: " + data);
});

Κλήση αρχείου με αποστολή δεδομένων και διαχείριση δεδομένων επιστροφής.

$.get("test.php", {name:'Manos', age:39},
	function(data){
	alert("Data Loaded: " + data);
});

Κλήση αρχείου με αποστολή δεδομένων, διαχείριση και δήλωση dataType για τα δεδομένα επιστροφής.

$.get("test.php", {name:'Manos', age:39},
	function(data){
	alert("Data Loaded: " + data);
}, "json");

Η συνάρτηση $.post()

H $.post() λειτουργεί όπως και η $.get() με τη μόνη διαφορά ότι χρησιμοποιεί τη μέθοδο ‘POST’.

Η γενική μορφή της $.post() είναι:

$.post(url [,data] [,success(data, textStatus, jqXHR)] [,dataType]);

Η $.post() είναι μια συντομογραφία της παρακάτω γενικής συνάρτησης.

$.ajax({
	type:"POST",
	url:url,
	data:data,
	success:success,
	dataType:dataType
});

Παραδείγματα με $.post()

Απλή κλήση ενός αρχείου

$.post("test.php");

Κλήση αρχείου με αποστολή δεδομένων

$.post("test.php", {name:'Manos', age:39});

Κλήση αρχείου και διαχείριση λήψης δεδομένων επιστροφής.

$.post("test.php", function(data){
	alert("Data Loaded: " + data);
});

Κλήση αρχείου με αποστολή δεδομένων και διαχείριση δεδομένων επιστροφής.

$.post("test.php", {name:'Manos', age:39},
	function(data){
	alert("Data Loaded: " + data);
});

Κλήση αρχείου με αποστολή δεδομένων, διαχείριση και δήλωση dataType για τα δεδομένα επιστροφής.

$.post("test.php", {name:'Manos', age:39},
	function(data){
	alert("Data Loaded: " + data);
}, "json");

Η συνάρτηση $.getJSON()

H $.getJSON() λειτουργεί όπως και η $.get() με τη μόνη διαφορά ότι τα δεδομένα επιστροφής είναι τύπου ‘json’ και επομένως δεν χρειάζεται η παραπάνω παράμετρος.

Η γενική μορφή της $.getJSON() είναι:

$.getJSON(url [,data] [,success(data, textStatus, jqXHR)]);

Η $.getJSON() είναι μια συντομογραφία της παρακάτω γενικής συνάρτησης.

$.ajax({
	dataType:"json",
	url:url,
	data:data,
	success:success
});

Παραδείγματα με $.getJSON()

Απλή κλήση ενός αρχείου

var jqxhr = $.getJSON("test.php");

Κλήση αρχείου με αποστολή δεδομένων

var jqxhr = $.getJSON("test.php", {name:'Manos', age:39});

Κλήση αρχείου και διαχείριση λήψης δεδομένων επιστροφής.

$.getJSON("test.php", function(json) {
	alert("JSON Data: " + json.users[3].name);
});

Κλήση αρχείου με αποστολή δεδομένων και διαχείριση δεδομένων επιστροφής.

$.getJSON("test.php", {name:'Manos', age:39}, function(json) {
	alert("JSON Data: " + json.users[3].name);
});

Η συνάρτηση $.getScript()

H $.getScript() λειτουργεί όπως και η $.get() με τη μόνη διαφορά ότι τα δεδομένα επιστροφής είναι τύπου (dataType) ‘script’ και επομένως δεν χρειάζεται η παραπάνω παράμετρος.
Επίσης όταν το script ληφθεί αυτόματα εκτελείται.

Η γενική μορφή της $.getScript() είναι:

$.getScript(url [,success(script, textStatus, jqXHR)]);

Η $.getScript() είναι μια συντομογραφία της παρακάτω γενικής συνάρτησης.

$.ajax({
	url:url,
	dataType:"script",
	success:success
});

Σημείωση: Η συνάρτηση callback εκτελείται όταν ληφθεί το σκριπτ και όχι όταν εκτελεστεί.

Παραδείγματα με $.getScript()

Απλή λήψη και εκτέλεση ενός αρχείου σκριπτ.

var jqxhr = $.getScript("test.js");

$.getScript("test.js");

Λήψη και εκτέλεση αρχείου σκριπτ με διαχείριση λάθους.

$.getScript("ajax/test.js")
.done(function(script, textStatus) {
	console.log( textStatus );
})
.fail(function(jqxhr, settings, exception) {
	$( "div.log" ).text( "Triggered ajaxError handler." );
});