AJAX - XMLHttpRequest 对象
- Προηγούμενη σελίδα AJAX 简介
- Επόμενη σελίδα AJAX αίτημα
Το αντικείμενο XMLHttpRequest είναι η βάση του AJAX.
- Δημιουργία αντικειμένου XMLHttpRequest
- Ορισμός συνάρτησης回调
- Ανοίγοντας το αντικείμενο XMLHttpRequest
- Αποστολή αιτήματος στο διακομιστή
Αντικείμενο XMLHttpRequest
Όλοι οι σύγχρονοι περιηγητές υποστηρίζουν Αντικείμενο XMLHttpRequest.
Το αντικείμενο XMLHttpRequest μπορεί να χρησιμοποιηθεί για την ανταλλαγή δεδομένων με τον διακομιστή Web στο παρασκήνιο. Αυτό σημαίνει ότι μπορεί να ενημερωθεί μέρος της ιστοσελίδας χωρίς να χρειάζεται να ξαναφορτωθεί ολόκληρη η σελίδα.
Δημιουργία αντικειμένου XMLHttpRequest
Όλοι οι σύγχρονοι περιηγητές (Chrome, Firefox, IE, Edge, Safari, Opera) έχουν ενσωματωμένο Αντικείμενο XMLHttpRequest.
Γραμματική δημιουργίας αντικειμένου XMLHttpRequest:
variable = new XMLHttpRequest();
Ορισμός συνάρτησης回调
Η συνάρτηση回调 είναι μια συνάρτηση που μεταδίδεται ως παράμετρος σε μια άλλη συνάρτηση.
Σε αυτή την περίπτωση, η συνάρτηση回调 πρέπει να περιέχει τον κώδικα που πρέπει να εκτελεστεί όταν η απάντηση είναι έτοιμη.
xhttp.onload = function() {
// Τι να κάνετε όταν η απάντηση είναι έτοιμη
}
Αποστολή αίτησης
Για να αποστείλετε αίτηση στον διακομιστή, μπορείτε να χρησιμοποιήσετε το αντικείμενο XMLHttpRequest open() και send() Μέθοδος:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Παράδειγμα
// Δημιουργία αντικειμένου XMLHttpRequest
const xhttp = new XMLHttpRequest();
// Ορισμός συνάρτησης回调
xhttp.onload = function() {
// Μπορείτε να χρησιμοποιήσετε τα δεδομένα εδώ
}
// Αποστολή αίτησης
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Πρόσβαση μεταξύ τομέων (Access Across Domains)
Από ασφαλείας λόγους, οι σύγχρονοι περιηγητές δεν επιτρέπουν την πρόσβαση μεταξύ τομέων.
Αυτό σημαίνει ότι η ιστοσελίδα και το αρχείο XML που προσπαθεί να φορτώσει πρέπει να βρίσκονται στον ίδιο διακομιστή.
Τα παραδείγματα στο CodeW3C.com ανοίγουν αρχεία XML που βρίσκονται στον τομέα CodeW3C.com.
Αν θέλετε να χρησιμοποιήσετε τον παραπάνω παράδειγμα στο ένα από τα ιστοσελίδες σας, το αρχείο XML που φορτώνετε πρέπει να βρίσκεται στον δικό σας διακομιστή.
Μέθοδοι αντικειμένου XMLHttpRequest
| Μέθοδος | Περιγραφή |
|---|---|
| new XMLHttpRequest() | Δημιουργεί νέο αντικείμενο XMLHttpRequest. |
| abort() | Ακυρώνει την τρέχουσα αίτηση. |
| getAllResponseHeaders() | Επιστρέφει πληροφορίες κεφαλίδας. |
| getResponseHeader() | Επιστρέφει συγκεκριμένες πληροφορίες κεφαλίδας. |
| open(method, url, async, user, psw) |
Ορίζει το αίτημα.
|
| send() | Αποστέλλει αίτηση στον διακομιστή, χρησιμοποιείται για αίτησεις GET. |
| send(string) | Αποστέλλει αίτηση στον διακομιστή, χρησιμοποιείται για αίτησεις POST. |
| setRequestHeader() | Προσθέτει ένα όνομα/τιμή στο κεφαλίδι που θα σταλεί. |
Αντικείμενο XMLHttpRequest ιδιότητες
| Αξία | Περιγραφή |
|---|---|
| onload | Ορίζει τη συνάρτηση που καλείται όταν λαμβάνεται η αίτηση (φορτίζεται). |
| onreadystatechange | Ορίζει τη συνάρτηση που καλείται όταν αλλάζει η τιμή του atribου readyState. |
| readyState |
Αποθηκεύει την κατάσταση του XMLHttpRequest
|
| responseText | responseText |
| Μετατρέπει την απάντηση σε μορφή κειμένου | responseXML |
| status |
Επιστρέφει τον αριθμό κατάστασης της αίτησης
Για πλήρη λίστα επισκεφθείτε Εγχειρίδιο αναφοράς μηνυμάτων HTTP |
| statusText | Μετατρέπει την απάντηση σε δεδομένα XML |
Επιστρέφει το κείμενο κατάστασης (π.χ. "OK" ή "Not Found")
onload attribute
Πρέπει να ορίσετε μια αναδρομική συνάρτηση στο XMLHttpRequest αντικείμενο onload Ορίζει τη συνάρτηση σε αυτό το attribute:
Παράδειγμα
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Πολλές αναδρομικές συναρτήσεις
Αν στο ιστότοπο υπάρχουν πολλές εργασίες AJAX, πρέπει να δημιουργηθεί μια συνάρτηση που εκτελεί το XMLHttpRequest αντικείμενο και να δημιουργηθεί μια αναδρομική συνάρτηση για κάθε εργασία AJAX
Η κλήση της συνάρτησης πρέπει να περιλαμβάνει το URL και τη συνάρτηση που θα εκτελεστεί όταν η απάντηση είναι έτοιμη
Παράδειγμα
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// Εδώ είναι η ενέργεια
}
function myFunction2(xhttp) {
// Εδώ είναι η ενέργεια
}
onreadystatechange attribute
readyState Αξία αποθηκεύει την κατάσταση του XMLHttpRequest
onreadystatechange Αξία ορίζει μια αναδρομική συνάρτηση που εκτελείται όταν αλλάζει το readyState
status Αξίες και statusText Αξία αποθηκεύει την κατάσταση του XMLHttpRequest αντικειμένου
| Αξία | Περιγραφή |
|---|---|
| onreadystatechange | Ορίζει τη συνάρτηση που καλείται όταν αλλάζει το readyState attribute |
| readyState |
Αποθηκεύει την κατάσταση του XMLHttpRequest
|
| status |
Επιστρέφει τον αριθμό κατάστασης της αίτησης
Για πλήρη λίστα επισκεφθείτε Εγχειρίδιο αναφοράς μηνυμάτων HTTP |
| statusText | statusText |
Επιστρέφει το κείμενο κατάστασης (π.χ. "OK" ή "Not Found").
Κάθε φορά που αλλάζει η κατάσταση readyState, καλείται η συνάρτηση onreadystatechange. 4 και status είναι 200 όταν η απάντηση είναι έτοιμη:
Παράδειγμα
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
Το συμβάν onreadystatechange εκκινήθηκε τέσσερις φορές (1-4), κάθε φορά που αλλάζει η κατάσταση readyState.
- Προηγούμενη σελίδα AJAX 简介
- Επόμενη σελίδα AJAX αίτημα
