Εισαγωγή 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 JvaScript And XML.

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

Το AJAX είναι απλώς η σύνδεση:

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

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

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

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

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