PHP Ajax Tutorial med eksempel

Innholdsfortegnelse:

Anonim

Hva er Ajax?

AJAX fullform er asynkron JavaScript og XML. Det er en teknologi som reduserer interaksjonen mellom serveren og klienten. Dette gjøres ved å oppdatere bare en del av en webside i stedet for hele siden. De asynkrone interaksjonene initieres av JavaScript. Formålet med AJAX er å utveksle små datamengder med serveren uten sideoppdatering.

JavaScript er et skriptspråk på klientsiden. Den utføres på klientsiden av nettleserne som støtter JavaScript. JavaScript-kode fungerer bare i nettlesere som har JavaScript aktivert.

XML er forkortelsen for Extensible Markup Language. Den brukes til å kode meldinger i både menneskelig og maskinlesbart format. Det er som HTML, men lar deg lage dine tilpassede koder. For mer informasjon om XML, se artikkelen om XML

Hvorfor bruke AJAX?

  • Det gjør det mulig å utvikle rike interaktive webapplikasjoner akkurat som stasjonære applikasjoner.
  • Validering kan utføres når brukeren fyller ut et skjema uten å sende det inn. Dette kan oppnås ved hjelp av automatisk fullføring. Ordene som brukeren skriver inn sendes til serveren for behandling. Serveren svarer med nøkkelord som samsvarer med hva brukeren skrev inn.
  • Den kan brukes til å fylle ut en rullegardin, avhengig av verdien til en annen rullegardin
  • Data kan hentes fra serveren, og bare en viss del av siden oppdateres uten å laste hele siden. Dette er veldig nyttig for nettsidedeler som laster inn ting som
    • Tweets
    • Begynner
    • Brukere som besøker nettstedet etc.

Hvordan lage et PHP Ajax-program

Vi vil lage et enkelt program som lar brukerne søke etter populære PHP MVC-rammer.

Søknaden vår vil ha en tekstboks som brukerne vil skrive inn navnene på rammeverket.

Vi vil da bruke mvc AJAX til å søke etter en kamp, ​​og deretter vise rammeverkets komplette navn rett under søkeskjemaet.

Trinn 1) Opprette indeksiden

Index.php

PHP MVC Frameworks - Search Engine

PHP MVC Frameworks - Search Engine


Type the first letter of the PHP MVC Framework








Matches:

HER,

  • “Onkeyup =" showName (this.value) "" utfører JavaScript-funksjonen showName hver gang en nøkkel blir skrevet inn i tekstboksen.

    Denne funksjonen kalles automatisk fullføring

Trinn 2) Opprette rammesiden

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

Trinn 3) Opprette JS-skriptet

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

HER,

  • “If (str.length == 0)” sjekk lengden på strengen. Hvis det er 0, blir ikke resten av skriptet utført.
  • “If (window.XMLHttpRequest)…” Internet Explorer versjoner 5 og 6 bruker ActiveXObject for AJAX-implementering. Andre versjoner og nettlesere som Chrome, FireFox bruker XMLHttpRequest. Denne koden vil sikre at applikasjonen vår fungerer i både IE 5 og 6 og andre høye versjoner av IE og nettlesere.
  • “Xmlhttp.onreadystatechange = function…” sjekker om AJAX-interaksjonen er fullført og statusen er 200, og oppdaterer deretter txtName-spennet med de returnerte resultatene.

Trinn 4) Testing av PHP Ajax-applikasjonen

Forutsatt at du har lagret filen index.php I phututs / ajax, bla til URL http: //localhost/phptuts/ajax/index.php

Skriv bokstaven C i tekstboksen. Du får følgende resultater.

Ovenstående eksempel demonstrerer konseptet med AJAX og hvordan det kan hjelpe oss med å lage rike interaksjonsapplikasjoner.

Sammendrag

  • AJAX er forkortelsen for Asynchronous JavaScript og XML
  • AJAX er en teknologi som brukes til å lage rike interaksjonsapplikasjoner som reduserer interaksjonen mellom klienten og serveren ved bare å oppdatere deler av websiden.
  • Internet Explorer versjon 5 og 6 bruker ActiveXObject for å implementere AJAX-operasjoner.
  • Internet explorer versjon 7 og nyere og nettlesere Chrome, Firefox, Opera og Safari bruker XMLHttpRequest.