AJAX - XMLHttpRequest

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

Αποστολή αίτησης στο διακομιστή

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

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
μέθοδος περιγραφή
open(method, url, async)

Ορίζεται ο τύπος αίτησης

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

GET ή POST?

Το GET είναι πιο απλό και γρηγορότερο από το POST και μπορεί να χρησιμοποιηθεί σε πολλές περιπτώσεις.

Ωστόσο, χρησιμοποιήστε πάντα το POST στις παρακάτω περιπτώσεις:

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

GET αίτηση

Μια απλή GET αίτηση:

Παράδειγμα

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

Δοκιμάστε το προσωπικά

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

Παράδειγμα

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

Δοκιμάστε το προσωπικά

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

Παράδειγμα

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

Δοκιμάστε το προσωπικά

POST αίτηση

Μια απλή POST αίτηση:

Παράδειγμα

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

Δοκιμάστε το προσωπικά

Αν θέλετε να POST δεδομένα όπως ένα HTML φόρμα, χρησιμοποιήστε setRequestHeader() Προσθέστε ένα HTTP κεφαλίδι. Παρακαλώ send() Ορίζεται η δεδομένα που πρέπει να στείλετε στη μέθοδο:

Παράδειγμα

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

Δοκιμάστε το προσωπικά

μέθοδος περιγραφή
setRequestHeader(κεφαλίδα, τιμή)

Προσθήκη κεφαλίδας HTTP στην αίτηση

  • κεφαλίδα：καθορίζει όνομα κεφαλίδας
  • τιμή：καθορίζει τιμή κεφαλίδας

url - αρχείο στον διακομιστή

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

xhttp.open("GET", "ajax_test.asp", true);

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

Ασύγχρονο - true ή false;

Για να αποστείλετε αίτημα ασύγχρονα:open() της μεθόδου async οι παράμετροι πρέπει να οριστούν ως true:

xhttp.open("GET", "ajax_test.asp", true);

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

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

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

ιδιότητα onreadystatechange

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

Αυτή η συνάρτηση είναι στο αντικείμενο XMLHttpResponse onreadystatechange Ορισμένος στις ιδιότητες:

Παράδειγμα

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 θα αφαιρεθεί από τα πρότυπα του Web, αλλά αυτός ο όρος μπορεί να χρειαστεί πολλά χρόνια.

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