AJAX XMLHttpRequest

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

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

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

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

xhttp.open("GET", "ajax_info.txt", true);
 xhttp.send();
open(method, url, async)

Καθορίζει τον τύπο του αιτήματος

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

send()

Στέλνει το αίτημα στον διακομιστή (χρησιμοποιείται για το GET)

send(string)

Στέλνει το αίτημα στον διακομιστή (χρησιμοποιείται για το POST)

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

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

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

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

Ασύγχρονη - Σωστό ή Λάθος;

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

Η παράμετρος async του open() Η μέθοδος πρέπει να οριστεί σε true:

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

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

  • εκτελέστε άλλα σενάρια ενώ περιμένετε την απάντηση του διακομιστή

  • ασχοληθείτε με την απάντηση αφού η απάντηση είναι έτοιμη

Η προεπιλεγμένη τιμή για την παράμετρο async είναι async=true.

Μπορείτε να αφαιρέσετε με ασφάλεια την τρίτη παράμετρο από τον κώδικά σας.

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

Αίτημα GET ή αίτημα POST;

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

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

  • Ένα αρχείο προσωρινής αποθήκευσης δεν αποτελεί επιλογή (ενημέρωση αρχείου ή βάσης δεδομένων στον διακομιστή).

  • Αποστολή μεγάλου όγκου δεδομένων στον διακομιστή (το POST δεν έχει περιορισμούς μεγέθους).

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

GET αιτήματα

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

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "demo_get.asp");
  xhttp.send();
}
</script>

</body>
</html>

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

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "demo_get.asp?t=" + Math.random());
  xhttp.send();
}
</script>

</body>
</html>

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

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
  xhttp.send();
}
</script>
 
</body>
</html>

Ο τρόπος με τον οποίο ο διακομιστής χρησιμοποιεί την είσοδο και πώς ο διακομιστής ανταποκρίνεται σε ένα αίτημα, εξηγείται σε επόμενο κεφάλαιο.

ΑΝΑΡΤΗΣΗ αιτημάτων

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

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>
 
<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("POST", "demo_post.asp");
  xhttp.send();
}
</script>

</body>
</html>

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

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>
 
<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("POST", "demo_post2.asp");
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("fname=Henry&lname=Ford");
}
</script>

</body>
</html>
setRequestHeader(header, value)

Προσθέτει κεφαλίδες HTTP στο αίτημα

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

Σύγχρονη Αίτηση

Για να εκτελέσετε ένα σύγχρονο αίτημα, αλλάξτε την τρίτη παράμετρο στη μέθοδο 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;

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

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "ajax_info.txt", false);
  xhttp.send();
  document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>

</body>
</html>

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

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