Ξεκινώντας με AJAX

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

JavaScript έχει για την κύρια χρήση XMLHttpRequest αντικειμένων για μια καλή και αρκετά χρόνια, αλλά μόλις πρόσφατα έκανε αρχίσει να αποκτήσουν κάποια "δόξα". Μια παρτίδα του φασαρία έχει να κάνει με τις πολλές προηγμένες δικτυακές εφαρμογές που έχουν web developers ότι βλέπω, σαλιαρίζω και θέλουν το δικό τους site για να έχουν αυτά τα ίδια ακριβώς προηγμένες εφαρμογές / λειτουργίες. Όμως, ορισμένες από τις οποίες είναι, επίσης, έχει να κάνει με την ομάδα των ατόμων σε AdaptivePath που έχουν το όνομα αυτής της εφαρμογής Ajax

Ajax Αρχάριοι: Τι στον κόσμο είναι Ajax;

Με λίγα λόγια; Λοιπόν Ajax είναι μια λύση στο web διεπαφών.

Συνήθως, το web χρήστης εισάγει κάποια στοιχεία ή να κάνει μια απλή επιλογή, και να κάνει κλικ σε ένα κουμπί ή την οριστικοποίηση ότι η επιλογή των δεδομένων εισόδου και στέλνει τα δεδομένα στο διακομιστή. Ο διακομιστής βιαστικά παρατηρεί τα δεδομένα και τις στέλνει πίσω μια ολόκληρη νέα ιστοσελίδα. Έχοντας να φορτώσετε μια σελίδα κάθε φορά που θέλετε να κάνετε κάτι είναι πολύ ενοχλητικό, διαζευκτικός και εξαιρετικά χρονοβόρα για τον χρήστη. XMLHttpRequest resurfaces τον browser-server αλληλεπίδραση με πίσω από τα παρασκήνια, ώστε ο χρήστης μπορεί να διατηρηθεί μόνο για το παιχνίδι με την ίδια σελίδα, ενώ ακόμη και τα στοιχεία σχετικά με τη σελίδα που μιλάει με τον server!

Με JavaScript έχουμε πάντα τη δυνατότητα να server-side script χωρίς να συμβαίνει τίποτα στον browser χρησιμοποιώντας μερικά κόλπα κλασικά μέχρι τα μανίκια μας.

Caching μορφή δεδομένων σε ένα αρχείο με JavaScript σε ένα server είναι καλή, αλλά αυτό συνήθως δεν επιστρέφει κάθε χρήσιμη πληροφορία για το ότι οι κλήσεις JavaScript, για αυτό την αποτελεσματικότητά της είναι πολύ περιορισμένη. Ajax, ωστόσο, να βρείτε ένα πλήρες πακέτο στοιχείων πίσω από το σενάριο που αποκαλεί. Εξ ου και η "XML" μέρος του ονόματός της - που στην πραγματικότητα είναι απλά εκεί για προσβλέπει του είδους, όπως το είδος της "Java" του JavaScript, διότι το επέστρεψε τα δεδομένα μπορούν να απλού κειμένου ή όπως αλλιώς θέλετε, αν δεν σας XML προτιμώμενη επιλογή.

Αυτό από μόνο του δημιουργεί τόσες πολλές συναρπαστικές δυνατότητες. Κάθε μορφή υποβολής, JavaScript σε κάθε περίπτωση, και ότι άλλο αίτησης, μπορούν τώρα να αλληλεπιδρούν με server-side βάσεις δεδομένων και επεξεργαστική ισχύ! Ανάκτηση των δεδομένων, τον κωδικό της γνησιότητας, την εικόνα γενιάς - απλά το όνομα, Ajax μπορεί ενεργοποιήσετε.

Κάνοντας Ajax στην πράξη

Το μόνο πράγμα που περιορίζει Ajax αναβαθμισμένη διαδικτυακή εφαρμογή είναι η δική σας φαντασία και την υποστήριξη από το πρόγραμμα περιήγησης. Mozilla browsers βάση μπορεί να το κάνει, Safari, καθώς και νεότερες εκδόσεις του Internet Explorer και Opera 8 αλλά δεν Opera 7. Είναι καλύτερα να σχισμή στη έναν εναλλακτικό τρόπο να κάνουμε πράγματα για τους χρήστες που δεν είναι τόσο ευφυής που έχετε ελπίδες για να είναι. Επίσης, ο Internet Explorer κάνει τα πράγματα κάπως διαφορετικά (πιο σίγουρα) από όλους τους άλλους browsers, επομένως είναι πολύ σημαντικό να λειτουργεί με τον κωδικό στο λογαριασμό οχληρός για το 80% του πληθυσμού οι οποίες βασίζονται σε Explorer.

Τώρα με το συναρπαστικό μέρος! Ας δημιουργήσει μια απλή εφαρμογή που μπορεί να αποδεχθεί την είσοδο από το χρήστη, που περνά σε κάποιο PHP στον server ότι οι έλεγχοι που κατά μιας βάσης δεδομένων, και επιστρέφει το αποτέλεσμα στον browser που χρησιμοποιείται. Θα αφομοιώσει σε τρία μέρη.

Πρώτον, χρειαζόμαστε μια μορφή HTML. Όπως σας "μπορείτε να δείτε παρακάτω:

  <HTML> 
   <HEAD> 
   <TITLE> Έκθεση </ TITLE> 
   <script type='text/javascript' src='xhr.js'> </ script> </ HEAD> <BODY> <form action="fallbackpage.php" method="post"> 
   Καλώς ήρθατε <p>, φοιτητή.  Δώστε δοκίμιο εδώ: <textarea name="essay" id="essay"> 
   </ textarea> <εισόδου τύπου = "υποβάλει" name = "υποβάλει" value = "Αποστολή" για onClick = "επιστροφή 
   βαθμού (this.form.essay.value)? "> 
   </ p> 
   </ form> 
   </ body> 
   </ html

xhr.js ), the form will just simply submit to the fallback page at fallbackpage.php . Ok, this is where the JavaScript comes in, we’ll take it slow. Σημείωση: Για τους χρήστες, χωρίς κατάλληλη υποστήριξη για μας σενάριο (που ονομάζεται xhr.js), το έντυπο θα υποβάλλουν απλώς να την εφεδρική σελίδα σε fallbackpage.php. Εντάξει, αυτό είναι που έρχεται το JavaScript, θα λάβει αργή.

  λειτουργία βαθμού (δοκίμιο) (

Το πρώτο πράγμα που πρέπει να κάνουμε είναι να προετοιμάσει το αντικείμενο. Υπάρχουν δύο τρόποι για να το κάνετε αυτό, για διαφορετικούς browsers.

  / / Έκδοση του Mozilla 
      εάν (window.XMLHttpRequest) ( 
          xhr = new XMLHttpRequest ()? 
      ) 
      / / IE έκδοση 
      else if (window.ActiveXObject) ( 
          xhr = νέα ActiveXObject ( "Microsoft.XMLHTTP")? 
      )

Στη συνέχεια, η διαφυγή του χρήστη ώστε να είναι ασφαλείς-URL:

      δοκίμιο = encodeURIComponent (δοκίμιο)?

και η χρησιμοποίηση της ανοικτής μεθόδου για το αντικείμενο για να ανοίξει μια νέα σύνδεση με το PHP script:

      xhr.open ( "POST", "grade.php")?

Η μέθοδος απαιτεί δύο επιχειρήματα: πρώτον, η μέθοδος HTTP (GET ή POST)? Δεύτερο, το URL του σεναρίου. Μια γρήγορη HTTP header ισχυρίζεται το σενάριο για το ποια είναι η απόκτηση και, στη συνέχεια, τα αποστέλλει μέθοδος μεταφέρει την πραγματική αίτηση:

   xhr.setRequestHeader ( 
        "Content-Type ', 
        "application / x-www-form-urlencoded? charset = UTF-8 ')? xhr.send (δοκίμιο)?

Αυτό το τελευταίο βήμα δεν είναι απαραίτητο για τις αιτήσεις GET, όπου όλα τα δεδομένα που μπορούν να περιέχονται στο query string του URL.

Η λήψη των τελικών αποτελεσμάτων

Είμαστε έτοιμοι να δούμε τελικά εάν η αίτηση HTTP κάναμε εργασίας. readyState property counts up from zero during the request, and shows 4 when the server page has been loaded successfully. Η ιδιοκτησία readyState μετράει από το μηδέν κατά τη διάρκεια της αίτησης, και δείχνει 4, όταν ο διακομιστής σελίδα έχει φορτωθεί με επιτυχία.

  Xhr.onreadystatechange = λειτουργία () ( 
        εάν (xhr.readyState == 4) (

responseText property, which contains a string. Αν όντως το πραγματικό αίτημα εργαστεί, τότε έχουμε την παραγωγή του server-side script responseText από διερευνήσεων της ιδιοκτησίας, το οποίο περιέχει μια συμβολοσειρά. responseXML property, which can hold a full document object of XML data, is an option also accessible. Για περισσότερο από μια πολύπλοκη δέσμη ενεργειών διακομιστή παραγωγής, responseXML ιδιοκτησίας, το οποίο μπορεί να χωρέσει ένα πλήρες έγγραφο αντικείμενο των XML δεδομένων, είναι μια επιλογή επίσης προσβάσιμα.

  Βαθμού xhr.responseText =? 
        προειδοποίησης ( "Νίκαιας δοκίμιο. βαθμού σας είναι" + βαθμοί)? 
      ) 
      επιστροφή ψευδείς? 
   )

Εν κατακλείδι, η τρίτη συνιστώσα αποτελείται από PHP script, που ουσιαστικά ζει με το διακομιστή και περιμένει υπομονετικά τη JavaScript για να δώσετε κάποια στοιχεία χυμώδη έτσι ώστε να μπορεί να ευδοκιμήσει. Το παράδειγμα αυτό χρησιμοποιεί ορισμένες PHP, αλλά οποιαδήποτε γλώσσα θέλετε - Ruby, Perl, C, ASP - μπορεί να αντιμετωπίσει τις ανάγκες σας και. grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space. Ο πυρήνας αυτού του σεναρίου είναι ένα παράδειγμα φυσικής γλώσσας λειτουργία ονομάζεται grade_essay () ότι οι βαθμοί των σπουδαστών δοκίμια από το 1 έως το 100, αλλά θα συντάσσω το μέρος για να διαφυλάξετε χώρο.

   <? php 
   λειτουργία grade_essay ($ δοκίμιο) ( 
        επιστροφή strlen ($ δοκίμιο)? 
   ) 
   $ = urldecode δοκίμιο (implode (αρχείο ( 'php: / / εισροών'))); 
   βαθμού grade_essay = $ ($ δοκίμιο)? 
   echo $ βαθμού? 
   ;>

php://input grabs the POST data, which gets put into a string, decoded and passed to the clever grading algorithm. Η php: / / εισροών αρπάζει τα δεδομένα POST, η οποία τίθεται σε ένα string, αποκωδικοποιούνται και να περάσει το έξυπνο αλγόριθμο ταξινόμησης. Ο αλγόριθμος επιστρέφει ένα αριθμητικό βαθμό. echo - ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. Τέλος, μόνο η παραγωγή ποιότητας με ηχώ - κανονικά, αυτό θα εμφανιστεί στο πρόγραμμα περιήγησης, αλλά δεδομένου ότι το PHP script εκτελείται, "πίσω από τα παρασκήνια," η συμβολοσειρά εξόδου είναι απλά για να επιστραφεί το JavaScript που ονομάζεται αυτό. text/xml . Εάν χρειάζεστε δομημένων δεδομένων, ένα έγγραφο XML θα είναι η παραγωγή με echo δήλωση με τον ίδιο τρόπο, αλλά το περιεχόμενο του τύπου της παραγωγής βασικά σελίδα πρέπει να είναι text / xml.

Αυτό που βλέπει ο χρήστης είναι η εξής: Ο / Η επικεφαλής τους τύπους δοκίμιο στο κείμενο περιοχής στο πρόγραμμα περιήγησης, τα κλικ Υποβολή και εντός στιγμής καταχωρίζον Αναδύεται κουτί μέχρι να του / της σε τελική έκθεση σχετικά με την ποιότητα. Αόρατα, το κείμενο έχει σταλεί στον server, να διαβάσετε και να αξιολογηθούν από μια ομάδα της PHP elves, και αναπόφευκτα επιστρέφει με ένα βαθμό, χωρίς ποτέ να επαναφορτώσετε τη σελίδα. Ο χρήστης μπορεί να τροποποιήσει το κείμενο και επανακαταχωρήστε συνεχώς.

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

Για περισσότερες ιδέες και μεγάλη παραδείγματα δαιμόνιος Ajax εφαρμογές μπορείτε να κατευθύνουν λίγο μακριά από SimpleHelp.Net και επίσκεψη iGoogle , Pageflakes , Netflix και Netvibes .