Έτσι AJAX AJAX και AJAX, αυτό είναι που κάνουμε σε μεγάλο βαθμό αυτές τις μέρες. Είναι εξοικονομεί χρόνο, προσθέτει δυναμική και σας δίνει μια αίσθηση από τη χρήση ενός είδους εφαρμογή λογισμικού του αίσθηση. Είστε Υπάρχουν πολλοί τρόποι για να χρησιμοποιήσετε AJAX με πολλές βιβλιοθήκες. Αλλά, όπως μπορείτε να δείτε αυτό το site είναι για jQuery, θα εξετάσουμε τα βασικά ή ίσως κάποιες προηγμένες χρήσεις AJAX.
Τι χρειαζόμαστε;
jQuery βιβλιοθήκη (φυσικά)
Ένα μικρό script php
Ας άρχισε να μιλάει. Το jQuery, υπάρχουν βασικά 6 τύπους της μεθόδου να κάνει AJAX πράξεις. Αυτά είναι
- $. Ajax (επιλογές)
- $. Πάρει (url, τα δεδομένα, επανάκλησης)
- $. GetJSON (url, τα δεδομένα, επανάκλησης)
- $. GetScript (url, επανάκλησης)
- φορτίο (url, τα δεδομένα, επανάκλησης)
- $. Μήνυμα (url, τα δεδομένα, επανάκλησης,
Εκτός από τον αριθμό 1, όλες οι άλλες μέθοδοι χρησιμοποιούν $. Ajax εσωτερικά. Έτσι, αυτό σημαίνει $. Ajax () είναι η λειτουργία της μητέρας μας για jQuery επιχειρήσεις AJAX. Ας δούμε πώς $. Ajax () μοιάζει
msg ) ; } } ) ; Response "+ MSG)?}})? |
Αυτό είναι αρκετά αυτό. Η παράμετρος τύπου παίρνει "GET" ή "POST", το οποίο σημαίνει ότι μπορείτε να στείλετε AJAX requestion όπως POST ή GET (Θα προτιμούσα POST πάντα). Οι υπόλοιπες παράμετροι είναι αρκετά αυτονόητα, αν ρίξετε μια ματιά ξανά τον κωδικό.
Τώρα θα πάμε να κάνουμε μια μικρή σενάριο AJAX που διαβάζει τη σύνδεση των ετικετών υπερσυνδέσμου (<a>) και φορτώνει το αίτημα για ορισμένα στοιχεία div στο έγγραφο.
Πρώτα παίρνουμε μια κανονική html εγγράφου php που θα μοιάζει με αυτό
<DOCTYPE html PUBLIC "- / / 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" />
Προσθέστε την επιχείρηση σας src="jquery-1.2.6.min.js"> </ script>
</ Head>
<body>
</ Body> </ html> |
Τώρα ας προσθέσουμε μερικές συνδέσεις στο έγγραφο. Για ένα καλύτερο είδος μενού της εμφάνιση θα χρησιμοποιήσουμε ένα UL> LI και σύνδεσης. Αυτό θα μοιάζει με αυτό
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Φορτίου Div 1 </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Φορτίου Div 2 </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Φορτίου Div 3 </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Φορτίου Div 4 </ a> </ li>
</ Ul> |
Όπως μπορείτε να δείτε έχουμε θέσει συνδέσεις σε στοιχεία λίστας μέσα σε μια μη διατεταγμένη λίστα αντικειμένου. Ρίξτε μια πιο προσεκτική ματιά σε ιδιότητες του tag <a> του. Έχουμε href, τάξη και rel χαρακτηριστικό το οποίο δεν φαίνεται τίποτα διαφορετικό από ένα κανονικό σύνδεσμο. Αν δείτε, έχουμε δώσει το χαρακτηριστικό rel σε κάποια ονόματα div συγκεκριμένα DIV1, DIV2 .. ούτω καθεξής. Αυτό σημαίνει ότι θέλουμε την απόκριση του href να φορτωθεί σε αυτά divs. Πώς να το κάνουμε αυτό; Ας προσθέσουμε τα divs πρώτη
<span> DIV -1 </ span>
<div id="div1" class="content_loader"> </ div>
<span> DIV -2 </ span>
<div id="div2" class="content_loader"> </ div>
<span> DIV -3 </ span>
<div id="div3" class="content_loader"> </ div>
<span> DIV -4 </ span>
<div id="div4" class="content_loader"> </ div> |
Και το πραγματικό μέρος τώρα - έχουμε, δεδομένων των δεσμών μια τάξη "ajax_link". Θα προσθέσω μόνο δυναμικά ajax ενέργειες μόνο συνδέσεις με το όνομα της κλάσης που ονομάζεται "ajax_link". Κόλαση, δεν όλες οι συνδέσεις μιας σελίδας για να έχουν ajax ενέργειες, εμείς;
Έτσι, το φορτίο έγγραφο που θα το κάνουμε αυτό.
. ready ( function ( ) { $ (Document). Έτοιμο (λειτουργία () {
) . click ( function ( ) { $ ("A.ajax_link"). Κάντε κλικ στην επιλογή (λειτουργία () {
this ) ; $ Current_link = $ (αυτό)?
$. Ajax ({
, Τύπος: «μετά»,
( "href" ) , url:. $ current_link attr ("href"),
( e ) { επιτυχίας: λειτουργία (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 "χαρακτηριστικό της σύνδεση ". Και η επιστροφή ψευδείς εμποδίζει το έργο σύνδεσης σαν κανονικό σύνδεσμο 
Θέλετε να δείτε μια ενέργεια; Εδώ πηγαίνει.
Και μπορείτε να κατεβάσετε τον κώδικα , καθώς και.
Στην επόμενη ενότητα του αυτό το μικρό tutorial θα πρέπει να χρησιμοποιούν το ίδιο πράγμα, αλλά με ένα μικρό κομμάτι της άνεσης.
Εφαρμόζοντας ευκολότερη μέθοδο
Τα πάντα παραμένει σχεδόν η ίδια. Θα αλλάξει μόνο η μέθοδος ajax εδώ. Έτσι, αντί της γραφής το σύνολο $. Μπλοκ ajax μπορούμε να επιτύχουμε το ίδιο πράγμα με το παρακάτω.
. ready ( function ( ) { $ (Document). Έτοιμο (λειτουργία () {
) . click ( function ( ) { $ ("A.ajax_link"). Κάντε κλικ στην επιλογή (λειτουργία () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (". #" + $ (Αυτό) attr ("rel")) φορτίου ($ (αυτό) attr ("href").)?
; επιστροφή ψευδείς?
})?
})? |
Είναι πολύ λιγότερο περίπλοκη τώρα, έτσι δεν είναι; Η μέθοδος φορτίου φορτώνει το ajax περιεχόμενο μέσα στο στοιχείο είναι συνδεδεμένο με. Αν $ ("# somediv_id»). Φορτίο ("mypage.php"), αυτό θα προσπαθήσει να φορτώσει mypage.php 's περιεχόμενο σε αυτό. Πολύ απλά, ε; Αλλά εγώ προτείνω να χρησιμοποιηθεί για την κύρια μέθοδο (όπως φαίνεται στο πρώτο μέρος).
Στο αρχείο zip υπάρχει ένα άλλο αρχείο που ονομάζεται ajax2.php που καταδεικνύει αυτή methos που έχει το ίδιο αποτέλεσμα.
Έτσι, AJAX δεν είναι τόσο δύσκολο όσο ακούγεται, έτσι δεν είναι; Όταν γίνει πολύ άπταιστα με AJAX επιχειρήσεις, θα δημιουργήσει μαγικά.
Ευχαριστώ για την ανάγνωση btw.
Πρόσφατα σχόλια