PHP Ajax-handledning med exempel

Innehållsförteckning:

Anonim

Vad är Ajax?

AJAX fullformat är asynkron JavaScript och XML. Det är en teknik som minskar interaktionen mellan servern och klienten. Det gör det genom att endast uppdatera en del av en webbsida snarare än hela sidan. De asynkrona interaktionerna initieras av JavaScript. Syftet med AJAX är att utbyta små mängder data med servern utan siduppdatering.

JavaScript är ett skriptspråk på klientsidan. Den körs på klientsidan av webbläsarna som stöder JavaScript. JavaScript-kod fungerar bara i webbläsare som har JavaScript-aktiverat.

XML är förkortningen för Extensible Markup Language. Den används för att koda meddelanden i både mänskligt och maskinläsbart format. Det är som HTML men låter dig skapa dina egna taggar. Mer information om XML finns i artikeln om XML

Varför använda AJAX?

  • Det gör det möjligt att utveckla rika interaktiva webbapplikationer precis som stationära applikationer.
  • Valideringen kan utföras när användaren fyller i ett formulär utan att skicka in det. Detta kan uppnås med automatisk slutförande. Orden som användaren skriver in skickas till servern för bearbetning. Servern svarar med nyckelord som matchar vad användaren angav.
  • Den kan användas för att fylla i en listruta beroende på värdet i en annan listruta
  • Data kan hämtas från servern och endast en viss del av en sida uppdateras utan att hela sidan laddas. Detta är mycket användbart för delar på webbsidor som laddar saker som
    • Tweets
    • Börjar
    • Användare som besöker webbplatsen etc.

Hur man skapar en PHP Ajax-applikation

Vi kommer att skapa en enkel applikation som låter användare söka efter populära PHP MVC-ramar.

Vår applikation kommer att ha en textruta som användarna skriver in namnen på ramverket.

Vi kommer sedan att använda mvc AJAX för att söka efter en match och visa ramens fullständiga namn precis under sökformuläret.

Steg 1) Skapa indexsidan

Index.php

PHP MVC Frameworks - Search Engine

PHP MVC Frameworks - Search Engine


Type the first letter of the PHP MVC Framework








Matches:

HÄR,

  • “Onkeyup =" showName (this.value) "" kör JavaScript-funktionen showName varje gång en nyckel skrivs i textrutan.

    Denna funktion kallas auto complete

Steg 2) Skapa ramsidan

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

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

HÄR,

  • “If (str.length == 0)” kontrollera längden på strängen. Om det är 0 körs inte resten av skriptet.
  • “If (window.XMLHttpRequest) ...” Internet Explorer version 5 och 6 använder ActiveXObject för AJAX-implementering. Andra versioner och webbläsare som Chrome, FireFox använder XMLHttpRequest. Denna kod säkerställer att vår applikation fungerar i både IE 5 & 6 och andra höga versioner av IE och webbläsare.
  • “Xmlhttp.onreadystatechange = function…” kontrollerar om AJAX-interaktionen är klar och statusen är 200 och uppdaterar sedan txtName-intervallet med de returnerade resultaten.

Steg 4) Testa vår PHP Ajax-applikation

Förutsatt att du har sparat filen index.php I phututs / ajax, bläddra till URL: en http: //localhost/phptuts/ajax/index.php

Skriv bokstaven C i textrutan. Du får följande resultat.

Ovanstående exempel visar konceptet med AJAX och hur det kan hjälpa oss att skapa rika interaktionsapplikationer.

Sammanfattning

  • AJAX är förkortningen för Asynchronous JavaScript och XML
  • AJAX är en teknik som används för att skapa rika interaktionsapplikationer som minskar interaktionen mellan klienten och servern genom att endast uppdatera delar av webbsidan.
  • Internet Explorer version 5 och 6 använder ActiveXObject för att implementera AJAX-operationer.
  • Internet Explorer version 7 och senare och webbläsare Chrome, Firefox, Opera och Safari använder XMLHttpRequest.