PHP Ajax vejledning med eksempel

Indholdsfortegnelse:

Anonim

Hvad er Ajax?

AJAX fuld form er asynkron JavaScript & XML. Det er en teknologi, der reducerer interaktionen mellem serveren og klienten. Det gør det ved kun at opdatere en del af en webside i stedet for hele siden. De asynkrone interaktioner initieres af JavaScript. Formålet med AJAX er at udveksle små mængder data med serveren uden sideopdatering.

JavaScript er et script-sprog på klientsiden. Det udføres på klientsiden af ​​de webbrowsere, der understøtter JavaScript. JavaScript-kode fungerer kun i browsere, der har JavaScript-aktiveret.

XML er forkortelsen for Extensible Markup Language. Det bruges til at kode meddelelser i både menneskelige og maskinlæsbare formater. Det er som HTML, men giver dig mulighed for at oprette dine tilpassede tags. For flere detaljer om XML, se artiklen om XML

Hvorfor bruge AJAX?

  • Det giver mulighed for at udvikle rige interaktive webapplikationer ligesom desktopapplikationer.
  • Validering kan udføres, når brugeren udfylder en formular uden at indsende den. Dette kan opnås ved hjælp af autofuldførelse. De ord, som brugeren skriver, sendes til serveren til behandling. Serveren reagerer med nøgleord, der matcher det, som brugeren indtastede.
  • Det kan bruges til at udfylde et dropdown-felt afhængigt af værdien af ​​et andet dropdown-felt
  • Data kan hentes fra serveren, og kun en bestemt del af en side opdateres uden at indlæse hele siden. Dette er meget nyttigt for websidedele, der indlæser ting som f.eks
    • Tweets
    • Begynder
    • Brugere, der besøger webstedet osv.

Sådan oprettes en PHP Ajax-applikation

Vi opretter en enkel applikation, der giver brugerne mulighed for at søge efter populære PHP MVC-rammer.

Vores applikation vil have et tekstfelt, som brugerne vil indtaste navnene på rammen.

Vi bruger derefter mvc AJAX til at søge efter et match og derefter viser rammens komplette navn lige under søgeformularen.

Trin 1) Oprettelse af indekssiden

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) "" udfører JavaScript-funktionen showName hver gang der indtastes en nøgle i tekstboksen.

    Denne funktion kaldes automatisk komplet

Trin 2) Oprettelse af 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;?>

Trin 3) Oprettelse af JS-scriptet

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)” tjek længden af ​​strengen. Hvis det er 0, udføres resten af ​​scriptet ikke.
  • “If (window.XMLHttpRequest)…” Internet Explorer version 5 og 6 bruger ActiveXObject til AJAX-implementering. Andre versioner og browsere som Chrome, FireFox bruger XMLHttpRequest. Denne kode vil sikre, at vores applikation fungerer i både IE 5 & 6 og andre høje versioner af IE og browsere.
  • “Xmlhttp.onreadystatechange = funktion…” kontrollerer, om AJAX-interaktionen er fuldført, og status er 200, opdaterer derefter txtName-spændet med de returnerede resultater.

Trin 4) Test af vores PHP Ajax-applikation

Forudsat at du har gemt filen index.php I phututs / ajax, skal du gå til URL'en http: //localhost/phptuts/ajax/index.php

Skriv bogstavet C i tekstfeltet. Du får følgende resultater.

Ovenstående eksempel demonstrerer konceptet med AJAX, og hvordan det kan hjælpe os med at skabe rige interaktionsapplikationer.

Resumé

  • AJAX er forkortelsen for Asynchronous JavaScript og XML
  • AJAX er en teknologi, der bruges til at skabe rige interaktionsapplikationer, der reducerer interaktionen mellem klienten og serveren ved kun at opdatere dele af websiden.
  • Internet Explorer version 5 og 6 bruger ActiveXObject til at implementere AJAX-operationer.
  • Internet explorer version 7 og nyere og browsere Chrome, Firefox, Opera og Safari bruger XMLHttpRequest.