PHP Ajax -opetusohjelma esimerkillä

Sisällysluettelo:

Anonim

Mikä on Ajax?

AJAX- koko lomake on asynkroninen JavaScript ja 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 aloitetaan JavaScriptin avulla. AJAX: n tarkoituksena on vaihtaa pieniä tietomääriä palvelimen kanssa ilman sivun päivitystä.

JavaScript on asiakaspuolen komentosarjakieli. Java-koodit toimivat vain selaimissa, joissa JavaScript on käytössä.

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

Miksi käyttää AJAXia?

  • Sen avulla voidaan kehittää interaktiivisia interaktiivisia verkkosovelluksia aivan kuten työpöytäsovelluksia.
  • Vahvistus voidaan suorittaa, kun käyttäjä täyttää lomakkeen lähettämättä sitä. Tämä voidaan saavuttaa käyttämällä automaattista täydennystä. Sanat, joihin käyttäjä kirjoittaa, lähetetään palvelimelle käsittelyä varten. Palvelin vastaa avainsanoilla, jotka vastaavat käyttäjän antamia tietoja.
  • Sitä voidaan käyttää täyttämään pudotusvalintaruutu toisen pudotusvalintaruudun arvon mukaan
  • Tiedot voidaan noutaa palvelimelta ja vain tietty osa sivusta päivitetään lataamatta koko sivua. Tämä on erittäin hyödyllinen verkkosivujen osille, jotka lataavat esimerkiksi
    • Twiitit
    • Commens
    • 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, jonka käyttäjät kirjoittavat kehyksen nimet.

Sitten käytämme mvc AJAX -ohjelmaa vastaavuuden etsimiseen ja näytämme sitten kehyksen koko nimen heti hakulomakkeen alapuolella.

Vaihe 1) Luodaan hakemistosivu

Index.php

PHP MVC Frameworks - Search Engine

PHP MVC Frameworks - Search Engine


Type the first letter of the PHP MVC Framework








Matches:

TÄSSÄ,

  • “Onkeyup =" showName (this.value) "" suorittaa JavaScript-funktion showName aina, kun avain kirjoitetaan tekstilaatikkoon.

    Tätä ominaisuutta kutsutaan automaattiseksi täydennykseksi

Vaihe 2) Luodaan kehyssivu

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;?>

Vaihe 3) Luo JS-komentosarja

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

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äyttävät XMLHttpRequest-ohjelmaa. Tämä koodi varmistaa, että sovelluksemme toimii sekä IE 5: ssä että 6: ssa sekä muissa IE: n ja selainten korkeammissa versioissa.
  • ”Xmlhttp.onreadystatechange = function…” tarkistaa, onko AJAX-vuorovaikutus täydellinen ja tila 200, päivittää txtName-alueen palautetuilla tuloksilla.

Vaihe 4) Testaa PHP Ajax -sovelluksemme

Oletetaan, että olet tallentanut tiedoston index.php Siirry phututs / ajax-tiedostossa URL-osoitteeseen http: //localhost/phptuts/ajax/index.php

Kirjoita C-kirjain tekstiruutuun Saat seuraavat tulokset.

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

Yhteenveto

  • AJAX on asynkronisen JavaScriptin ja XML: n lyhenne
  • 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 osan verkkosivusta.
  • Internet Explorerin versiot 5 ja 6 käyttävät ActiveXObjectia AJAX-toimintojen toteuttamiseen.
  • Internet Explorerin versio 7 tai uudempi ja Chrome, Firefox, Opera ja Safari käyttävät XMLHttpRequest-selainta.