Εκμάθηση PHP Ajax με Παράδειγμα

Τι είναι το Ajax;

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

Το JavaScript είναι μια γλώσσα scripting από την πλευρά του πελάτη. Εκτελείται από την πλευρά του πελάτη από προγράμματα περιήγησης ιστού που υποστηρίζουν JavaScript. Ο κώδικας JavaScript λειτουργεί μόνο σε προγράμματα περιήγησης που έχουν ενεργοποιημένη τη JavaScript.

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

Γιατί να χρησιμοποιήσετε το AJAX;

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

Tweets
Κοινή
Χρήστες που επισκέπτονται τον ιστότοπο κ.λπ.

Πώς να δημιουργήσετε μια εφαρμογή PHP Ajax

Θα δημιουργήσουμε μια απλή εφαρμογή που επιτρέπει στους χρήστες να αναζητούν δημοφιλή πλαίσια PHP MVC.

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

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

Βήμα 1) Δημιουργία της σελίδας ευρετηρίου

Ευρετήριο.php

PHP MVC Frameworks - Search Engine

Type the first letter of the PHP MVC Framework

Matches:

ΕΔΩ,

Το "onkeyup =" showName (this.value) "" εκτελεί τη συνάρτηση JavaScript showName κάθε φορά που ένα κλειδί πληκτρολογείται στο πλαίσιο κειμένου.

Αυτή η δυνατότητα ονομάζεται αυτόματη συμπλήρωση

Βήμα 2) Δημιουργία της σελίδας πλαισίων

frameworks.php

 0) {$match = "";for ($i = 0; $i < count($frameworks); $i++) {if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {if ($match == "") {$match = $frameworks[$i];} else {$match = $match . " , " . $frameworks[$i];}}}}echo ($match == "") ? 'no match found' : $match;?>

Βήμα 3) Δημιουργία του σεναρίου JS

auto_complete.js

function showName(str){if (str.length == 0){ //exit function if nothing has been typed in the textboxdocument.getElementById("txtName").innerHTML; //clear previous resultsreturn;}if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200){document.getElementById("txtName").innerHTML=xmlhttp.responseText;}}xmlhttp.open("GET","frameworks.php?name="+str,true);xmlhttp.send();}

ΕΔΩ,

"If (str.length == 0)" ελέγξτε το μήκος της συμβολοσειράς. Εάν είναι 0, τότε το υπόλοιπο σενάριο δεν εκτελείται.
"If (window.XMLHttpRequest) ..." Ο Internet Explorer εκδόσεις 5 και 6 χρησιμοποιούν το ActiveXObject για εφαρμογή AJAX. Άλλες εκδόσεις και προγράμματα περιήγησης όπως το Chrome, το FireFox χρησιμοποιούν το XMLHttpRequest. Αυτός ο κωδικός θα διασφαλίσει ότι η εφαρμογή μας λειτουργεί τόσο σε IE 5 & 6 όσο και σε άλλες υψηλές εκδόσεις του IE και σε προγράμματα περιήγησης.
Το “xmlhttp.onreadystatechange = function…” ελέγχει εάν η αλληλεπίδραση AJAX είναι πλήρης και η κατάσταση είναι 200 και στη συνέχεια ενημερώνει το εύρος txtName με τα αποτελέσματα που επιστρέφονται.

Βήμα 4) Δοκιμή της εφαρμογής PHP Ajax

Υποθέτοντας ότι έχετε αποθηκεύσει το αρχείο index.php Σε phututs / ajax, μεταβείτε στη διεύθυνση URL http: //localhost/phptuts/ajax/index.php

Πληκτρολογήστε το γράμμα C στο πλαίσιο κειμένου Θα λάβετε τα ακόλουθα αποτελέσματα.

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

Περίληψη

Το AJAX είναι το αρκτικόλεξο για ασύγχρονη JavaScript και XML
Το AJAX είναι μια τεχνολογία που χρησιμοποιείται για τη δημιουργία εμπλουτισμένων εφαρμογών αλληλεπίδρασης που μειώνουν τις αλληλεπιδράσεις μεταξύ του πελάτη και του διακομιστή ενημερώνοντας μόνο τμήματα της ιστοσελίδας.
Οι Internet Explorer έκδοση 5 και 6 χρησιμοποιούν το ActiveXObject για την εφαρμογή λειτουργιών AJAX.
Η έκδοση 7 του εξερευνητή Internet και άνω και τα προγράμματα περιήγησης Chrome, Firefox, Opera και Safari χρησιμοποιούν το XMLHttpRequest.