PHP Ajax Tutorial με Παράδειγμα

Τι είναι ο Άγιαξ;

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

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

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

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

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

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

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

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

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

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

index.php

<html>

    <head>

        <title>PHP MVC Frameworks - Search Engine</title>

        <script type="text/javascript" src="auto_complete.js"></script>

    </head>

    <body>

        <h2>PHP MVC Frameworks - Search Engine</h2>

        <p><b>Type the first letter of the PHP MVC Framework</b></p>

        <form method="POST" action="index.php">

            <p><input type="text" size="40" id="txtHint"  onkeyup="showName(this.value)"></p>

        </form>

        <p>Matches: <span id="txtName"></span></p>

    </body>

</html>

ΕΔΩ,

  • Το “onkeyup=”showName(this.value)”” εκτελεί το JavaΗ λειτουργία σεναρίου εμφανίζει Όνομα κάθε φορά που πληκτρολογείται ένα κλειδί στο πλαίσιο κειμένου. Αυτή η δυνατότητα ονομάζεται αυτόματη ολοκλήρωση

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

Frameworks.php

<?php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 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 textbox

        document.getElementById("txtName").innerHTML=""; //clear previous results

        return;

    }

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

        xmlhttp=new XMLHttpRequest();

    } else {// code for IE6, IE5

        xmlhttp=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)..." Οι εκδόσεις 5 και 6 του Internet Explorer χρησιμοποιούν το 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

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

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

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

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

Σύνοψη

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