AJAX Εισαγωγή

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

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

Το AJAX είναι το όνειρο ενός προγραμματιστή, γιατί μπορείτε:

  • Ανάγνωση δεδομένων από διακομιστή web - μετά τη φόρτωση της σελίδας

  • Ενημερώστε μια ιστοσελίδα χωρίς να φορτώσετε ξανά τη σελίδα

  • Αποστολή δεδομένων σε διακομιστή web - στο παρασκήνιο

Παράδειγμα AJAX

Αφήστε το AJAX να αλλάξει αυτό το κείμενο



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

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

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

</body>
</html>

Παράδειγμα AJAX Επεξήγηση

Σελίδα HTML

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>	<button type="button" onclick="loadDoc()">Change Content</button>
 </div>

</body>
</html>

Η σελίδα HTML περιέχει μια ενότητα <div> και ένα <button>.

Το <div> η ενότητα χρησιμοποιείται για την εμφάνιση πληροφοριών από έναν διακομιστή.

Το <κουμπί> καλεί μια συνάρτηση (αν γίνει κλικ).

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

Συνάρτηση loadDoc()

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    
document.getElementById("demo").innerHTML = this.responseText;
    }
  xhttp.open("GET", "ajax_info.txt", true);
  
xhttp.send();
}

Τι είναι το AJAX;

AJAX=Aσύγχρονο JavaScript And XML.

Το AJAX δεν είναι γλώσσα προγραμματισμού.

Το AJAX χρησιμοποιεί απλώς έναν συνδυασμό:

  • Ένα ενσωματωμένο αντικείμενο προγράμματος περιήγησης XMLHttpRequest (για να ζητήσετε δεδομένα από έναν διακομιστή ιστού)

  • JavaScript και HTML DOM (για εμφάνιση ή χρήση των δεδομένων)

Το AJAX είναι ένα παραπλανητικό όνομα. Οι εφαρμογές AJAX ενδέχεται να χρησιμοποιούν XML για τη μεταφορά δεδομένων, αλλά είναι εξίσου συνηθισμένο να μεταφέρονται δεδομένα ως απλό κείμενο ή κείμενο JSON.

Το AJAX επιτρέπει στις ιστοσελίδες να ενημερώνονται ασύγχρονα ανταλλάσσοντας δεδομένα με έναν διακομιστή web στα παρασκήνια. Αυτό σημαίνει ότι είναι δυνατή η ενημέρωση τμημάτων μιας ιστοσελίδας, χωρίς επαναφόρτωση ολόκληρης της σελίδας.

Πώς λειτουργεί το AJAX

  • 1. Συμβαίνει ένα συμβάν σε μια ιστοσελίδα (η σελίδα φορτώνεται, γίνεται κλικ σε ένα κουμπί)

  • 2. Ένα αντικείμενο XMLHttpRequest δημιουργείται από JavaScript

  • 3. Το αντικείμενο XMLHttpRequest στέλνει ένα αίτημα σε έναν διακομιστή web

  • 4. Ο διακομιστής επεξεργάζεται το αίτημα

  • 5. Ο διακομιστής στέλνει μια απάντηση πίσω στην ιστοσελίδα

  • 6. Η απάντηση διαβάζεται από JavaScript

  • 7. Η σωστή ενέργεια (όπως ενημέρωση σελίδας) εκτελείται από JavaScript

Σύγχρονα προγράμματα περιήγησης (Fetch API)

Τα σύγχρονα προγράμματα περιήγησης μπορούν να χρησιμοποιήσουν το Fetch API αντί για το αντικείμενο XMLHttpRequest.

Η διεπαφή Fetch API επιτρέπει στο πρόγραμμα περιήγησης ιστού να υποβάλλει αιτήματα HTTP σε διακομιστές ιστού.

Εάν χρησιμοποιείτε το αντικείμενο XMLHttpRequest, το Fetch μπορεί να κάνει το ίδιο με απλούστερο τρόπο.