Εισαγωγή AJAX

Το AJAX είναι ο ονειρώδης φίλος του προγραμματιστή, επειδή μπορείτε να:

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

Αξίωμα AJAX

Κάντε κλικ στο παρακάτω κουμπί για να αλλάξει το κείμενο από το Ajax:

Προσπαθήστε μόνοι σας

Ανάλυση παραδείγματος AJAX

Σελίδα HTML

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Ας κάνουμε το AJAX να αλλάξει αυτό το κείμενο</h2>
  <button type="button" onclick="loadDoc()">Αλλαγή κειμένου</button>
</div>
</body>
</html>

Αυτό το HTML σελίδα περιέχει ένα <div> και ένα <button>.

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

<button> Κλήση λειτουργίας ( όταν πατηθεί ).

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

Function loadDoc()
function loadDoc() {
  var 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", true);
  xhttp.send();
}

Τι είναι το AJAX;

AJAX = Asynchronous JavaScript And XML.

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

Το AJAX αποτελείται από:

  • Το ενσωματωμένο στο browser αντικείμενο XMLHttpRequest (αίτηση δεδομένων από τον διακομιστή web)
  • JavaScript και HTML DOM (εμφάνιση ή χρήση δεδομένων)

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

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

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

AJAX
  1. Στην ιστοσελίδα συμβαίνει ένα γεγονός (φόρτωση σελίδας, κλικ στο κουμπί)
  2. Η JavaScript δημιουργεί αντικείμενο XMLHttpRequest
  3. Το αντικείμενο XMLHttpRequest στέλνει αίτηση στον διακομιστή web
  4. Ο διακομιστής επεξεργάζεται την αίτηση
  5. Ο διακομιστής στέλνει την απάντηση πίσω στην ιστοσελίδα
  6. Η JavaScript διαβάζει την απάντηση
  7. Η JavaScript εκτελεί σωστά την ενέργεια (π.χ. ενημέρωση της σελίδας)