03. AJAX Request

AJAX – Αποστολή Αίτησης σε Server


Το αντικείμενο XMLHttpRequest χρησιμοποιείται για την ανταλλαγή δεδομένων με ένα διακομιστή.


Στείλτε αίτημα σε διακομιστή

Για να στείλουμε ένα αίτημα σε ένα διακομιστή, χρησιμοποιούμε τις μεθόδους open() και send() του αντικειμένου XMLHttpRequest:

xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();

MethodDescription
open(method, url, async)Καθορίζει τον τύπο αίτησης

μέθοδος: ο τύπος της αίτησης: GET ή POST
url: η τοποθεσία (του αρχείου) διακομιστή
async: true (ασύγχρονη) ή false (σύγχρονη)
send()Στέλνει το αίτημα στο διακομιστή (χρησιμοποιείται για GET)
send(string)Στέλνει το αίτημα στον διακομιστή (χρησιμοποιείται για POST)

GET ή POST;

Η GETείναι απλούστερη και ταχύτερη από την POST, και μπορεί να χρησιμοποιηθεί στις περισσότερες περιπτώσεις.

Ωστόσο, χρησιμοποιείτε πάντα POST αιτήματα όταν:

  • Ένα αρχείο προσωρινής αποθήκευσης (cashed) δεν αποτελεί επιλογή (ενημέρωση αρχείου ή βάσης δεδομένων στο διακομιστή).
  • Αποστολή μεγάλου όγκου δεδομένων στον διακομιστή (το POST δεν έχει περιορισμούς μεγέθους).
  • Αποστολή εισαγωγής δεδομένων από χρήστη (η οποία μπορεί να περιέχει άγνωστους χαρακτήρες), το POST είναι πιο ισχυρό και ασφαλέστερο από το GET.

Αιτήσεις GET

Ένα απλό GETαίτημα:

Παράδειγμα

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

Δοκιμάστε τον εαυτό σας »

Στο παραπάνω παράδειγμα, ενδέχεται να λάβετε ένα προσωρινά αποθηκευμένο αποτέλεσμα. Για να αποφύγετε αυτό, προσθέστε ένα μοναδικό αναγνωριστικό στη διεύθυνση URL:

Παράδειγμα

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

Δοκιμάστε τον εαυτό σας »

Αν θέλετε να στείλετε πληροφορίες με τη GET μέθοδο, προσθέστε τις πληροφορίες στη διεύθυνση URL:

Παράδειγμα

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();

Δοκιμάστε τον εαυτό σας »


POST Αιτήσεις

Ένα απλό POST αίτημα:

Παράδειγμα

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Δοκιμάστε τον εαυτό σας »

Για τα δεδομένα POST όπως μια φόρμα HTML, προσθέστε μια κεφαλίδα HTTP με setRequestHeader(). Καθορίστε τα δεδομένα που θέλετε να στείλετε στη send() μέθοδο:

Παράδειγμα

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

Δοκιμάστε τον εαυτό σας »

MethodDescription
setRequestHeader(header, value)Προσθέτει κεφαλίδες HTTP στο αίτημα

header: καθορίζει το όνομα κεφαλίδας
value: καθορίζει την τιμή κεφαλίδας

Η διεύθυνση url – Ένα αρχείο σε ένα διακομιστή

Η παράμετρος Url της open() μεθόδου είναι μια διεύθυνση σε ένα αρχείο σε ένα διακομιστή:

xhttp.open(“GET”, “ajax_test.asp”, true);

Το αρχείο μπορεί να είναι οποιοδήποτε αρχείο, όπως .txt και .xml, ή αρχεία δέσμης ενεργειών διακομιστή όπως αρχεία .asp και .php (τα οποία μπορούν να εκτελέσουν ενέργειες στο διακομιστή πριν από την αποστολή της απάντησης πίσω).


Ασύγχρονη – True ή False;

Οι αιτήσεις διακομιστή πρέπει να αποστέλλονται ασύγχρονα.

Η παράμετρος async της μεθόδου open() πρέπει να είναι αληθής:

xhttp.open(“GET”, “ajax_test.asp”, true);

Με την ασύγχρονη αποστολή, η JavaScript δεν χρειάζεται να περιμένει την απάντηση του διακομιστή, αλλά μπορεί:

  • να εκτελέσει άλλα σενάρια κατά την αναμονή για απόκριση από τον διακομιστή
  • να ασχοληθεί με την απόκριση αφού η απάντηση είναι έτοιμη

Η ιδιότητα onreadystatechange

Με το αντικείμενο XMLHttpRequest μπορείτε να ορίσετε μια συνάρτηση που θα εκτελεστεί όταν το αίτημα λάβει μια απάντηση.

Η συνάρτηση ορίζεται στην ιδιότητα onreadystatechange του αντικειμένου XMLHttpResponse :

Παράδειγμα

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Δοκιμάστε το »

Θα μάθετε περισσότερα για την onreadystatechangeσε ένα επόμενο κεφάλαιο.


Συγχρονισμένο αίτημα

Για να εκτελέσετε ένα συγχρονισμένο αίτημα, αλλάξτε την τρίτη παράμετρο της open() μεθόδου σε false:

xhttp.open(“GET”, “ajax_info.txt”, false);

Μερικές φορές το async = false χρησιμοποιείται για γρήγορες δοκιμές. Θα βρείτε επίσης συγχρονισμένα αιτήματα σε παλαιότερο κώδικα JavaScript.

Δεδομένου ότι ο κώδικας θα περιμένει την ολοκλήρωση του διακομιστή, δεν υπάρχει ανάγκη για κάποια onreadystatechange συνάρτηση:

Παράδειγμα

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Δοκιμάστε το »

Η συγχρονισμένη XMLHttpRequest (async = false) δεν συνιστάται επειδή η JavaScript θα σταματήσει να εκτελείται μέχρι να είναι έτοιμη η απάντηση του διακομιστή. Εάν ο διακομιστής είναι απασχολημένος ή αργός, η εφαρμογή θα κρεμάσει ή θα σταματήσει.

Η συγχρονισμένη XMLHttpRequest βρίσκεται στη διαδικασία απομάκρυνσης από το πρότυπο ιστού, αλλά αυτή η διαδικασία μπορεί να διαρκέσει πολλά χρόνια.

Τα σύγχρονα εργαλεία προγραμματιστών ενθαρρύνονται να προειδοποιούν για τη χρήση συγχρονισμένων αιτημάτων και ενδέχεται να εμφανίσουν μια εξαίρεση InvalidAccessError όταν εμφανιστεί.

Days
Hours
Minutes

03. AJAX Request

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: