PHP Ajax opetusohjelma esimerkin kanssa

Mikä on Ajax?

AJAX täysi muoto on asynkroninen JavaKäsikirjoitus & XML. Se on tekniikka, joka vähentää vuorovaikutusta palvelimen ja asiakkaan välillä. Se tekee tämän päivittämällä vain osan verkkosivusta koko sivun sijaan. Asynkroniset vuorovaikutukset käynnistävät JavaScript.AJAX:n tarkoitus on vaihtaa pieniä määriä tietoa palvelimen kanssa ilman sivun päivittämistä.

JavaKäsikirjoitus on asiakaspuolen skriptikieli. Sitä tukevat verkkoselaimet suorittavat sen asiakaspuolella 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ä koneellisesti luettavassa muodossa. Se on kuin HTML, mutta sen avulla voit luoda mukautettuja tunnisteita. Lisätietoja XML:stä on artikkelissa XML

Miksi käyttää AJAXia?

Sen avulla voidaan kehittää monipuolisia interaktiivisia verkkosovelluksia, kuten työpöytäsovelluksia.
Validointi voidaan suorittaa, kun käyttäjä täyttää 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äsittelyä varten. Palvelin vastaa avainsanoilla, jotka vastaavat käyttäjän antamia tietoja.
Sitä voidaan käyttää pudotusvalikon täyttämiseen toisen pudotusvalikon arvosta riippuen
Tiedot voidaan noutaa palvelimelta ja päivittää vain tietty osa sivusta lataamatta koko sivua. Tämä on erittäin hyödyllistä verkkosivun osille, jotka lataavat esim
Tweets
Kommentit
Sivustolla vierailevat käyttäjät jne.

Kuinka luoda PHP Ajax -sovellus

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

Sovelluksessamme on tekstiruutu, johon käyttäjät kirjoittavat kehyksen nimet.

Käytämme sitten mvc AJAXia etsimään vastaavuutta ja näytämme sitten kehyksen täydellisen 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 JavaSkriptitoiminto showName aina, kun avain kirjoitetaan tekstiruutuun. Tätä ominaisuutta kutsutaan automaattiseksi viimeistelyksi

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)" tarkista merkkijonon pituus. Jos se on 0, muuta komentosarjaa ei suoriteta.
"if (window.XMLHttpRequest)…" Internet Explorerin versiot 5 ja 6 käyttävät ActiveXObjectia AJAX-toteutukseen. Muut versiot ja selaimet, kuten Chrome, FireFox käytä XMLHttpRequestiä. Tämä koodi varmistaa, että sovelluksemme toimii sekä IE 5:ssä ja 6:ssa että muissa IE:n korkeammissa versioissa ja selaimissa.
"xmlhttp.onreadystatechange=function…" tarkistaa, onko AJAX-vuorovaikutus valmis ja tila on 200, ja päivittää sitten txtName-alueen palautetuilla tuloksilla.

Vaihe 4) PHP Ajax -sovelluksemme testaus

Olettaen, että olet tallentanut tiedoston index.php Tiedostossa phututs/ajax selaa URL-osoitteeseen http://localhost/phptuts/ajax/index.php

Kirjoita C-kirjain tekstiruutuun Saat seuraavat tulokset.

Yllä oleva esimerkki havainnollistaa AJAX-konseptin ja kuinka se voi auttaa meitä luomaan monipuolisia vuorovaikutussovelluksia.

Yhteenveto

AJAX on lyhenne sanoista Asynchronous JavaKäsikirjoitus ja XML
AJAX on tekniikka, jota käytetään luomaan monipuolisia vuorovaikutussovelluksia, jotka vähentävät asiakkaan ja palvelimen välistä vuorovaikutusta päivittämällä vain osia verkkosivusta.
Internet Explorerin versiot 5 ja 6 käyttävät ActiveXObjectia AJAX-toimintojen toteuttamiseen.
Internet Explorerin versio 7 ja uudemmat sekä selaimet Chrome, Firefox, Operaja Safari käyttävät XMLHttpRequestiä.

Saatat tykätä: