XML HttpRequest

Όλοι οι σύγχρονοι περιηγητές έχουν ενσωματωμένο το αντικείμενο XMLHttpRequest για να ζητήσουν δεδομένα από τον διακομιστή.

Το αντικείμενο XMLHttpRequest

Το αντικείμενο XMLHttpRequest μπορεί να χρησιμοποιηθεί για να ζητήσει δεδομένα από τον διακομιστή του Web.

Το αντικείμενο XMLHttpRequest είναιΟ όνειρος του προγραμματιστήγιατί μπορείτε να:

  • Ενημέρωση της ιστοσελίδας - χωρίς να ξαναφορτωθεί η σελίδα
  • Αίτηση δεδομένων από τον διακομιστή - μετά την φόρτωση της σελίδας
  • Λήψη δεδομένων από τον διακομιστή - μετά την φόρτωση της σελίδας
  • Αποστολή δεδομένων στο διακομιστή - στο παρασκήνιο

Παράδειγμα XMLHttpRequest

Όταν πληκτρολογείτε χαρακτήρες στο παρακάτω πεδίο εισαγωγής, το XMLHttpRequest θα αποσταλεί στο διακομιστή και θα επιστρέψει ορισμένες προτάσεις ονομάτων (από τον διακομιστή):

Παράδειγμα

Παρακαλώ εισάγετε το όνομα σας στο παρακάτω πεδίο εισαγωγής:

Όνομα: Συμβουλές: Η ενότητα AJAX του εγχειριδίου εξηγεί το παραπάνω παράδειγμα.

Αποστολή XMLHttpRequest

Παρακάτω είναι η κοινή γλώσσα JavaScript που χρησιμοποιείται με το αντικείμενο XMLHttpRequest:

Παράδειγμα

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    αν (this.readyState == 4 && this.status == 200) {
       // Τυπική ενέργεια που θα εκτελεστεί όταν το έγγραφο είναι έτοιμο:
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();

Προσπαθήστε το προσωπικά

Παράδειγμα εξήγησης

Η πρώτη γραμμή του παραπάνω παραδείγματος δημιουργεί ένα Το αντικείμενο XMLHttpRequest:

var xhttp = new XMLHttpRequest();

onreadystatechange η ιδιότητα καθορίζει τη συνάρτηση που θα εκτελεστεί κάθε φορά που το αντικείμενο XMLHttpRequest αλλάζει κατάσταση:

xhttp.onreadystatechange = function()

όταν readyState η ιδιότητα είναι 4 και status Όταν η ιδιότητα είναι 200, η απάντηση είναι έτοιμη:

αν (this.readyState == 4 && this.status == 200)

responseText 属性以文本字符串形式返回服务器响应。

文本字符串可用于更新网页:

document.getElementById("demo").innerHTML = xhttp.responseText;

您将在本教程的 AJAX 章节中学到有关 XMLHttpRequest 对象的更多内容。