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

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

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

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

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

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

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

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

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

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

Στη συνέχεια, θα χρησιμοποιήσουμε το 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Η συνάρτηση script εμφανίζει το όνομα κάθε φορά που πληκτρολογείται ένα κλειδί στο πλαίσιο κειμένου. Αυτή η λειτουργία ονομάζεται αυτόματη συμπλήρωση.

Βήμα 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, τότε το υπόλοιπο σενάριο δεν εκτελείται.
• «αν (window.XMLHttpRequest)…» Οι εκδόσεις 5 και 6 του Internet Explorer χρησιμοποιούν το ActiveXObject για την υλοποίηση AJAX. Άλλες εκδόσεις και προγράμματα περιήγησης όπως το Chrome και το Firefox χρησιμοποιήστε XMLHttpRequest. Αυτός ο κώδικας διασφαλίζει ότι η εφαρμογή μας λειτουργεί τόσο στον IE 5 & 6 όσο και σε σύγχρονα προγράμματα περιήγησης.
• Η εντολή “xmlhttp.onreadystatechange=function…” ελέγχει εάν η αλληλεπίδραση AJAX έχει ολοκληρωθεί και η κατάσταση είναι 200 ​​και, στη συνέχεια, ενημερώνει το span txtName με τα αποτελέσματα που επιστρέφονται.

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

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

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

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

Σύγχρονο AJAX με το Fetch API

Το παραπάνω αντικείμενο XMLHttpRequest εξακολουθεί να λειτουργεί, αλλά ο κλάδος ActiveXObject για τον παλιό Internet Explorer δεν είναι πλέον απαραίτητος. Τα σύγχρονα προγράμματα περιήγησης παρέχουν το API Fetch που βασίζεται σε υποσχέσεις, το οποίο υποβάλλει το ίδιο αίτημα με πολύ λιγότερο κώδικα.

function showName(str) {
    if (str.length === 0) {
        document.getElementById("txtName").innerHTML = "";
        return;
    }
    fetch("frameworks.php?name=" + encodeURIComponent(str))
        .then(response => response.text())
        .then(text => {
            document.getElementById("txtName").innerHTML = text;
        });
}

Αυτή η έκδοση κάνει την ίδια δουλειά: στέλνει το πληκτρολογημένο κείμενο στο frameworks.php και τοποθετεί την απόκριση στο span txtName. Χρησιμοποιεί επίσης το encodeURIComponent για ασφαλή διαφυγή από την είσοδο, και η αλυσίδα υποσχέσεων είναι εύκολο να επεκταθεί με χειρισμό σφαλμάτων χρησιμοποιώντας ένα μπλοκ catch.

Συχνές Ερωτήσεις