Έτσι AJAX AJAX και AJAX, αυτό είναι που κάνουμε σε μεγάλο βαθμό αυτές τις μέρες. Είναι εξοικονομεί χρόνο, προσθέτει δυναμική και σας δίνει μια αίσθηση του χρησιμοποιώντας μια εφαρμογή λογισμικού είδος του αίσθηση. Είστε Υπάρχουν πολλοί τρόποι για να χρησιμοποιήσετε AJAX με πολλές βιβλιοθήκες. Αλλά, όπως μπορείτε να δείτε αυτό το site είναι για jQuery, θα εξετάσουμε τα βασικά ή ίσως ορισμένες προηγμένες χρήσεις AJAX.
Τι χρειαζόμαστε;
jQuery βιβλιοθήκη (φυσικά)
Ένα μικρό PHP script το
Ας άρχισε να μιλάει. Το jQuery, υπάρχουν βασικά 6 τύπους μέθοδος για να γίνει AJAX λειτουργίες. Αυτά είναι
- $. Ajax (επιλογές)
- $. Πάρει (url, δεδομένα, επανάκλησης)
- $. GetJSON (url, δεδομένα, επανάκλησης)
- $. GetScript (url, επανάκλησης)
- φορτίο (url, δεδομένα, επανάκλησης)
- $. Μετά (url, δεδομένα, επανάκλησης,
Εκτός από τον αριθμό 1, όλες οι άλλες μέθοδοι χρησιμοποιούν $. Ajax εσωτερικά. Έτσι, αυτό σημαίνει $. Ajax () είναι συνάρτηση της μητέρας μας για jQuery εργασίες AJAX. Ας δούμε πώς $. Ajax () μοιάζει
$. Ajax ({ , Τύπος: "ΜΕΤΑ", , url: "some.php", , δεδομένων: "name = Πέτρου & τοποθεσία = Νέα Υόρκη", ( msg ) { επιτυχία: λειτουργία (MSG) { "Server Response " + msg ) ; alert ("Απόκριση διακομιστή" + msg)? } })?
Αυτό είναι το όμορφο. Η παράμετρος τύπος παίρνει "GET" ή "ΜΕΤΑ" το οποίο σημαίνει ότι μπορείτε να στείλετε AJAX requestion ως POST ή GET (προτιμώ πάντα POST). Το υπόλοιπο των παραμέτρων είναι αρκετά αυτονόητα, αν ρίξετε μια ματιά στον κώδικα και πάλι.
Τώρα θα πάμε να κάνουμε μια μικρή σενάριο AJAX που διαβάζει τη σύνδεση των ετικετών υπερσύνδεσμο (<a>) και φορτώνει το αίτημα σχετικά με ορισμένα στοιχεία div στο έγγραφο.
Πρώτα παίρνουμε ένα κανονικό HTML έγγραφο της php που θα μοιάζει με αυτό
<DOCTYPE HTML ΔΗΜΟΣΙΑ! "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <head> <title> Ajax δοκιμαστική σύνδεση </ title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="jquery-1.2.6.min.js"> </ span> </ Head> <body> </ Body> </ html>
Τώρα ας προσθέσουμε μερικές συνδέσεις στο έγγραφο. Για την καλύτερη είδος μενού του βλέμμα θα χρησιμοποιήσουμε ένα UL> LI και σύνδεσης. Αυτό θα μοιάζει με αυτό
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Φορτίου κατ. 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Φορτίου κατ. 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> φορτίου στο Τμήμα 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> φορτίου στο Τμήμα 4 </ a> </ li> </ Ul>
Όπως μπορείτε να δείτε που έχουμε θέσει συνδέσεις σε στοιχεία λίστας μέσα σε μια μη διατεταγμένη λίστα αντικειμένων. Ρίξτε μια προσεκτική ματιά στις ιδιότητες της ετικέτας <a> του. Έχουμε href, τάξη και rel χαρακτηριστικό το οποίο δεν φαίνεται τίποτα διαφορετικό από μια κανονική σύνδεση. Αν δείτε, έχουμε δώσει το χαρακτηριστικό rel σε ορισμένα ονόματα div div1 δηλαδή, DIV2 .. ούτω καθεξής. Αυτό σημαίνει ότι θέλουμε την απάντηση του href που πρόκειται να φορτωθούν σε αυτές τις divs. Πώς να το κάνουμε αυτό; Ας προσθέσουμε τις πρώτες divs
<span> DIV -1 </ span> <div id="div1" class="content_loader"> </ p> <span> DIV -2 </ span> <div id="div2" class="content_loader"> </ p> <span> DIV -3 </ span> <div id="div3" class="content_loader"> </ p> <span> DIV -4 </ span> <div id="div4" class="content_loader"> </ p>
Και το πραγματικό μέρος τώρα - έχουμε δώσει στους συνδέσμους σε μια τάξη "ajax_link". Θα προσθέσω μόνο δυναμικά ajax ενέργειες μόνο συνδέσεις με το όνομα της κλάσης που ονομάζεται "ajax_link". Κόλαση, δεν όλες τις συνδέσεις μιας σελίδας να έχει ajax ενέργειες, εμείς;
Έτσι, το φορτίο έγγραφο είχαμε κάνει αυτό.
. ready ( function ( ) { $ (Έγγραφο). Έτοιμο (λειτουργία () { ) . click ( function ( ) { $ ("A.ajax_link"). Κάντε κλικ στην επιλογή (λειτουργία () { this ) ; $ $ = Current_link (αυτή)? $. Ajax ({ , Τύπος: «μετά», ( "href" ) , url:. $ current_link attr ("href"), ( e ) { επιτυχία: λειτουργία (ε) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (ε)? } })? ; επιστρέψει ψευδείς? })? })?
Επιτρέψτε μου να εξηγήσω το σενάριο λίγο. Η document.ready εκδήλωση είναι μια εκδήλωση η οποία ενεργοποιείται κατά τη φόρτωση της σελίδας. Και τότε είμαστε ανάθεση κάποιο είδος των κωδικών για την περίπτωση κάντε κλικ στο κουμπί των συνδέσμων που έχουν μια τάξη "ajax_link". Με αυτόν τον τρόπο current_link $ = $ (αυτό)? Σας επιτρέπει να έχετε το τρέχον αντικείμενο συνδέσμου είναι διαθέσιμη εντός του λειτουργία επανάκλησης. Και έχουμε
$ ("#" + $ Current_link.attr ("rel")). Html (ε)
που σημαίνει $ ("div_id") html (server_response) και έχουμε θέσει το param url της $ λειτουργία ajax δυναμικά με url:.. current_link.attr $ ("href"). Μέχρι τώρα όλα αυτά τα μέσα "Όλες οι δεσμοί αυτοί που έχουν μια τάξη" ajax_link "- Προσθέστε ένα πρόγραμμα χειρισμού συμβάντων κλικ - στη συνέχεια να εκτελέσει και AJAX το αίτημα λαμβάνοντας συνδέσεις href poperty και να φορτώσετε την απάντηση σε ένα div id του οποίου ταιριάζει με το" rel "χαρακτηριστικό του σύνδεση ". Και η επιστροφή FALSE, που αποτρέπει τη συνδέουν τις εργασίες σαν κανονικό σύνδεσμο 
Θέλετε να δείτε μια ενέργεια; Εδώ πηγαίνει.
Και μπορείτε να κατεβάσετε τον πηγαίο κώδικα , καθώς και.
Στην επόμενη ενότητα αυτού του μικρού φροντιστήριο θα πρέπει να χρησιμοποιούν το ίδιο πράγμα, αλλά με λίγη άνεση.
Εφαρμόζοντας ευκολότερη μέθοδος
Όλα παραμένει σχεδόν η ίδια. Θα αλλάξουμε λίγο τον τρόπο ajax εδώ. Έτσι, αντί να γράψετε το σύνολο $. Μπλοκ Ajax μπορούμε να επιτύχουμε το ίδιο πράγμα με το ακόλουθο.
. ready ( function ( ) { $ (Έγγραφο). Έτοιμο (λειτουργία () { ) . click ( function ( ) { $ ("A.ajax_link"). Κάντε κλικ στην επιλογή (λειτουργία () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Αυτό) attr ("rel")) φορτίο ($ (αυτό) attr ("href").)? ; επιστρέψει ψευδείς? })? })?
Είναι πολύ λιγότερο περίπλοκη τώρα, σωστά; Η μέθοδος φορτώνει το φορτίο ajax περιεχόμενο μέσα στο στοιχείο ότι έχει στερεωθεί. Αν $ ("# somediv_id"). Φορτίο ("mypage.php"), αυτό θα προσπαθήσει να φορτώσει mypage.php του περιεχομένου σε αυτό. Πολύ απλά, ε; Αλλά εγώ προτείνω να συνηθίσετε την κύρια μέθοδο (όπως φαίνεται στο πρώτο μέρος).
Στο αρχείο zip υπάρχει ένα άλλο αρχείο με την ονομασία ajax2.php που αποδεικνύει αυτό που Methos έχει το ίδιο αποτέλεσμα.
Έτσι, AJAX δεν είναι τόσο δύσκολο όσο ακούγεται, έτσι δεν είναι; Όταν γίνει πολύ πολύ καλά με AJAX λειτουργίες, θα δημιουργήσετε μαγικά.
Ευχαριστώ για την ανάγνωση btw.
Πρόσφατα σχόλια