Ένα απλό παράδειγμα χρήσης PHP και AJAX. Ερωτήματα χαμηλού επιπέδου. μέθοδος ajax

Σύνταξη και περιγραφή:

Επιστρεφόμενη τιμή: Μια παρουσία του αντικειμένου XHR (XMLHttpRequest).

Επιλογές:

επιλογές – (αντικείμενο) Ένα αντικείμενο με τη μορφή ενός συνόλου ιδιοτήτων (κλειδί: ζεύγη "τιμής") που καθορίζουν παραμέτρους για ένα αίτημα Ajax. Υπάρχουν πολλές πιθανές παράμετροι (ιδιότητες του αντικειμένου επιλογών) και συνήθως στις περισσότερες περιπτώσεις δεν χρησιμοποιούνται όλες, αλλά μόνο μερικές από αυτές. Επιπλέον, όλες αυτές οι παράμετροι είναι προαιρετικές, γιατί Η τιμή οποιουδήποτε από αυτά μπορεί να οριστεί ως προεπιλογή χρησιμοποιώντας τη μέθοδο $.ajaxSetup().

Οι ακόλουθες ιδιότητες του αντικειμένου επιλογών είναι διαθέσιμες για τη διαμόρφωση ενός αιτήματος Ajax:

• async – (boolean - λογική τιμή) Η προεπιλεγμένη τιμή είναι true, και στη συνέχεια όλα τα αιτήματα εκτελούνται ασύγχρονα (Γι' αυτό χρησιμοποιείται το Ajax, ώστε οι λειτουργίες να εκτελούνται παράλληλα). Εάν ορίσετε την τιμή σε false, κάτι που είναι εξαιρετικά ανεπιθύμητο, το αίτημα θα εκτελεστεί ως σύγχρονο (Άλλες ενέργειες του προγράμματος περιήγησης ενδέχεται να αποκλειστούν κατά την εκτέλεση του σύγχρονου αιτήματος. Και γενικά το πρόγραμμα περιήγησης μπορεί να σταματήσει να ανταποκρίνεται).

  beforeSend(XHR) – (συνάρτηση) Μια συνάρτηση που καλείται πριν από την αποστολή ενός αιτήματος. Χρησιμοποιείται για τον ορισμό πρόσθετων (προσαρμοσμένων) κεφαλίδων ή για την εκτέλεση άλλων προκαταρκτικών λειτουργιών. Αποστέλλεται μια παρουσία του αντικειμένου XHR (XMLHttpRequest) ως το μοναδικό όρισμα. Εάν η συνάρτηση επιστρέψει false, το αίτημα ακυρώνεται.

  cache – (boolean - λογική τιμή) Εάν είναι false, τότε οι σελίδες που ζητήθηκαν δεν αποθηκεύονται προσωρινά από το πρόγραμμα περιήγησης. (Το πρόγραμμα περιήγησης μπορεί να εμφανίζει αποτελέσματα από τη μνήμη cache. Για παράδειγμα, όταν τα δεδομένα στον διακομιστή απόκριση σε ένα αίτημα Ajax είναι πάντα νέα, η προσωρινή αποθήκευση παρεμβαίνει). Από προεπιλογή ισχύει για τύπους δεδομένων κειμένου, xml, html, json. Για τύπους δεδομένων "script" και "jsonp" η προεπιλεγμένη τιμή είναι false.

  πλήρης (XHR, textStatus ) – (συνάρτηση) Μια συνάρτηση που καλείται στο τέλος της αίτησης, ανεξάρτητα από την επιτυχία ή την αποτυχία της (και μετά τις συναρτήσεις επιτυχίας και σφάλματος, εάν έχουν καθοριστεί). Η συνάρτηση παίρνει δύο ορίσματα: μια παρουσία του αντικειμένου XHR (XMLHttpRequest) και μια συμβολοσειρά που υποδεικνύει την κατάσταση "επιτυχίας" ή "σφάλματος" (σύμφωνα με τον κωδικό κατάστασης στην απάντηση στο αίτημα).

  contentType – (string) Ο τύπος περιεχομένου στο αίτημα (κατά την αποστολή δεδομένων στον διακομιστή). Οι προεπιλογές είναι "application/x-www-form-urlencoded" (κατάλληλο για τις περισσότερες περιπτώσεις και είναι επίσης η προεπιλογή για τις υποβολές φορμών).

  πλαίσιο – (αντικείμενο) Αυτό το αντικείμενο θα γίνει το περιβάλλον (αυτό) για όλες τις συναρτήσεις επανάκλησης που σχετίζονται με αυτό το αίτημα Ajax (για παράδειγμα, για τις συναρτήσεις επιτυχίας ή σφάλματος).

  $.ajax(( url: "test.html",
  πλαίσιο: έγγραφο.σώμα,
  επιτυχία: λειτουργία())(
  $(this).addClass("ολοκληρώθηκε");
  }});

  δεδομένα – (συμβολοσειρά | αντικείμενο) Δεδομένα που αποστέλλονται με το αίτημα στον διακομιστή. Μετατρέπονται σε μια συμβολοσειρά ερωτήματος και από προεπιλογή κωδικοποιούνται σε μια μορφή που μοιάζει με URL (η παράμετρος processData είναι υπεύθυνη για την αυτόματη κωδικοποίηση στη μορφή URL).

  Η συμβολοσειρά προσαρτάται στη συμβολοσειρά ερωτήματος διεύθυνσης URL εάν το αίτημα υποβληθεί χρησιμοποιώντας τη μέθοδο GET. Εάν το αίτημα εκτελείται χρησιμοποιώντας τη μέθοδο POST, τότε τα δεδομένα μεταδίδονται στο σώμα του αιτήματος.

  Εάν η δεδομένη παράμετρος είναι ένα αντικείμενο ως σύνολο ζευγών ιδιοτήτων_όνομα/τιμής και η τιμή είναι ένας πίνακας, τότε το jQuery σειριοποιεί το αντικείμενο σε μια ακολουθία πολλαπλών τιμών με το ίδιο κλειδί.

  Για παράδειγμα, (Foo: ["bar1", "bar2"])θα γίνει "&Foo=bar1&Foo=bar2" .

  dataFilter(data, type) – (συνάρτηση) Μια συνάρτηση που καλείται εάν το αίτημα είναι επιτυχές και χρησιμοποιείται για την επεξεργασία των δεδομένων που λαμβάνονται στην απάντηση του διακομιστή στο αίτημα. Επιστρέφει τα δεδομένα που υποβλήθηκαν σε επεξεργασία σύμφωνα με την παράμετρο "dataType" και τα μεταβιβάζει στη συνάρτηση επιτυχίας. Τα δεδομένα του κειμένου και των τύπων xml μεταβιβάζονται χωρίς άμεση επεξεργασία στη συνάρτηση επιτυχίας μέσω της ιδιότητας answerText ή answerHTML του αντικειμένου XMLHttpRequest. Η συνάρτηση dataFilter παίρνει δύο ορίσματα:

• δεδομένα - ληφθέντα δεδομένα (σώμα απόκρισης διακομιστή),
• type - ο τύπος αυτών των δεδομένων (παράμετρος "dataType").

• dataType – (string) Μια συμβολοσειρά που ορίζει το όνομα του τύπου δεδομένων που αναμένεται στην απόκριση διακομιστή. Εάν ο τύπος δεδομένων δεν έχει καθοριστεί, το ίδιο το jQuery προσπαθεί να τον προσδιορίσει, με βάση τον τύπο MIME της απόκρισης διακομιστή. Έγκυρες τιμές: "xml", "html", "script", "json", "jsonp", "text". (Αυτό είναι απαραίτητο για τον καθορισμό μιας μεθόδου επεξεργασίας των δεδομένων που λαμβάνονται στην απόκριση αιτήματος από τη συνάρτηση dataFilter πριν μεταφερθούν στη συνάρτηση επανάκλησης επιτυχίας.)

  error(XHR, textStatus, errorThrown) – (συνάρτηση) Μια συνάρτηση που καλείται όταν το αίτημα αποτύχει (αν ο κωδικός κατάστασης στην απόκριση διακομιστή υποδεικνύει σφάλμα). Στη συνάρτηση μεταβιβάζονται τρία ορίσματα:

• XHR - μια παρουσία του αντικειμένου XMLHttpRequest,
• textStatus - μια συμβολοσειρά που περιγράφει τον τύπο του σφάλματος που παρουσιάστηκε ("timeout", "error", "notmodified" ή "parsererror"),
• errorThrown - προαιρετική παράμετρος - αντικείμενο εξαίρεσης, εάν υπάρχει (επιστρέφεται από μια παρουσία του αντικειμένου XHR).

• καθολική – (boolean - λογική τιμή) Προεπιλογές σε true (επιτρέπει την κλήση διεκπεραιωτών καθολικών συμβάντων σε διάφορα στάδια ενός αιτήματος Ajax, για παράδειγμα, τις λειτουργίες ajaxStart ή ajaxStop). Η τιμή έχει οριστεί σε false για να αποτρέψει την πυροδότηση τους. (Χρησιμοποιείται για τη διαχείριση συμβάντων Ajax).

  ifModified – (boolean - boolean value) Εάν οριστεί σε true, τότε το αίτημα θεωρείται επιτυχές μόνο εάν τα δεδομένα στην απόκριση έχουν αλλάξει από το τελευταίο αίτημα (το jQuery καθορίζει εάν ένα στοιχείο στη μνήμη cache του προγράμματος περιήγησης ταιριάζει με αυτό που υπάρχει στον διακομιστή ελέγχοντας η κεφαλίδα "Τελευταία τροποποίηση" με την ημερομηνία της τελευταίας τροποποίησης του περιεχομένου και στο jQuery 1.4 ελέγχεται επίσης η κεφαλίδα "Etag" - μια συμβολοσειρά με την έκδοση του στοιχείου). Η προεπιλεγμένη τιμή είναι false, δηλ. Η επιτυχία του αιτήματος δεν εξαρτάται από κεφαλίδες ή αλλαγές στην απάντηση.

  jsonp – (συμβολοσειρά) Αντικαθιστά το όνομα της συνάρτησης επανάκλησης για ένα αίτημα jsonp μεταξύ τομέων. Αντικαθιστά τη λέξη-κλειδί επιστροφής κλήσης στο τμήμα "callback=?" μια συμβολοσειρά αιτήματος GET (που επισυνάπτεται στη διεύθυνση URL) ή αποστέλλεται στο σώμα αιτήματος όταν αποστέλλεται χρησιμοποιώντας τη μέθοδο POST. Από προεπιλογή, το jQuery δημιουργεί αυτόματα ένα μοναδικό όνομα για τη λειτουργία επανάκλησης.

  jsonpCallback – (string) Καθορίζει το όνομα της συνάρτησης επανάκλησης για το αίτημα jsonp. Αυτή η τιμή θα χρησιμοποιηθεί αντί για το τυχαίο όνομα που δημιουργείται αυτόματα από τη βιβλιοθήκη jQuery. Η χρήση αυτής της παραμέτρου σάς επιτρέπει να αποφύγετε την προσωρινή αποθήκευση των αιτημάτων GET στο πρόγραμμα περιήγησης. Συνιστάται να επιτρέπεται στο jQuery να δημιουργεί ένα νέο όνομα για κάθε νέο αίτημα μεταξύ τομέων προς τον διακομιστή για ευκολία διαχείρισης αιτημάτων και απόκρισης.

  κωδικός πρόσβασης – (string) Ο κωδικός πρόσβασης που θα χρησιμοποιηθεί ως απόκριση σε αίτημα εξουσιοδότησης HTTP στον διακομιστή.

  processData – (boolean) Οι προεπιλογές σε true και τα δεδομένα που μεταβιβάζονται στον διακομιστή στην παράμετρο δεδομένων μετατρέπονται σε μια συμβολοσειρά ερωτήματος με τύπο περιεχομένου "Application/X-WWW-forms-urlencoded" και κωδικοποιούνται. Εάν αυτή η επεξεργασία δεν είναι επιθυμητή (όταν πρέπει να σταλούν άλλα δεδομένα στον διακομιστή, όπως ένα αντικείμενο DOMDocument ή xml), τότε μπορεί να παρακαμφθεί ορίζοντας αυτήν την παράμετρο σε false.

  scriptCharset – (string) Κατά την εκτέλεση αιτημάτων GET και αιτημάτων που στοχεύουν δεδομένα "jsonp" ή "script", καθορίζει την κωδικοποίηση χαρακτήρων αιτήματος (για παράδειγμα, "UTF-8" ή "CP1251"). Χρήσιμο για διαφορές μεταξύ κωδικοποιήσεων πελάτη και διακομιστή.

  success(data, textStatus, XHR ) – (συνάρτηση) Μια συνάρτηση που καλείται μετά από ένα επιτυχημένο αίτημα (εάν ο κωδικός κατάστασης στην απάντηση στο αίτημα υποδεικνύει επιτυχία). Στη συνάρτηση μεταβιβάζονται τρία ορίσματα:

• δεδομένα - δεδομένα που επιστρέφονται από τον διακομιστή στην απόκριση, προεπεξεργασμένα από τη συνάρτηση dataFilter σύμφωνα με την τιμή της παραμέτρου dataType,
• textStatus - μια συμβολοσειρά με κωδικό κατάστασης που υποδεικνύει επιτυχία,
• Το XHR είναι μια παρουσία του αντικειμένου XMLHttpRequest.

• timeout – (αριθμός) Ορίζει το μέγιστο χρόνο αναμονής για μια απάντηση διακομιστή σε χιλιοστά του δευτερολέπτου. Προηγείται της ρύθμισης του καθολικού ορίου χρονικού ορίου μέσω $.AjaxSetup. Εάν ξεπεραστεί το όριο χρονικού ορίου, το αίτημα ματαιώνεται και καλείται το σφάλμα λειτουργίας χειρισμού σφαλμάτων (εάν έχει εγκατασταθεί). Αυτό μπορεί να χρησιμοποιηθεί, για παράδειγμα, για να εκχωρήσετε σε ένα συγκεκριμένο αίτημα μεγαλύτερο χρονικό όριο από το χρονικό όριο που έχει οριστεί για όλα τα αιτήματα.

  Παραδοσιακό – (boolean) Πρέπει να οριστεί σε true για να χρησιμοποιείται η παραδοσιακή (απλοποιημένη) σειριοποίηση δεδομένων κατά την αποστολή (χωρίς αναδρομική μετατροπή σε μια σειρά αντικειμένων ή πινάκων που μοιάζει με URL που είναι ένθετα μέσα σε άλλους πίνακες ή αντικείμενα).

  type – (string) Μέθοδος HTTP για τη μετάδοση δεδομένων κατά την εκτέλεση μιας αίτησης. Από προεπιλογή, τα δεδομένα μεταφέρονται χρησιμοποιώντας τη μέθοδο GET. Συνήθως χρησιμοποιούνται GET ή POST. Μπορείτε επίσης να χρησιμοποιήσετε τις μεθόδους PUT και DELETE, αλλά αυτό δεν συνιστάται λόγω του γεγονότος ότι δεν υποστηρίζονται από όλα τα προγράμματα περιήγησης.

  url – (string) Μια συμβολοσειρά που περιέχει τη διεύθυνση URL στην οποία αποστέλλεται το αίτημα. Από προεπιλογή αυτή είναι η τρέχουσα σελίδα.

  όνομα χρήστη – (string) Όνομα χρήστη που θα χρησιμοποιηθεί για την εξουσιοδότηση HTTP στον διακομιστή.

  xhr – (συνάρτηση) Μια συνάρτηση που καλείται να δημιουργήσει ένα αντικείμενο XMLHttpRequest. Από προεπιλογή, η δημιουργία ενός αντικειμένου XHR υλοποιείται μέσω του ActiveXObject στο πρόγραμμα περιήγησης IE ή μέσω του ενσωματωμένου αντικειμένου τύπου XMLHttpRequest σε άλλες περιπτώσεις.

// Εκτελέστε μια ασύγχρονη αίτηση Ajax χρησιμοποιώντας τη μέθοδο POST. // Στείλτε δεδομένα στον διακομιστή και, εάν είναι επιτυχής, εμφανίστε // την απόκριση διακομιστή σε ένα παράθυρο διαλόγου. $.ajax(( type: "POST", url: "test.php", data: "name=John&location=Boston", success: function(msg)( alert("Data Saved: " + msg); ) )) ;

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

Ελπίζω ότι θα είναι χρήσιμο για την κατανόηση του τι είναι το AJAX και σε τι χρησιμοποιείται.

Τι είναι το AJAX; Παράδειγμα υλοποίησης.

AJAX, ή περισσότερο, ΕΝΑσύγχρονος J avascript ΕΝΑ nd Χ ml είναι μια τεχνολογία για την αλληλεπίδραση με τον διακομιστή χωρίς επαναφόρτωση σελίδων.

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

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

Εδώ είναι ο κώδικας του κουμπιού στο παραπάνω παράδειγμα:

Όταν γίνεται κλικ, καλεί τη συνάρτηση ψήφου, η οποία στέλνει ένα αίτημα στον διακομιστή, περιμένει μια απάντηση και, στη συνέχεια, εμφανίζει ένα μήνυμα σχετικά με αυτό στο div κάτω από το κουμπί:

Η απάντηση του διακομιστή θα είναι εδώ

Για την ανταλλαγή δεδομένων με τον διακομιστή, χρησιμοποιείται ένα ειδικό αντικείμενο XmlHttpRequest, το οποίο μπορεί να στείλει ένα αίτημα και να λάβει απάντηση από τον διακομιστή. Μπορείτε να δημιουργήσετε ένα τέτοιο αντικείμενο cross-browser, για παράδειγμα, ως εξής:

Συνάρτηση getXmlHttp())( var xmlhttp; try ( xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); ) catch (e) ( try ( xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); ) catch (E) ( xmlhttp = false; ) ) if (!xmlhttp && typeof XMLHttpRequest!="undefined") ( xmlhttp = new XMLHttpRequest(); ) return xmlhttp;

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

Δεν θα σταθούμε σε αυτό εδώ και θα πάμε κατευθείαν στη λειτουργία ψηφοφορίας:

// Κώδικας ψηφοφορίας javascript από το παράδειγμα συνάρτησης vote() ( // (1) δημιουργήστε ένα αντικείμενο για ένα αίτημα στον διακομιστή var req = getXmlHttp() // (2) // span δίπλα στο κουμπί // που θα εμφανιστεί η πρόοδος εκτέλεσης var statusElem = document.getElementById("vote_status") req.onreadystatechange = function() ( // onreadystatechange ενεργοποιείται όταν ληφθεί η απάντηση διακομιστή εάν (req.readyState == 4) ( // εάν το αίτημα έχει ολοκληρωθεί εκτέλεση statusElem.innerHTML = req.statusText / / εμφάνιση κατάστασης (Δεν βρέθηκε, ΟΚ..) if(req.status == 200) ( // εάν η κατάσταση είναι 200 ​​(OK) - απαντήστε στην ειδοποίηση χρήστη(" Απόκριση διακομιστή: "+req.responseText); ) // εδώ μπορείτε να προσθέσετε άλλο με χειρισμό σφαλμάτων αιτήματος ) ) // (3) ορίστε τη διεύθυνση σύνδεσης req.open("GET", "/ajax_intro/vote.php", true // το αντικείμενο του αιτήματος είναι προετοιμασμένο: η διεύθυνση καθορίζεται και δημιουργείται η συνάρτηση onreadystatechange // για την επεξεργασία της απάντησης διακομιστή // (4) req.send(null) statusElem.innerHTML = "Αναμονή για απάντηση διακομιστή..." )

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

Η συνάρτηση δημιουργεί ένα αντικείμενο XmlHttpRequest

εκχωρεί το πρόγραμμα χειρισμού απόκρισης διακομιστή στο onreadystatechange

ανοίγει τη σύνδεση ανοιχτή

στέλνει ένα αίτημα χρησιμοποιώντας την κλήση αποστολής (η απόκριση διακομιστή λαμβάνεται από τη συνάρτηση onreadystatechange, η οποία ενεργοποιείται ασύγχρονα)

δείχνει στον επισκέπτη μια ένδειξη κατάστασης διαδικασίας

Ο χειριστής διακομιστή στον οποίο απευθύνεται το αίτημα AJAX (στο παράδειγμα αυτό είναι το vote.php) ουσιαστικά δεν διαφέρει από μια κανονική σελίδα. Το αίτημα AJAX που αποστέλλεται από το XmlHttpRequest δεν διαφέρει από ένα κανονικό αίτημα.

Απλώς το κείμενο που επιστρέφει ο διακομιστής δεν εμφανίζεται ως HTML, αλλά διαβάζεται και επεξεργάζεται από τη συνάρτηση onreadystatechange.

Η έννοια του AJAX είναι να ενσωματώνει τεχνολογίες

Η τεχνολογία AJAX χρησιμοποιεί έναν συνδυασμό:

• (X)HTML, CSS για την παρουσίαση και το στυλ πληροφοριών
• Μοντέλο DOM, λειτουργίες στο οποίο εκτελούνται με javascript στην πλευρά του πελάτη για να παρέχουν δυναμική εμφάνιση και αλληλεπίδραση με πληροφορίες
• XMLHttpΑίτημα για ασύγχρονη επικοινωνία με διακομιστή web. Σε ορισμένα πλαίσια AJAX και σε ορισμένες περιπτώσεις, χρησιμοποιείται μια ετικέτα IFrame, μια ετικέτα SCRIPT ή άλλη παρόμοια μεταφορά αντί για το XMLHttpRequest.
• Το JSON χρησιμοποιείται συχνά για ανταλλαγή δεδομένων, αλλά οποιαδήποτε μορφή θα λειτουργήσει, συμπεριλαμβανομένου εμπλουτισμένου HTML, κειμένου, XML και ακόμη και ορισμένων EBML

Μια τυπική εφαρμογή AJAX αποτελείται από τουλάχιστον δύο μέρη.

Το πρώτο εκτελείται στο πρόγραμμα περιήγησης και είναι συνήθως γραμμένο σε JavaScript και το δεύτερο βρίσκεται στον διακομιστή και είναι γραμμένο, για παράδειγμα, σε Ruby, Java ή PHP.

Τα δεδομένα ανταλλάσσονται μεταξύ αυτών των δύο μερών μέσω XMLHttpRequest (ή άλλης μεταφοράς).

Τι μπορώ να κάνω με το AJAX;

Το σημείο του AJAX είναι η διαδραστικότητα και ο γρήγορος χρόνος απόκρισης.

Μικρά χειριστήρια

Το AJAX είναι κυρίως χρήσιμο για μικρά στοιχεία που σχετίζονται με βασικές ενέργειες: προσθήκη στο καλάθι, εγγραφή κ.λπ.

Δυναμική φόρτωση δεδομένων από τον διακομιστή.

Για παράδειγμα, ένα δέντρο του οποίου οι κόμβοι φορτώνονται καθώς επεκτείνονται.

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

• Έλεγχος σφαλμάτων εισαγωγής φόρμας ΠΡΙΝ την υποβολή

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

• "Αμεσο κατέβασμα

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

• Αυτόματη «παράδοση» επιστολών σε ανοιχτό φάκελο

  Από καιρό σε καιρό αποστέλλεται ένα αίτημα στον διακομιστή και εάν φτάσουν νέα γράμματα, εμφανίζονται στο πρόγραμμα περιήγησης.

• Αυτόματη συμπλήρωση

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

Αποτέλεσμα: ευρεία δημοτικότητα, υψηλή ζήτηση για λογαριασμούς από το άνοιγμα.

Σύγχρονο μοντέλο VS Ασύγχρονο μοντέλο

Στον συμβατικό προγραμματισμό, όλες οι λειτουργίες είναι σύγχρονες, δηλαδή εκτελούνται η μία μετά την άλλη.

Σχετικά μιλώντας, ενεργούμε ως εξής:

ρίξε ένα καλάμι ψαρέματος

περιμένοντας να δαγκώσει

bit - ενεργοποιήστε το σφίξιμο της ράβδου περιστροφής

Με την ασύγχρονη προσέγγιση:

κρεμάμε έναν ειδικό ανιχνευτή δαγκώματος στο καλάμι, του ζητάμε να τραβήξει το καλάμι όταν δαγκώσει

ρίξε ένα καλάμι ψαρέματος

κάνουμε άλλα πράγματα

ενεργοποιείται ο ανιχνευτής δαγκώματος, ενεργοποιώντας την ανάσυρση της περιστρεφόμενης ράβδου

Δηλαδή στη συγχρονισμένη περίπτωση μας τραβάει συνεχώς την προσοχή το καλάμι. Η σύλληψη ψαριών είναι μια διαδοχική διαδικασία.

Στην ασύγχρονη έκδοση, ορίσαμε πρώτα το πρόγραμμα για το τι πρέπει να κάνουμε όταν δαγκώνουμε και μετά κατεβάσαμε το καλάμι για να πιάσουμε και ασχοληθήκαμε με άλλα πράγματα.
Για παράδειγμα, τοποθετήσαμε άλλα 5 τέτοια καλάμια ψαρέματος.

Ο ασύγχρονος προγραμματισμός είναι πιο δύσκολος από τον σύγχρονο προγραμματισμό και στην αρχή είναι ασυνήθιστος, γιατί εκ των προτέρωντι θα λειτουργήσει δίνεται μετά.
Δηλαδή, το πρόγραμμα «τι να κάνει όταν δαγκώνει» πρέπει να ρυθμιστεί πριν συμβεί το δάγκωμα και είναι γενικά άγνωστο αν υπάρχουν ψάρια στη δεξαμενή.

Υπάρχουν τεχνικές που διευκολύνουν τον ασύγχρονο προγραμματισμό, για παράδειγμα, το αντικείμενο Deferred (Twisted, Dojo, Mochikit), αλλά αυτό θα συζητηθεί σε ξεχωριστό άρθρο.

Σύγχρονο και ασύγχρονο μοντέλο σε AJAX

Ας επιστρέψουμε στα πρόβατά μας: το πρόγραμμα περιήγησης, τον διακομιστή και, ας πούμε, τη βάση δεδομένων.

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

Όλες οι διαδικασίες εκτελούνται διαδοχικά, η μία μετά την άλλη.

Οι καθυστερήσεις δικτύου περιλαμβάνονται κατά τη διάρκεια του χρόνου αναμονής, που υποδεικνύονται με γκρι χρώμα στο διάγραμμα.

Ο χρήστης δεν μπορεί να κάνει κάτι άλλο στην ίδια σελίδα κατά την ανταλλαγή σύγχρονων δεδομένων.

Στο ασύγχρονο μοντέλο, το αίτημα αποστέλλεται ("το δόλωμα έχει οριστεί") και μπορείτε να προχωρήσετε σε κάτι άλλο. Όταν ολοκληρωθεί το αίτημα ("becked") - εκκινείται εκ των προτέρων
μια συνάρτηση που προετοιμάστηκε από τον προγραμματιστή ("σηκώστε τη ράβδο περιστροφής") για την εμφάνιση ενός μηνύματος διακομιστή.

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

Ο χρήστης μπορεί να γράψει σχόλια, να συμπληρώσει και να υποβάλει μια φόρμα κ.λπ.: Μπορούν να γίνουν νέα ασύγχρονα αιτήματα.

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

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

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

Χαρακτηριστικά του ασύγχρονου μοντέλου

• Δύσκολο στην εφαρμογή
  • Ανεπαρκείς δυνατότητες προγράμματος περιήγησης (javascript)
  • Το ασύγχρονο μοντέλο είναι πιο δύσκολο να διορθωθεί
• Συνθήκες αγώνα
  • Απροσδιόριστη ακολουθία εκτέλεσης
  • Μπορείτε να κάνετε πολλές ταυτόχρονες εργασίες ("καλάμια ψαρέματος"), αλλά η εργασία που ξεκίνησε πρώτη μπορεί να τελειώσει τελευταία.
• Η αντίδραση είναι άμεση, αλλά είναι άγνωστο ποιο θα είναι το αποτέλεσμα. Ο χειρισμός σφαλμάτων είναι πιο περίπλοκος
  • Σφάλματα επικοινωνίας - αποσύνδεση κ.λπ.
  • Σφάλματα χρήστη - για παράδειγμα, δεν υπήρχαν αρκετά προνόμια
• Έλεγχος ακεραιότητας (αδιάβροχο)
  • Για παράδειγμα, ο επεξεργαστής έστειλε ένα ασύγχρονο αίτημα για τη διαγραφή ενός κλάδου δέντρου. Η προσθήκη σε αυτό πρέπει να απενεργοποιηθεί μέχρι να φτάσει η απόκριση του διακομιστή. Εάν ξαφνικά δεν υπήρχαν αρκετά προνόμια, τότε η λειτουργία απέτυχε.
• Διαδραστικότητα
• Γρήγορη διεπαφή

Υπάρχουν μόνο δύο πλεονεκτήματα, αλλά τι πλεονεκτήματα! Το παιχνίδι αξίζει το κερί.

Ασύγχρονη drag"n" drop.

Μερικές φορές για ασύγχρονες λειτουργίες είναι απαραίτητο να κάνετε διάφορα "κόλπα στα αυτιά". Για παράδειγμα, θέλετε να κάνετε ένα drag"n"drop σε ένα δέντρο, δηλαδή να σύρετε άρθρα από τη μια ενότητα στην άλλη με το ποντίκι και έτσι να αλλάξουν τον γονέα τους στον διακομιστή στη βάση δεδομένων.

Σύρετε το "n" drop - αυτό είναι "πήρε το αντικείμενο των ποντικών - τοποθετήστε το εκεί που πρέπει - γίνει." Αλλά στο ασύγχρονο μοντέλο, τα πάντα δεν μπορούν να είναι "έτοιμα" αμέσως.
Πρέπει να ελέγξετε τα δικαιώματα στον διακομιστή, να ελέγξετε αν το αντικείμενο εξακολουθεί να υπάρχει, σε περίπτωση που κάποιος άλλος χρήστης το διέγραψε.

Πρέπει με κάποιο τρόπο να δείξουμε ότι η διαδικασία έχει ξεκινήσει, αλλά το αποτέλεσμα θα είναι «τι θα γίνει...». Αλλά όπως; Στο ασύγχρονο μοντέλο, ο δείκτης του ποντικιού δεν μπορεί απλώς να αιωρείται πάνω από ένα αντικείμενο, μετατρέποντας σε ρολόι.

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

Παλιό πλαίσιο, ξεπερασμένο πλαίσιο

Το παράδειγμα με το drag"n"drop αγγίζει επίσης το πρόβλημα του "μπαγιάτικου πλαισίου" - ξεπερασμένο πλαίσιο.

Ο Ιστός είναι ένα περιβάλλον πολλών χρηστών. Εάν χρησιμοποιείται για πλοήγηση,
Ας πούμε ένα δέντρο άρθρων, τότε πολλοί άνθρωποι το δουλεύουν. Ένας από αυτούς μπορεί να διαγράψει ένα κλαδί δέντρου πάνω στο οποίο εργάζεται ο άλλος: σύγκρουση.

Κατά κανόνα, χρησιμοποιούνται τα ακόλουθα μέσα για την αντιμετώπιση τέτοιων περιστατικών:

Πολιτική επεξεργασίας

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

Κλείδωμα ή/και έλεγχος έκδοσης

Κλείδωμα - αποκλεισμός επεξεργασμένων εγγράφων.

Έλεγχος έκδοσης - κάθε νέο έγγραφο γίνεται έκδοση, επομένως οι αλλαγές δεν χάνονται ποτέ. Η έκδοση εκδόσεων συνεπάγεται διενέξεις όταν ο Petya άρχισε να επεξεργάζεται το έγγραφο πριν από τη Vasya και το αποθήκευσε αργότερα. Ταυτόχρονα, στην τελευταία έκδοση, οι αλλαγές του Vasya χάθηκαν, αν και η προτελευταία (Vasya’s) έκδοση είναι σίγουρα διαθέσιμη στο σύστημα.

Μπορείτε να διαβάσετε περισσότερα σχετικά με το κλείδωμα και την έκδοση, για παράδειγμα, στην τεκμηρίωση για το σύστημα ελέγχου έκδοσης Subversion.

Αυτόματη ενημέρωση περιβάλλοντος

Το πρόβλημα του ξεπερασμένου περιεχομένου μπορεί να λυθεί κατά 99% με την άμεση αυτόματη ενημέρωση.

Το πρόγραμμα περιήγησης διατηρεί σταθερή σύνδεση με τον διακομιστή (ή κάνει διορθωτικά αιτήματα από καιρό σε καιρό) - και οι απαραίτητες αλλαγές αποστέλλονται μέσω αυτού του καναλιού.

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

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

jQuery.ajax() - κάνει ένα αίτημα στον διακομιστή χωρίς να φορτώσει ξανά τη σελίδα. Αυτή είναι μια μέθοδος χαμηλού επιπέδου με πολλές ρυθμίσεις. Βασίζεται στη λειτουργία όλων των ajax, η οποία είναι συχνά ευκολότερη στην κατανόηση και χρήση, αλλά εξακολουθεί να παρέχει περιορισμένη λειτουργικότητα σε σύγκριση με αυτήν τη μέθοδο.

Η $.ajax() επιστρέφει ένα αντικείμενο XMLHttpRequest. Στις περισσότερες περιπτώσεις δεν θα χρειαστεί να εργαστείτε απευθείας με αυτό το αντικείμενο, αλλά εξακολουθεί να είναι διαθέσιμο σε περίπτωση που χρειαστεί να ματαιώσετε το αίτημα με μη αυτόματο τρόπο.

Η συνάρτηση $.ajax() μεταβιβάζεται σε ένα αντικείμενο που αποτελείται από ζεύγη κλειδιών/τιμών που χρησιμοποιούνται για την προετοιμασία και τη διαχείριση της αίτησης.

Ένα αίτημα Ajax έχει δύο χρήσεις:

jQuery.ajax(url [, ρυθμίσεις ])

Η μόνη διαφορά από την προηγούμενη έκδοση της μεθόδου είναι ότι η ιδιότητα url εδώ είναι μέρος των ρυθμίσεων και όχι ξεχωριστή παράμετρος.

Λίστα ρυθμίσεων

δέχεται (προεπιλογή: εξαρτάται από τον τύπο δεδομένων)
Τύπος: αντικείμενο.
Όταν υποβάλλεται ένα αίτημα, οι κεφαλίδες υποδεικνύουν τους επιτρεπόμενους τύπους περιεχομένου που αναμένεται από τον διακομιστή. Οι τιμές αυτών των τύπων θα ληφθούν από την παράμετρο αποδοχής. Για παράδειγμα, το ακόλουθο παράδειγμα καθορίζει έγκυρους προσαρμοσμένους τύπους:

$.ajax(( δέχεται: ( mycustomtype: "application/x-some-custom-type" ), converters: ( "text mycustomtype": function(result) ( return newresult; ) ), dataType: "mycustomtype" ));

$. αγιαξ (( δέχεται: ( mycustomtype : "application/x-some-custom-type" μετατροπείς: ( "text mycustomtype" : συνάρτηση (αποτέλεσμα) ( επιστροφή νέου αποτελέσματος ; dataType: "mycustomtype" } ) ;

async (προεπιλογή: true)
Τύπος: boolean.
Από προεπιλογή, όλα τα αιτήματα αποστέλλονται ασύγχρονα (δηλαδή, μετά την αποστολή ενός αιτήματος στον διακομιστή, η σελίδα δεν σταματά να λειτουργεί ενώ περιμένει μια απάντηση). Εάν χρειάζεται να στέλνετε αιτήματα συγχρονισμένα, ορίστε αυτήν την επιλογή σε false. Τα αιτήματα μεταξύ τομέων και jsonp δεν μπορούν να εκτελεστούν συγχρονισμένα. Λάβετε υπόψη ότι τα σύγχρονα αιτήματα ενδέχεται να αποκλείσουν το πρόγραμμα περιήγησης ενώ το αίτημα εκτελείται.

πριν από την αποστολή (jqXHR, ρυθμίσεις)
Τύπος: λειτουργία.
Περιέχει μια συνάρτηση που θα κληθεί αμέσως πριν από την αποστολή ενός αιτήματος ajax στον διακομιστή. Αυτή η συνάρτηση μπορεί να είναι χρήσιμη για την τροποποίηση του αντικειμένου jqXHR (σε προηγούμενες εκδόσεις της βιβλιοθήκης (έως 1.5), χρησιμοποιείται το XMLHttpRequest αντί για το jqXHR). Για παράδειγμα, μπορείτε να αλλάξετε/προσδιορίσετε τις απαραίτητες κεφαλίδες κ.λπ. Το αντικείμενο jqXHR θα μεταβιβαστεί στη συνάρτηση ως πρώτο όρισμα. Το δεύτερο όρισμα είναι οι ρυθμίσεις αιτήματος.
Το beforeSend αναφέρεται σε συμβάντα ajax. Επομένως, εάν η συνάρτηση που καθορίζεται σε αυτήν επιστρέψει false, το αίτημα ajax θα ακυρωθεί Ξεκινώντας με jQuery-1.5, προτού κληθεί η αποστολή ανεξάρτητα από τον τύπο αιτήματος.

cache (προεπιλογή: true, false για dataType "script" και "jsonp")
Τύπος: boolean.
εάν θέλετε το πρόγραμμα περιήγησης να μην αποθηκεύει προσωρινά το αίτημα που υποβάλλεται, ορίστε αυτήν την παράμετρο σε false. Λάβετε υπόψη ότι εάν η παράμετρος οριστεί σε false, τότε η γραμμή "_=" θα προστεθεί στη διεύθυνση URL.

πλήρης (jqXHR, κατάσταση κειμένου)
Τύπος: λειτουργία.
Μια συνάρτηση που εκτελείται κάθε φορά που ολοκληρώνεται ένα αίτημα AJAX (μετά την ολοκλήρωση της επιτυχίας και του σφάλματος). Δύο παράμετροι μεταβιβάζονται στη συνάρτηση: jqXHR (σε προηγούμενες εκδόσεις της βιβλιοθήκης (έως 1.5), χρησιμοποιείται XMLHttpRequest αντί για jqXHR) και η κατάσταση εκτέλεσης του αιτήματος (τιμή συμβολοσειράς: "επιτυχία", "μη τροποποιημένο", "σφάλμα", "timeout", "abort" ή "parsererror").
Ξεκινώντας με το jQuery-1.5, μπορείτε να μεταβιβάσετε μια σειρά συναρτήσεων στην πλήρη παράμετρο και όχι μόνο σε μία συνάρτηση. Όλες οι συναρτήσεις θα κληθούν με τη σειρά με την οποία καθορίζονται σε αυτόν τον πίνακα.

περιεχόμενα
Τύπος: αντικείμενο.
Η παράμετρος εμφανίστηκε στο jQuery-1.5 Καθορίζεται από ένα αντικείμενο στη μορφή (string:κανονική έκφραση) και καθορίζει πώς το jQuery θα αναλύσει την απόκριση από τον διακομιστή, ανάλογα με τον τύπο του.

Τύπος περιεχομένου
Τύπος: boolean ή string.
Κατά την αποστολή ενός αιτήματος στον διακομιστή, τα δεδομένα μεταδίδονται με τη μορφή που καθορίζεται στο contentType. Η προεπιλογή είναι "application/x-www-form-urlencoded; charset=UTF-8’, το οποίο είναι κατάλληλο στις περισσότερες περιπτώσεις. Εάν καθορίσετε ρητά αυτήν την παράμετρο, θα σταλεί στον διακομιστή (ακόμα και αν δεν στάλθηκαν δεδομένα εκεί).
Με το jQuery-1.6 μπορείτε να περάσετε false για να μην ορίσετε τον τίτλο.

συμφραζόμενα
Τύπος: αντικείμενο.
Το αντικείμενο που θα γίνει το περιβάλλον μετά την ολοκλήρωση του αιτήματος (η τιμή μεταβιβάστηκε σε αυτή τη μεταβλητή). Για παράδειγμα, εάν καθορίσετε ένα στοιχείο DOM ως περιβάλλον, τότε όλοι οι χειριστές αιτημάτων ajax θα εκτελεστούν επίσης στο πλαίσιο αυτού του στοιχείου DOM. Σε αυτό το παράδειγμα, η λέξη-κλειδί αυτή θα περιέχει document.body:

$.ajax(( url: "test.html", context: document.body )).done(function() ( $(this).addClass("ολοκληρώθηκε"); ));

$. αγιαξ (( url: "test.html" , πλαίσιο: έγγραφο. σώμα ) ) . έγινε(συνάρτηση()( $ (αυτό). addClass("ολοκληρώθηκε"); } ) ;

μετατροπείς (προεπιλογή: ("*text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML))
Τύπος: αντικείμενο.
Η παράμετρος εμφανίστηκε στο jQuery-1.5 Καθορίζει ποιες συναρτήσεις θα χρησιμοποιηθούν για τη μετατροπή τιμών από έναν τύπο σε άλλο.

crossDomain (προεπιλογή: false για τον ίδιο τομέα, true για αιτήματα μεταξύ τομέων)
Τύπος: boolean.
Αυτή η επιλογή εισήχθη στο jQuery-1.5 Εάν θέλετε να εκτελέσετε ένα αίτημα μεταξύ τομέων (για παράδειγμα, JSONP) στον ίδιο τομέα, ορίστε τη ρύθμιση crossDomain σε true. Αυτό επιτρέπει, για παράδειγμα, να κάνετε ανακατευθύνσεις διακομιστή σε άλλο τομέα.

δεδομένα
Τύπος: αντικείμενο, συμβολοσειρά ή πίνακας.
Δεδομένα που θα μεταφερθούν στον διακομιστή. Εάν τα δεδομένα δεν είναι συμβολοσειρά, μετατρέπονται σε συμβολοσειρά ερωτήματος. Για αιτήματα GET, τα δεδομένα επισυνάπτονται στη διεύθυνση URL. Ένα αντικείμενο πρέπει να αποτελείται από ζεύγη κλειδιών/τιμών. Εάν η τιμή είναι πίνακας, τότε το jQuery διατάσσει τις τιμές ανάλογα με την παραδοσιακή ρύθμιση. Από προεπιλογή, για παράδειγμα, (foo:["bar1", "bar2"]) γίνεται &foo=bar1&foo=bar2 .

Φίλτρο δεδομένων (δεδομένα, τύπος)
Τύπος: λειτουργία.
Μια λειτουργία που θα προεπεξεργάζεται δεδομένα που αποστέλλονται από τον διακομιστή, π.χ. θα πρέπει να λειτουργεί ως φίλτρο και να επιστρέφει την καθαρισμένη χορδή. Δύο παράμετροι μεταβιβάζονται σε αυτή τη συνάρτηση: τα αναφερόμενα δεδομένα και η τιμή της παραμέτρου Τύπος δεδομένων. Η λειτουργία που καθορίζεται στο dataFilter πρέπει να επιστρέφει επεξεργασμένα δεδομένα.

dataType (προεπιλογή: ανιχνεύεται αυτόματα (xml, json, script ή html))
Τύπος: συμβολοσειρά.
Ο τύπος δεδομένων στον οποίο αναμένεται η απάντηση από τον διακομιστή. Εάν δεν έχει οριστεί, το jQuery θα προσπαθήσει να το προσδιορίσει αυτόματα χρησιμοποιώντας το MIME που λαμβάνεται από τον διακομιστή.

λάθος
Τύπος: λειτουργία
Μια συνάρτηση που θα κληθεί εάν αποτύχει ένα αίτημα στον διακομιστή. Παρέχεται με τρεις παραμέτρους: jqXHR (μέχρι να χρησιμοποιηθεί το 1,5 XMLHttpRequest), μια συμβολοσειρά που περιγράφει το σφάλμα που προέκυψε, καθώς και ένα αντικείμενο εξαίρεσης εάν συνέβη αυτό. Πιθανές τιμές για το δεύτερο όρισμα είναι "timeout", "error", "notmodified" και "parsererror" (σε απροσδόκητες περιπτώσεις, το null μπορεί να επιστραφεί). Από το jQuery-1.5, αυτή η παράμετρος μπορεί να δεχθεί είτε μία μεμονωμένη συνάρτηση είτε έναν πίνακα συναρτήσεων.
Το συμβάν σφάλματος δεν παρουσιάζεται όταν το dataType είναι ίσο με δέσμη ενεργειών ή JSONP.

καθολική (προεπιλογή: αληθινό)
Τύπος: boolean.
Υπεύθυνος για τη λειτουργία παγκόσμιων συμβάντων αιτημάτων ajax (για παράδειγμα, ajaxStart ή ajaxStop). Εάν ορίσετε αυτήν την παράμετρο σε false , τα καθολικά συμβάντα για αυτό το αίτημα δεν θα αυξηθούν.

κεφαλίδες
Τύπος: αντικείμενο.
Η παράμετρος εμφανίστηκε στο jQuery-1.5 Εδώ μπορείτε να καθορίσετε πρόσθετες κεφαλίδες αιτημάτων. Οι τιμές για αυτήν τη ρύθμιση θα εισαχθούν πριν κληθεί η συνάρτηση πριν από την αποστολή, όπου μπορούν να γίνουν οι τελικές αλλαγές στις κεφαλίδες.

εάν Τροποποιήθηκε
Τύπος: boolean.
Όταν αυτή η ρύθμιση οριστεί σε true , το αίτημα θα εκτελεστεί με την κατάσταση "επιτυχής" μόνο εάν η απάντηση από τον διακομιστή διαφέρει από την προηγούμενη απάντηση. Το jQuery ελέγχει αυτό το γεγονός κοιτάζοντας την κεφαλίδα Last-Modified. Δεδομένου ότι το jQuery-1.4, εκτός από την Τελευταία Τροποποίηση, ελέγχεται και το 'etag' (και τα δύο παρέχονται από τον διακομιστή και είναι απαραίτητα για να ειδοποιηθεί το πρόγραμμα περιήγησης ότι τα δεδομένα που ζητήθηκαν από τον διακομιστή δεν έχουν αλλάξει από το προηγούμενο αίτημα) .

είναι Τοπικό
Τύπος: boolean.
Αυτή η επιλογή εισήχθη στο jQuery-1.5.1 Σας επιτρέπει να ορίσετε την κατάσταση πηγής μιας σελίδας σε τοπική (σαν να ήταν πάνω από το πρωτόκολλο αρχείου), ακόμα κι αν το jQuery την αναγνώριζε διαφορετικά. Η βιβλιοθήκη αποφασίζει ότι η σελίδα εκτελείται τοπικά στην περίπτωση των ακόλουθων πρωτοκόλλων: αρχείο, *-επέκταση και γραφικό στοιχείο Συνιστάται να ορίσετε την τιμή της παραμέτρου isLocal καθολικά - χρησιμοποιώντας τη συνάρτηση $.ajaxSetup() και όχι. στις ρυθμίσεις μεμονωμένων αιτημάτων ajax.

jsonp
Τύπος: συμβολοσειρά ή boolean.
Καθορίζει το όνομα της παραμέτρου που προστίθεται στη διεύθυνση url αιτήματος JSONP (από προεπιλογή, χρησιμοποιείται "callback"). Για παράδειγμα, η ρύθμιση (jsonp:"onJSONPLoad") μετατρέπεται στο τμήμα url της συμβολοσειράς "onJSONPLoad=?" . Ξεκινώντας από την έκδοση 1.5, ο καθορισμός false σε αυτήν την παράμετρο αποτρέπει την προσθήκη μιας πρόσθετης παραμέτρου στη διεύθυνση url. Σε αυτήν την περίπτωση, πρέπει να ορίσετε την τιμή ρύθμισης jsonpCallback. Για παράδειγμα: (jsonp:false, jsonpCallback:"callbackName") .

jsonpCallback
Τύπος: συμβολοσειρά ή συνάρτηση.
Καθορίζει το όνομα της συνάρτησης που θα κληθεί όταν ο διακομιστής απαντήσει σε ένα αίτημα Jsonp. Από προεπιλογή, το jQuery δημιουργεί ένα προσαρμοσμένο όνομα για αυτήν τη συνάρτηση, η οποία είναι προτιμότερη επιλογή που απλοποιεί την εργασία της βιβλιοθήκης. Ένας από τους λόγους για να καθορίσετε τη δική σας λειτουργία επεξεργασίας αιτημάτων jsonp είναι να βελτιώσετε την προσωρινή αποθήκευση των αιτημάτων GET.
Από το jQuery-1.5, μπορείτε να καθορίσετε μια συνάρτηση σε αυτήν την παράμετρο προκειμένου να χειριστείτε μόνοι σας την απόκριση του διακομιστή. Σε αυτήν την περίπτωση, η καθορισμένη συνάρτηση πρέπει να επιστρέψει δεδομένα που λαμβάνονται από τον διακομιστή (στην καθορισμένη συνάρτηση θα είναι διαθέσιμη στην πρώτη παράμετρο).

μέθοδος (προεπιλογή: "GET")
Τύπος: χορδή.
Η παράμετρος εμφανίστηκε στο jQuery-1.9.0 Σας επιτρέπει να καθορίσετε τον τύπο αιτήματος στον διακομιστή ("POST", "GET", "PUT")

mimeType
Τύπος: χορδή.
Η παράμετρος εμφανίστηκε στο jQuery-1.5.1 Σε αυτό το πεδίο μπορείτε να καθορίσετε τον τύπο δεδομένων στον οποίο αναμένεται η απάντηση από τον διακομιστή αντί για XHR

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

processData (προεπιλογή true)
Τύπος: boolean.
Από προεπιλογή, τα δεδομένα που μεταφέρονται στον διακομιστή μετατρέπονται από ένα αντικείμενο σε μια συμβολοσειρά ερωτήματος (μορφή url: fName1=value1&fName2=value2&...) και αποστέλλονται ως "application/x-www-form-urlencoded" . Εάν πρέπει να στείλετε ένα έγγραφο DOM ή άλλα δεδομένα που δεν μπορούν να μετατραπούν, ορίστε την επιλογή processData σε false .

script Charset
Τύπος: συμβολοσειρά.
Ισχύει μόνο για αιτήματα Ajax GET, ο τύπος δεδομένων μπορεί να είναι είτε "jsonp" ή "script". Εάν ένας διακομιστής σε τομέα τρίτου κατασκευαστή χρησιμοποιεί μια κωδικοποίηση διαφορετική από τη δική σας, πρέπει να καθορίσετε την κωδικοποίηση του διακομιστή τρίτου κατασκευαστή.

statusCode
Τύπος: αντικείμενο.
Η παράμετρος εμφανίστηκε στο jQuery-1.5.0 Ένα σύνολο ζευγών στα οποία οι κώδικες εκτέλεσης αιτημάτων συσχετίζονται με συναρτήσεις που θα κληθούν. Για παράδειγμα, για τον κωδικό 404 (σελίδες δεν υπάρχουν), μπορείτε να εμφανίσετε ένα μήνυμα στην οθόνη:

$.ajax(( statusCode: ( 404: function() ( alert("σελίδα δεν βρέθηκε"); ) ) ));

$. αγιαξ (( Κωδικός κατάστασης: ( 404 : συνάρτηση () ( ειδοποίηση ("η σελίδα δεν βρέθηκε" ); } ) ;

Εάν το αίτημα ήταν επιτυχές, τότε ως παράμετρος, η ανώνυμη συνάρτηση θα λάβει τις ίδιες παραμέτρους με τις συναρτήσεις χειριστή για επιτυχή εκτέλεση αιτήματος (καθορίζεται στην παράμετρο επιτυχίας) και σε περίπτωση σφάλματος, τις ίδιες παραμέτρους με αυτές του σφάλματος λειτουργίες.

επιτυχία (δεδομένα, κατάσταση κειμένου, jqXHR)
Τύπος: συνάρτηση, πίνακας.
Μια συνάρτηση που θα κληθεί εάν το αίτημα προς τον διακομιστή ολοκληρωθεί με επιτυχία. Λαμβάνει 3 επιχειρήματα:

• δεδομένα που αποστέλλονται από τον διακομιστή και έχουν υποστεί προεπεξεργασία·
• συμβολοσειρά με κατάσταση εκτέλεσης (textStatus).
• Αντικείμενο jqXHR (σε εκδόσεις πριν από την 1.5, χρησιμοποιείται το XMLHttpRequest αντί για το jqXHR). Από το jQuery 1.5, αντί για μια μεμονωμένη συνάρτηση, αυτή η παράμετρος μπορεί να δεχθεί μια σειρά συναρτήσεων.
  

τέλος χρόνου
Τύπος: αριθμός.
Χρόνος αναμονής για απάντηση από τον διακομιστή σε χιλιοστά του δευτερολέπτου. Αντικαθιστά την καθολική ρύθμιση της ίδιας παραμέτρου στο $.ajaxSetup(). Σε περίπτωση υπέρβασης αυτού του χρόνου, το αίτημα θα ολοκληρωθεί με ένα σφάλμα και θα προκύψει ένα συμβάν σφάλματος, το οποίο θα έχει την κατάσταση "timeout".
Ο χρόνος μετράται από τη στιγμή που καλείται η συνάρτηση $.ajax. Μπορεί να συμβεί πολλά άλλα αιτήματα να εκτελούνται αυτήν τη στιγμή και το πρόγραμμα περιήγησης να καθυστερήσει την εκτέλεση του τρέχοντος αιτήματος. Σε αυτήν την περίπτωση, το χρονικό όριο μπορεί να ολοκληρωθεί, αν και στην πραγματικότητα, το αίτημα δεν έχει καν ξεκινήσει ακόμη.
Στο jQuery-1.4 και παλαιότερα, όταν το αντικείμενο XMLHttpRequest λήξει, θα μεταβεί σε κατάσταση σφάλματος και η πρόσβαση στα πεδία του μπορεί να δημιουργήσει μια εξαίρεση. Στον Firefox 3.0+, τα αιτήματα σεναρίων και JSONP δεν θα ματαιωθούν εάν λήξουν. Θα ολοκληρωθούν ακόμη και μετά τη λήξη αυτού του χρόνου.

παραδοσιακός
Τύπος: boolean.
Ορίστε αυτήν την παράμετρο σε true για να χρησιμοποιήσετε τις παραδοσιακές επιλογές μετατροπής (σειριοποίησης).

τύπος (προεπιλογή: "GET")
Τύπος: χορδή.
Παρόμοια με την παράμετρο της μεθόδου. Η παράμετρος χρησιμοποιείται στο jQuery νωρίτερα από την έκδοση 1.9.0

url (προεπιλογή: τρέχουσα διεύθυνση σελίδας)
Τύπος: χορδή.
Καθορίζει τη διεύθυνση στην οποία θα σταλεί το αίτημα.

όνομα χρήστη
Τύπος: χορδή.
Όνομα χρήστη για έλεγχο ταυτότητας στο διακομιστή, εάν απαιτείται.

xhr (προεπιλογή: ActiveXObject στον IE, το XMLHttpRequest σε άλλα προγράμματα περιήγησης)
Τύπος: λειτουργία.
Μια συνάρτηση που θα παρέχει ένα αντικείμενο XMLHttpRequest. Από προεπιλογή, για προγράμματα περιήγησης IE αυτό το αντικείμενο είναι ActiveXObject και σε άλλες περιπτώσεις είναι XMLHttpRequest. Με αυτήν την επιλογή μπορείτε να εφαρμόσετε τη δική σας έκδοση αυτού του αντικειμένου.

xhrFields
Τύπος: αντικείμενο.
Η παράμετρος εμφανίστηκε στο jQuery-1.5.1 Ένα σύνολο ζευγών (όνομα: τιμή) για την αλλαγή/προσθήκη των τιμών των αντίστοιχων πεδίων του αντικειμένου XMLHttpRequest. Για παράδειγμα, μπορείτε να ορίσετε την ιδιότητα withCredentials σε true κατά την εκτέλεση ενός αιτήματος μεταξύ τομέων:

$.ajax(( url: a_cross_domain_url, xhrFields: ( withCredentials: true ) ));

$. αγιαξ (( url: a_cross_domain_url, xhrΠεδία:( withCredentials: true } ) ;

Όπως αναφέρθηκε παραπάνω, η $.ajax() είναι η πιο βασική μέθοδος και όλες οι επόμενες μέθοδοι είναι απλώς wrappers. Πολύ συχνά δεν χρειάζεται να καλέσετε αυτή τη συνάρτηση, γιατί Υπάρχουν εναλλακτικές λύσεις υψηλότερου επιπέδου όπως , και . Είναι πιο εύκολο να κατανοηθούν και να χρησιμοποιηθούν, αν και η $.ajax() είναι μια πιο ευέλικτη λύση.

Η απλούστερη περίπτωση χρήσης θα ήταν να καλέσετε την $.ajax() χωρίς να καθορίσετε παραμέτρους:

$. Αϊάς();

Χειριστές συμβάντων

Οι ρυθμίσεις πριν από την αποστολή, σφάλμα, φίλτρο δεδομένων, επιτυχία και πλήρης σάς επιτρέπουν να ορίσετε χειριστές συμβάντων που εμφανίζονται σε ορισμένα σημεία στην εκτέλεση κάθε αιτήματος ajax.

• Πριν από την αποστολή πραγματοποιείται αμέσως πριν την αποστολή του αιτήματος στον διακομιστή.
• παρουσιάζεται σφάλμα εάν το αίτημα αποτύχει.
• Το dataFilter εμφανίζεται όταν φθάνουν δεδομένα από τον διακομιστή. Σας επιτρέπει να επεξεργάζεστε "ακατέργαστα" δεδομένα που αποστέλλονται από τον διακομιστή.
• Η επιτυχία προκύπτει εάν το αίτημα ολοκληρωθεί με επιτυχία.
• Ολοκληρώνεται κάθε φορά που ολοκληρώνεται το αίτημα.
επιτυχία : λειτουργία () (

ειδοποίηση ("Τα δεδομένα εστάλησαν με επιτυχία." ) ;

} ) ;

Προσοχή! Οι ρυθμίσεις .success(), .error() και .complete() που συζητήθηκαν παραπάνω προστέθηκαν στο jQuery-1.5 εκτός από τις τυπικές μεθόδους .done(), .fail() και .then() για το αντικείμενο αναβολής, οι οποίες μπορεί να χρησιμοποιηθεί για τον ορισμό χειριστών , ωστόσο ξεκινώντας με το jQuery-1.8 αυτές οι τρεις μέθοδοι θα καταργηθούν.

παράμετρος dataType

Η συνάρτηση $.ajax() μαθαίνει για τον τύπο των δεδομένων που στέλνει ο διακομιστής από τον ίδιο τον διακομιστή (μέσω MIME). Επιπλέον, υπάρχει η ευκαιρία να υποδείξετε προσωπικά (να διευκρινίσετε) πώς πρέπει να ερμηνεύονται αυτά τα δεδομένα. Αυτό γίνεται χρησιμοποιώντας την παράμετρο dataType. Πιθανές τιμές για αυτήν την παράμετρο:

• "xml" - το έγγραφο xml που προκύπτει θα είναι διαθέσιμο σε μορφή κειμένου. Μπορείτε να εργαστείτε μαζί του χρησιμοποιώντας τυπικά εργαλεία jQuery (καθώς και με ένα έγγραφο html).
• "html" - το html που προκύπτει θα είναι διαθέσιμο σε μορφή κειμένου. Εάν περιέχει σενάρια σε ετικέτες, τότε θα εκτελεστούν αυτόματα μόνο όταν το κείμενο html τοποθετηθεί στο DOM.
• "script" - τα ληφθέντα δεδομένα θα εκτελεστούν ως javascript. Οι μεταβλητές που συνήθως περιέχουν την απόκριση από τον διακομιστή θα περιέχουν ένα αντικείμενο jqXHR.
• "json", "jsonp" - τα ληφθέντα δεδομένα θα μετατραπούν εκ των προτέρων σε αντικείμενο javascript. Εάν η ανάλυση αποτύχει (κάτι που μπορεί να συμβεί εάν το json περιέχει σφάλματα), τότε θα εμφανιστεί μια εξαίρεση σφάλματος ανάλυσης αρχείου. Εάν ο διακομιστής στον οποίο αποκτάτε πρόσβαση βρίσκεται σε διαφορετικό τομέα, τότε το jsonp θα πρέπει να χρησιμοποιείται αντί για το json.
• "κείμενο" - τα δεδομένα που λαμβάνονται θα είναι διαθέσιμα σε απλό κείμενο, χωρίς προκαταρκτική επεξεργασία.
Αποστολή δεδομένων στον διακομιστή

Από προεπιλογή, ένα αίτημα προς τον διακομιστή γίνεται χρησιμοποιώντας τη μέθοδο HTTP GET. Εάν πρέπει να υποβάλετε αίτημα χρησιμοποιώντας τη μέθοδο POST, πρέπει να καθορίσετε την κατάλληλη τιμή στη ρύθμιση τύπου. Τα δεδομένα που αποστέλλονται χρησιμοποιώντας τη μέθοδο POST θα μετατραπούν σε UTF-8 εάν είναι σε διαφορετική κωδικοποίηση, όπως απαιτείται από το πρότυπο W3C XMLHTTPRequest.

Η παράμετρος δεδομένων μπορεί να καθοριστεί είτε ως συμβολοσειρά στη μορφή key1=value1&key2=value2 (μορφή μεταφοράς δεδομένων σε url), είτε ως αντικείμενο με ένα σύνολο ζευγών (όνομα:τιμή) - (key1: "value1", key2: "τιμή 2"). Στην τελευταία περίπτωση, πριν στείλει τα δεδομένα, το jQuery μετατρέπει το δεδομένο αντικείμενο σε συμβολοσειρά χρησιμοποιώντας την $.param(). Ωστόσο, αυτή η μετατροπή μπορεί να αντιστραφεί ορίζοντας τη ρύθμιση processData σε false. Η μετατροπή σε συμβολοσειρά δεν είναι επιθυμητή, για παράδειγμα, στην περίπτωση αποστολής αντικειμένου xml στον διακομιστή. Σε αυτήν την περίπτωση, συνιστάται να αλλάξετε τη ρύθμιση contentType

url: "test.php" ,

επιτυχία : συνάρτηση (δεδομένα) (

ειδοποίηση ("Ληφθέντα δεδομένα: " + δεδομένα ) ;

} ) ;

Ένα μάθημα στο οποίο θα εξετάσουμε τη δημιουργία απλών ασύγχρονων αιτημάτων AJAX στον διακομιστή χρησιμοποιώντας παραδείγματα. Θα χρησιμοποιήσουμε και τις δύο μεθόδους GET και POST ως μεθόδους μετάδοσης αιτημάτων. Στον διακομιστή, θα επεξεργαζόμαστε αιτήματα χρησιμοποιώντας σενάρια PHP.

Τι είναι ένα ασύγχρονο αίτημα AJAX;

Η τεχνολογία AJAX χρησιμοποιείται κυρίως για τη δημιουργία ασύγχρονων αιτημάτων στον διακομιστή. Ένα ασύγχρονο αίτημα είναι αυτό που εκτελείται στο παρασκήνιο και δεν παρεμβαίνει στην αλληλεπίδραση του χρήστη με τη σελίδα.

Κατά την αποστολή ενός ασύγχρονου αιτήματος, το πρόγραμμα περιήγησης (σελίδα) δεν «παγώνει», π.χ. μπορείτε να δουλέψετε με αυτό, όπως πριν. Αλλά πώς ξέρετε πότε έρχεται η απάντηση από τον διακομιστή; Για να προσδιορίσετε αυτό, πρέπει να παρακολουθήσετε την ιδιότητα readyState του προγράμματος περιήγησης. Αυτή η ιδιότητα περιέχει έναν αριθμό του οποίου η τιμή μπορεί να χρησιμοποιηθεί για να προσδιοριστεί σε ποιο στάδιο βρίσκεται το αίτημα. Ο παρακάτω πίνακας δείχνει τις κύριες τιμές της ιδιότητας readyState και τις αντίστοιχες καταστάσεις τους.

Εκείνοι. Αποδεικνύεται ότι πρέπει να παρακολουθούμε πότε η τιμή της ιδιότητας readyState είναι ίση με 4. Αυτό σημαίνει ότι το απεσταλμένο αίτημα έλαβε απάντηση από τον διακομιστή. Οι υπόλοιπες τιμές χρησιμοποιούνται πολύ σπάνια στην πράξη και ορισμένα προγράμματα περιήγησης ενδέχεται να μην τις υποστηρίζουν.

Για να προσδιορίσετε σε ποιο στάδιο βρίσκεται το αίτημα, πρέπει να χρησιμοποιήσετε το συμβάν onreadystatechange του αντικειμένου XMLHttpRequest. Αυτό το συμβάν εμφανίζεται κάθε φορά που αλλάζει η τιμή της ιδιότητας readyState. Επομένως, στον χειριστή αυτού του συμβάντος (συνάρτηση χωρίς όνομα ή όνομα) μπορείτε να γράψετε ενέργειες που θα ελέγξουν εάν αυτή η ιδιότητα είναι ίση με 4 και εάν είναι ίση, στη συνέχεια, για παράδειγμα, να εμφανίσετε την απόκριση διακομιστή στη σελίδα.

Δημιουργία ασύγχρονου αιτήματος AJAX (μέθοδος GET)

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

Για να το κάνετε αυτό, πρέπει να δημιουργήσετε 2 αρχεία στον διακομιστή σε έναν κατάλογο:

Welcome.html – σελίδα HTML που θα εμφανίζεται στον χρήστη. Στην ίδια σελίδα θα τοποθετήσουμε ένα σενάριο που θα εκτελεί όλες τις απαραίτητες ενέργειες για να λειτουργήσει το AJAX στην πλευρά του πελάτη.

processing.php – αρχείο PHP που θα επεξεργαστεί το αίτημα από την πλευρά του διακομιστή και θα δημιουργήσει μια απάντηση. Ας ξεκινήσουμε την ανάπτυξη δημιουργώντας τη βασική δομή του αρχείου welcome.html

Παράδειγμα εργασίας AJAX Παράδειγμα εργασίας AJAX // Εδώ θα τοποθετήσουμε τον κώδικα JavaScript που θα στείλει ένα αίτημα στον διακομιστή, θα το λάβει και θα ενημερώσει τα περιεχόμενα της σελίδας. Όλα αυτά θα λειτουργήσουν χωρίς να φορτώσετε ξανά τη σελίδα

Ας δούμε την ακολουθία των ενεργειών που πρέπει να εκτελεστούν στην πλευρά του πελάτη (σε κώδικα JavaScript):

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

Ας δημιουργήσουμε μια μεταβλητή που θα περιέχει μια παρουσία του αντικειμένου XHR (XMLHttpRequest).

Ας διαμορφώσουμε το αίτημα χρησιμοποιώντας τη μέθοδο open().

Καθορίζονται οι ακόλουθες παράμετροι:

• Η μέθοδος με την οποία θα σταλεί το αίτημα στον διακομιστή (GET, POST).
• Το URL που θα επεξεργαστεί το αίτημα στον διακομιστή.
• Τύπος αιτήματος: σύγχρονη (ψευδή) ή ασύγχρονη (αληθής).
• Όνομα χρήστη και κωδικός πρόσβασης εάν απαιτείται.

Ας εγγραφούμε στο συμβάν onreadystatechange του αντικειμένου XHR και ας καθορίσουμε τον χειριστή ως ανώνυμη ή επώνυμη συνάρτηση. Μετά από αυτό, θα δημιουργήσουμε κώδικα μέσα σε αυτήν τη συνάρτηση που θα ελέγξει την κατάσταση απόκρισης και θα εκτελέσει ορισμένες ενέργειες στη σελίδα. Η απάντηση που προέρχεται από τον διακομιστή βρίσκεται πάντα στην ιδιότητα answerText.

Εκτός από τον έλεγχο της τιμής της ιδιότητας readyState αριθμός 4, μπορείτε επίσης να ελέγξετε την τιμή της ιδιότητας κατάστασης. Αυτή η ιδιότητα καθορίζει την κατάσταση του αιτήματος. Αν είναι ίσο με 200, τότε όλα είναι εντάξει. Διαφορετικά, παρουσιάστηκε σφάλμα (για παράδειγμα, 404 - Η διεύθυνση URL δεν βρέθηκε).

Ας στείλουμε ένα αίτημα στον διακομιστή χρησιμοποιώντας τη μέθοδο send().

Εάν χρησιμοποιήσουμε τη μέθοδο GET για να στείλουμε ένα αίτημα, τότε δεν χρειάζεται να περάσουμε δεδομένα στην παράμετρο αυτής της μεθόδου. Αποστέλλονται ως μέρος της διεύθυνσης URL.

Εάν χρησιμοποιήσουμε τη μέθοδο POST για να στείλουμε ένα αίτημα, τότε τα δεδομένα πρέπει να περάσουν ως παράμετρος στη μέθοδο send(). Επιπλέον, πριν καλέσετε αυτήν τη μέθοδο, πρέπει να ορίσετε την κεφαλίδα Content-Type έτσι ώστε ο διακομιστής να γνωρίζει σε ποια κωδικοποίηση ήρθε το αίτημα και να το αποκρυπτογραφήσει.

Περιεχόμενα του στοιχείου σεναρίου:

// 2. Δημιουργία της μεταβλητής αιτήματος var request = new XMLHttpRequest(); // 3. Ρύθμιση του request request.open("GET","processing.php",true); // 4. Εγγραφείτε στο συμβάν onreadystatechange και επεξεργαστείτε το χρησιμοποιώντας την ανώνυμη συνάρτηση request.addEventListener("readystatechange", function() ( // εάν το αίτημα είναι 4 και το αίτημα είναι 200 ​​(OK) εάν (( αίτημα. readyState==4) && (request.status==200)) ( // για παράδειγμα, εξάγετε το αντικείμενο XHR στην κονσόλα του προγράμματος περιήγησης console.log(request); // και την απάντηση (κείμενο) που προήλθε από τον διακομιστή στο το παράθυρο ειδοποίησης console.log(request.responseText) ; .innerHTML = request.responseText ) ); // 5. Αποστολή αιτήματος στον διακομιστή request.send();

Ως αποτέλεσμα, το αρχείο welcome.html θα έχει τον ακόλουθο κώδικα:

Παράδειγμα λειτουργίας AJAX Παράδειγμα λειτουργίας AJAX window.addEventListener("load",function() ( var request = new XMLHttpRequest(); request.open("GET","processing.php",true); request.addEventListener(" readystatechange" , function() ( if ((request.readyState==4) && (request.status==200)) ( var welcome = document.getElementById("welcome"); welcome.innerHTML = request.responseText; ) ) request.send();

Στον διακομιστή (με χρήση php):

Ας πάρουμε τα δεδομένα. Εάν τα δεδομένα αποστέλλονται μέσω της μεθόδου GET, τότε από τον καθολικό πίνακα $_GET["όνομα"] . Και αν τα δεδομένα μεταφέρονται χρησιμοποιώντας τη μέθοδο POST, τότε από τον καθολικό πίνακα $_POST["όνομα"] .

Χρησιμοποιώντας αυτά τα δεδομένα, θα εκτελέσουμε ορισμένες ενέργειες στον διακομιστή. Ως αποτέλεσμα, παίρνουμε κάποια απάντηση. Ας το εμφανίσουμε χρησιμοποιώντας ηχώ .