01. AJAX Intro

AJAX Intro

Το AJAX είναι το όνειρο ενός developer, επειδή μπορεί να κάνει:

  • Ανάγνωση δεδομένων από διακομιστή ιστού – μετά τη φόρτωση της σελίδας
  • Ενημέρωση μιας ιστοσελίδα χωρίς να φορτωθεί ξανά η σελίδα
  • Αποστολή δεδομένων σε διακομιστή ιστού – στο παρασκήνιο

AJAX Παράδειγμα

Δοκιμάστε το »


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> χρησιμοποιείται για την προβολή πληροφοριών από ένα διακομιστή.

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

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

Συνάρτηση 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 χρησιμοποιεί απλά ένα συνδυασμό από:

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

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

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


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

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

Days
Hours
Minutes

01. AJAX Intro

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: