jQuery και AJAX

jQuery και AJAX

Η jQuery έχει μια πλούσια συλλογή απο μεθόδους (συναρτήσεις) για την ανάπτυξη εφαρμογών σύμφωνα με την τεχνολογία AJAX.

Τι είναι η τεχνολογία AJAX

Η τεχνολογία AJAX προέρχεται απο τα αρχικά Asynchronous JavaScript and XML και είναι μια τεχνολογία που μας επιτρέπει την παραγωγεί γρήγορων και δυναμικών ιστοσελίδων. Η AJAX επιτρέπει σε μια ιστοσελίδα να ανανεώνεται ασύγχρονα ανταλλάσοντας μικρές ποσότητες δεδομένων με τον server. Αυτό σημαίνει πως είναι δυνατή η ανανέωση τμημάτων της ιστοσελίδας, δίχως την ανανέωση της.

jQuery και AJAX

H jQuery μας παρέχει μια πλούσια γκάμα απο συναρτήσεις για τον προγραμματισμό και την χρήση της AJAX, με την jQuery μπορούμε να κάνουμε αιτήσεις TXT, HTML, XML ή JSON σε έναν απομακρυσμένο server χρησιμοποιώντας είται το HTTP Get είτε το HTTP Post. Έτσι μπορούμε να φορτώσουμε απομακρυσμένα δεδομένα απευθείας σε κάποιο στοιχείο της ιστοσελίοδας μας.

Write Less, Do More

Η βασική μέθοδος της jQuery για τον χειρισμό της AJAX είναι η load(), μια απλή και παράλληλα πολύ ισχυρή μέθοδος που συντάσσεται ως εξής:

$(selector).load(url,data,callback)

Χρησιμοιπούμε το selector για να ορίσουμε τα στοιχεία που θέλουμε να αλλάξουν και την παράμετρο url για να ορίσουμε την διεύθυνση στην οποία βρίσκονται τα δεδομένα μας. Εάν θέλοιυμε να στείλουμε δεδομένα στον server τότε κάνουμε χρήση και της παραμέτρου data, ενώ αν θέλουμε να καλέσουμε μια συνάρτηση μετά την ολοκλήρωση της συνάρτησης load() τότε χρησιμοποιούμε και την παράμετρο callback.

$(document).ready(function(){
   $("button").click(function(){
      $("#test").load('test.txt');
   });
});

Στο παραπάνω απόσμασμα κώδικα, όταν κάνουμε κλικ στο κουμπί τότε θα φορτωθεί το περιεχόμενο του αρχείου test.txt στο div με id #test.

Μέθοδος ajax()

Εκτός απο την μέθοδο load() η jQuery μας παρέχει και μια άλλη μέθοδο, την ajax() για την χρήση της AJAX που προσφέρει περισσότερες δυνατότητες και ρυθμίσεις αλλά είναι και πιο δύσκολη στην χρήση της. H μέθοδος ajax() συντάσσεται ως εξής:

$.ajax(options)

H παράμετρος options παίρνει παραμέτρους και τιμές σε ζεύγη name|value:

$(document).ready(function(){
   $("button").click(function(){
      $.ajax({url:"test1.txt", success:function(result){
        $("div").html(result);
     }});
   });
});

Περισσότερες πληροφορίες για jQuery και AJAX

Για περισσότες πληροφορίες, μπορείτε να επισκεφθείτε την επίσιμη ιστοσελίδα της jQuery.

Προσθήκη σχολίου