PHP Ajax handledning med exempel

By: Fiona Brown Fiona Brown
Hours Uppdaterad

Vad är Ajax?

AJAX full form är asynkron JavaScript & XML. Det är en teknik som minskar interaktionen mellan servern och klienten. Den gör detta genom att bara 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 att sidan uppdateras.

JavaScript är ett skriptspråk på klientsidan. Det exekveras på klientsidan av de webbläsare som stöder JavaManus.JavaSkriptkod fungerar bara i webbläsare som har JavaSkript aktiverat.

XML är förkortningen för Extensible Markup Language. Den används för att koda meddelanden i både mänskliga och maskinläsbara format. Det är som HTML men låter dig skapa dina anpassade taggar. För mer information om XML, se artikeln om XML

Varför använda AJAX?

  • Det tillåter utvecklingping rika interaktiva webbapplikationer precis som skrivbordsapplikationer.
  • Validering kan utföras när användaren fyller i ett formulär utan att skicka in det. Detta kan uppnås med automatisk komplettering. Orden som användaren skriver in skickas till servern för bearbetning. Servern svarar med nyckelord som matchar det användaren skrev in.
  • Den kan användas för att fylla i en dropdown-ruta beroende på värdet på en annan dropdown-ruta
  • 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 webbsidor som laddar saker som
  • Tweets
  • Commens
  • Användare som besöker sidan 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-ramverk.

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

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

Steg 1) Skapa indexsidan

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>

HÄR,

  • "onkeyup="showName(this.value)"" kör JavaSkriptfunktion showName varje gång en nyckel skrivs i textrutan. Den här funktionen kallas automatisk komplett

Steg 2) Skapa ramverkssidan

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;

?>

RELATERADE ARTIKLAR

Steg 3) Skapa JS-skriptet

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

}

HÄR,

  • "if (str.length == 0)" kontrollera längden på strängen. Om det är 0, exekveras 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änd XMLHttpRequest. Denna kod säkerställer att vår applikation fungerar i både IE 5 och 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-spannet med de returnerade resultaten.

Steg 4) Testar vår PHP Ajax-applikation

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

Testar vår PHP Ajax-applikation

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

Testar vår PHP Ajax-applikation

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

Sammanfattning

  • AJAX är akronymen för Asynkron 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.

Sammanfatta detta inlägg med: