Πώς να προγραμματίσετε στον Άγιαξ (με εικόνες)

Πίνακας περιεχομένων:

Πώς να προγραμματίσετε στον Άγιαξ (με εικόνες)
Πώς να προγραμματίσετε στον Άγιαξ (με εικόνες)

Βίντεο: Πώς να προγραμματίσετε στον Άγιαξ (με εικόνες)

Βίντεο: Πώς να προγραμματίσετε στον Άγιαξ (με εικόνες)
Βίντεο: Всё что нужно знать про прошивку Xiaomi 2024, Μάρτιος
Anonim

Το AJAX ή Ajax είναι ασύγχρονη JavaScript και XML. Χρησιμοποιείται για την ανταλλαγή δεδομένων με έναν διακομιστή και την ενημέρωση ενός τμήματος μιας ιστοσελίδας χωρίς να φορτώσει ολόκληρη την ιστοσελίδα από την πλευρά του πελάτη. Η εμφάνιση και η συμπεριφορά της υπάρχουσας ιστοσελίδας δεν παρεμβαίνει καθόλου κατά την ανταλλαγή και την ενημέρωση των δεδομένων. Ο Ajax θεωρείται επίσης μια ομάδα τεχνολογιών που έχουν HTML, CSS, DOM και JavaScript που χρησιμοποιούνται για να επισημάνουν, να στυλ και να επιτρέψουν στο χρήστη να αλληλεπιδράσει με τις πληροφορίες στην ιστοσελίδα. Σε αυτό το άρθρο, θα σας δείξει πώς να γράψετε ένα απλό πρόγραμμα σε βήματα Ajax με βήματα χρησιμοποιώντας το Σημειωματάριο ++. Απαιτούνται ορισμένες βασικές γνώσεις HTML, DOM, JavaScript και τοπικού διακομιστή Web ή απομακρυσμένου διακομιστή Web. Το WampServer χρησιμοποιείται σε αυτό το άρθρο για δοκιμή.

Βήματα

Μέθοδος 1 από 2: Κωδικοποίηση

3929304 1
3929304 1

Βήμα 1. Προετοιμάστε μια εικόνα για τη σύνταξη ενός προγράμματος Ajax

Αποθηκεύστε την εικόνα στον ίδιο φάκελο όπου θα αποθηκεύσετε τα αρχεία html και κειμένου που εμφανίζουν το πρόγραμμα Ajax. Σε αυτό το άρθρο, ο κατάλογος "ProgramInAjax" έχει ρυθμιστεί μέσα στον φάκελο "wamp" κάτω από τον κατάλογο "www" όπου εγκαταστήσατε τον WampServer.

3929304 2
3929304 2

Βήμα 2. Ανοίξτε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου

Το Σημειωματάριο ++ χρησιμοποιείται ως επεξεργαστής κειμένου σε αυτό το άρθρο.

3929304 3
3929304 3

Βήμα 3. Δημιουργήστε ένα νέο αρχείο στον επεξεργαστή κειμένου

Πληκτρολογήστε τα ακόλουθα:


Ωχ Ώχ! Πού πήγε το κίτρινο λουλούδι;

Μπορείτε να πληκτρολογήσετε ό, τι θέλετε μέσα στο html taghere.

3929304 4
3929304 4

Βήμα 4. Αποθηκεύστε το αρχείο ως έγγραφο κειμένου με το όνομα "ajax-data.txt

” Στην πραγματικότητα, μπορείτε να ονομάσετε το αρχείο ό, τι θέλετε, αλλά βεβαιωθείτε ότι έχετε εισαγάγει το ίδιο όνομα αρχείου στην κωδικοποίηση σε αυτήν τη γραμμή:

xmlhttp.open ("GET", "ajax-data.txt", true);

Ωστόσο, οι ετικέτες HTML χρησιμοποιούνται για την κεφαλίδα, έτσι ώστε να φαίνεται μεγαλύτερη και πιο αόρατη.

3929304 5
3929304 5

Βήμα 5. Δημιουργήστε ένα νέο αρχείο για μια ιστοσελίδα

Αυτό το αρχείο προορίζεται για ένα αρχείο HTML για προβολή του προγράμματος Ajax σε ένα πρόγραμμα περιήγησης στο Web.

3929304 6
3929304 6

Βήμα 6. Αντιγράψτε τον ακόλουθο κώδικα:

  Το πρώτο μου πρόγραμμα Ajax από εμένα Βάλτε τον κωδικό Ajax παρακάτω.  


Κάντε κλικ στο παρακάτω κουμπί για να εξαφανιστεί το λουλούδι

3929304 7
3929304 7

Βήμα 7. Αποθηκεύστε το αρχείο

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

3929304 8
3929304 8

Βήμα 8. Κάντε κλικ στο αναπτυσσόμενο βέλος για να επιλέξετε την επέκταση αρχείου

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

3929304 9
3929304 9

Βήμα 9. Επιλέξτε «Αρχείο γλώσσας σήμανσης υπερκειμένου κειμένου

” Βεβαιωθείτε ότι έχει "html" μέσα στην παρένθεση. Κάντε κλικ στην επιλογή αποθήκευση αφού επιλέξετε το "html".

3929304 10
3929304 10

Βήμα 10. Δοκιμάστε το αρχείο HTML σε ένα πρόγραμμα περιήγησης στο Web

Ανοίξτε την ιστοσελίδα σε πρόγραμμα περιήγησης ιστού. Μεταβείτε στο "Εκτέλεση" στην επάνω γραμμή μενού. Κάντε κλικ σε αυτό και επιλέξτε "Εκκίνηση στο Chrome" ή οποιοδήποτε πρόγραμμα περιήγησης είναι εγκατεστημένο στο σύστημά σας. Το Google Chrome χρησιμοποιείται για τη δοκιμή σε αυτό το άρθρο. Ενδέχεται να έχετε εγκαταστήσει κάποια άλλα προγράμματα περιήγησης στο Notepad ++. Μπορείτε να επιλέξετε το αγαπημένο σας πρόγραμμα περιήγησης. Μια άλλη επιλογή, μπορείτε να κάνετε κλικ στο εικονίδιο WampServer στις γραμμές εργασιών στο κάτω μέρος της οθόνης και να επιλέξετε "Localhost". Θα πρέπει να δείτε τον κατάλογό σας εκεί και να κάνετε κλικ στο αρχείο ευρετηρίου.

Βήμα 11. Κάντε κλικ στο κουμπί κάτω από την εικόνα για να δοκιμάσετε το σενάριο

3929304 12
3929304 12

Βήμα 12. Η τελική σας ιστοσελίδα

Η ιστοσελίδα σας θα πρέπει να ανανεώνεται με τις πληροφορίες που καταχωρίσατε στο αρχείο κειμένου στην αρχή. Το λουλούδι και η κεφαλίδα πρέπει να αντικατασταθούν με τη νέα κεφαλίδα που ονομάζεται Ω, ω! Πού πήγε το κίτρινο λουλούδι; »

Μέθοδος 2 από 2: Επεξήγηση κώδικα

3929304 13
3929304 13

Βήμα 1. Το τμήμα σώματος

Το σώμα του HTML έχει την ενότητα "div" και ένα κουμπί. Αυτή η ενότητα θα χρησιμοποιηθεί για την εμφάνιση των πληροφοριών που επιστρέφονται από το διακομιστή. Το κουμπί καλεί μια συνάρτηση που ονομάζεται "loadXMLDoc ()", εάν γίνει κλικ.

   Το πρώτο μου πρόγραμμα Ajax από εμένα   Μια εικόνα πηγαίνει εδώ για να δοκιμάσει το πρόγραμμα Ajax.

Κάντε κλικ στο παρακάτω κουμπί για να εξαφανιστεί το λουλούδι

Ένα κουμπί μπαίνει εδώ

3929304 14
3929304 14

Βήμα 2. Το τμήμα κεφαλής

Η ενότητα κεφαλής του αρχείου HTML έχει μια ετικέτα δέσμης ενεργειών που περιέχει τη λειτουργία "loadXMLDoc ()".

 Το πρώτο μου πρόγραμμα Ajax από εμένα Βάλτε τον κωδικό Ajax παρακάτω. 

Βήμα 3. Περισσότερη εξήγηση

Το πιο σημαντικό πράγμα του Ajax είναι το αντικείμενο XMLHttpRequest. Χρησιμοποιείται για την ανταλλαγή δεδομένων με τον διακομιστή και όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν το αντικείμενο.

  • Η σύνταξη για τη δημιουργία ενός αντικειμένου XMLHttpRequest () είναι μεταβλητή = νέα XMLHttpRequest (); αλλά ταυτόχρονα η σύνταξη για τη δημιουργία παλιών εκδόσεων του Internet Explorer (IE5 και IE6) που χρησιμοποιεί ένα αντικείμενο ActiveX είναι μεταβλητή = νέα ActiveXObject ("Microsoft. XMLHTTP").
  • Για να χειριστεί όλα τα σύγχρονα προγράμματα περιήγησης, πρέπει να ελέγξει εάν τα προγράμματα περιήγησης υποστηρίζουν το αντικείμενο XMLHttpRequest. Αν το κάνει, δημιουργεί ένα αντικείμενο XMLHttpRequest. Εάν δεν το κάνει, θα δημιουργήσει ένα αντικείμενο ActiveX για αυτό.
  • Στη συνέχεια, θα στείλει ένα αίτημα στον διακομιστή. Θα χρησιμοποιηθεί η μέθοδος του αντικειμένου XMLHttpRequest που ονομάζεται "open ()" και "send ()". xmlhttp.open ("GET", "ajax_info.txt", true); xmlhttp.send ();.

Συμβουλές

  • Μια άλλη επιλογή για προεπισκόπηση του αποτελέσματος, μπορείτε να ανοίξετε το αγαπημένο σας πρόγραμμα περιήγησης και να πληκτρολογήσετε "localhost/ProgramInAjax" στη γραμμή διευθύνσεων ιστού για να εμφανίσετε την ιστοσελίδα. Θα πρέπει να μπορείτε να δείτε την ιστοσελίδα αν ονομάσετε το αρχείο HTML σας σε "index.html".
  • Αποθηκεύστε το αρχείο html πιο συχνά κατά τη διάρκεια της εργασίας σας. Πιέζοντας ταυτόχρονα τα πλήκτρα Ctrl και S για χρήστες Window θα εξοικονομήσετε περισσότερο χρόνο.
  • Βεβαιωθείτε ότι έχετε προσθέσει το αποθηκευμένο αρχείο HTML στην ίδια τοποθεσία όπου βρίσκεται το αρχείο κειμένου εικόνας και δεδομένων.
  • Όταν ονομάζετε ένα αρχείο, είναι κεφαλαίο όταν προσθέτετε αυτά τα ονόματα στον κώδικα. Για παράδειγμα, το "myImage" διαφέρει από το "MyImage" ή "myimage".

Συνιστάται: