PHP Ajax opetusohjelma esimerkin kanssa

Mikä on Ajax?

AJAX tarkoittaa asynkronista JavaKäsikirjoitus & XML. Se on tekniikka, joka vähentää palvelimen ja asiakkaan välistä vuorovaikutusta. Se tekee tämän päivittämällä vain osan verkkosivusta koko sivun sijaan. Asynkroniset vuorovaikutukset käynnistää JavaSkripti. AJAXin tarkoitus on vaihtaa pieniä määriä dataa palvelimen kanssa ilman sivun päivittämistä.

JavaKäsikirjoitus on asiakaspuolen skriptikieli. Sitä suoritetaan asiakaspuolella verkkoselaimissa, jotka tukevat JavaSkripti. JavaSkriptikoodi toimii vain selaimissa, joissa on JavaKomentosarja käytössä.

XML on lyhenne sanoista Extensible Markup Language. Sitä käytetään viestien koodaamiseen sekä ihmisen että koneen luettavassa muodossa. Se on kuin HTML, mutta sen avulla voit luoda omia mukautettuja tageja. Lisätietoja XML:stä on artikkelissa XML.

Miksi käyttää AJAXia?

• Se mahdollistaa kehityksenping rikkaita, interaktiivisia verkkosovelluksia aivan kuten työpöytäsovelluksia.
• Vahvistus voidaan suorittaa käyttäjän täyttäessä lomakkeen lähettämättä sitä. Tämä voidaan saavuttaa automaattisen täydennyksen avulla. Käyttäjän kirjoittamat sanat lähetetään palvelimelle käsiteltäväksi, ja palvelin vastaa avainsanoilla, jotka vastaavat käyttäjän syöttämiä tietoja.
• Sitä voidaan käyttää alasvetovalikon täyttämiseen toisen alasvetovalikon arvon perusteella.
• Palvelimelta voidaan hakea tietoja ja päivittää vain tietty osa sivusta lataamatta koko sivua. Tämä on erittäin hyödyllistä verkkosivun osille, jotka lataavat esimerkiksi seuraavia asioita:
  • Tweets
  • Kommentit
  • Sivustolla vierailevat käyttäjät ja vastaavat reaaliaikaiset tiedot.

Kuinka luoda PHP Ajax -sovellus

Luomme yksinkertaisen sovelluksen, jonka avulla käyttäjät voivat etsiä suosittuja PHP MVC -kehyksiä.

Sovelluksessamme on tekstikenttä, johon käyttäjät kirjoittavat kehysten nimet.

Tämän jälkeen käytämme AJAXia osuman etsimiseen ja näytämme sitten kehyksen koko nimen hakulomakkeen alapuolella.

Vaihe 1) Hakemistosivun luominen

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>

TÄSSÄ,

• "onkeyup="showName(this.value)"" suorittaa JavaSkriptifunktio showName joka kerta, kun avain kirjoitetaan tekstikenttään. Tätä ominaisuutta kutsutaan automaattiseksi täydennykseksi.

Vaihe 2) Kehyssivun luominen

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;

?>

Vaihe 3) JS-komentosarjan luominen

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();

}

TÄSSÄ,

• ”if (str.length == 0)” tarkistaa merkkijonon pituuden. Jos se on 0, loppuosa skriptistä ei suoriteta.
• ”jos (window.XMLHttpRequest)…” Internet Explorerin versiot 5 ja 6 käyttävät ActiveXObjectia AJAX-toteutuksessa. Muut versiot ja selaimet, kuten Chrome ja Firefox käytä XMLHttpRequest-koodia. Tämä koodi varmistaa, että sovelluksemme toimii sekä IE 5:ssä ja 6:ssa että moderneissa selaimissa.
• ”xmlhttp.onreadystatechange=function…” tarkistaa, onko AJAX-vuorovaikutus valmis ja onko tila 200, ja päivittää sitten txtName-alueen palautetuilla tuloksilla.

Vaihe 4) PHP Ajax -sovelluksemme testaus

Olettaen, että olet tallentanut tiedoston index.php phptuts/ajax-hakemistoon, selaa kohtaan URL http://localhost/phptuts/ajax/index.php

Kirjoita tekstikenttään kirjain C. Saat seuraavat tulokset.

Yllä oleva esimerkki havainnollistaa AJAXin käsitettä ja sitä, miten se voi auttaa meitä luomaan rikkaita ja interaktiivisia sovelluksia.

Moderni AJAX Fetch API:lla

Yllä oleva XMLHttpRequest-objekti toimii edelleen, mutta sen ActiveXObject-haaraa vanhassa Internet Explorerissa ei enää tarvita. Nykyaikaiset selaimet tarjoavat promise-pohjaisen Fetch-rajapinnan, joka tekee saman pyynnön paljon vähemmällä koodilla.

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;
        });
}

Tämä versio tekee saman työn: se lähettää kirjoitetun tekstin frameworks.php-tiedostoon ja sijoittaa vastauksen txtName-alueeseen. Se käyttää myös encodeURIComponent-metodia syötteen turvalliseen escape-koodin luomiseen, ja sen promise-ketjua on helppo laajentaa virheenkäsittelyllä catch-lohkon avulla.

UKK