PHP Ajax-zelfstudie met voorbeeld

Wat is Ajax?

Het volledige AJAX- formulier is asynchroon JavaScript en XML. Het is een technologie die de interacties tussen de server en de client vermindert. Het doet dit door slechts een deel van een webpagina bij te werken in plaats van de hele pagina. De asynchrone interacties worden geïnitieerd door JavaScript. Het doel van AJAX is om kleine hoeveelheden gegevens uit te wisselen met de server zonder de pagina te vernieuwen.

JavaScript is een scripttaal aan de clientzijde. Het wordt aan de clientzijde uitgevoerd door de webbrowsers die JavaScript ondersteunen. JavaScript-code werkt alleen in browsers waarin JavaScript is ingeschakeld.

XML is de afkorting voor Extensible Markup Language. Het wordt gebruikt om berichten te coderen in zowel door mensen als machinaal leesbare formaten. Het is net als HTML, maar stelt u in staat om uw eigen tags te maken. Zie het artikel over XML voor meer informatie over XML

Waarom AJAX gebruiken?

  • Het maakt het mogelijk om rijke interactieve webapplicaties te ontwikkelen, net als desktopapplicaties.
  • Validatie kan worden uitgevoerd terwijl de gebruiker een formulier invult zonder het in te dienen. Dit kan worden bereikt met automatische aanvulling. De woorden die de gebruiker typt, worden voor verwerking naar de server gestuurd. De server reageert met trefwoorden die overeenkomen met wat de gebruiker heeft ingevoerd.
  • Het kan worden gebruikt om een ​​vervolgkeuzelijst te vullen, afhankelijk van de waarde van een andere vervolgkeuzelijst
  • Gegevens kunnen van de server worden opgehaald en slechts een bepaald deel van een pagina kan worden bijgewerkt zonder de hele pagina te laden. Dit is erg handig voor webpagina-onderdelen die dingen laden zoals
    • Tweets
    • Commens
    • Gebruikers die de site bezoeken enz.

Hoe maak je een PHP Ajax-applicatie aan?

We zullen een eenvoudige applicatie maken waarmee gebruikers kunnen zoeken naar populaire PHP MVC-frameworks.

Onze applicatie heeft een tekstvak dat gebruikers in de namen van het framework kunnen typen.

We zullen dan mvc AJAX gebruiken om naar een overeenkomst te zoeken en vervolgens de volledige naam van het framework net onder het zoekformulier weergeven.

Stap 1) Aanmaken van de indexpagina

Index.php

PHP MVC Frameworks - Search Engine

PHP MVC Frameworks - Search Engine


Type the first letter of the PHP MVC Framework








Matches:

HIER,

  • "Onkeyup =" showName (this.value) "" voert de JavaScript-functie showName uit telkens wanneer een sleutel in het tekstvak wordt getypt.

    Deze functie wordt automatisch aanvullen genoemd

Stap 2) Het maken van de frameworks-pagina

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

Stap 3) Het JS-script maken

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

HIER,

  • “If (str.length == 0)” controleer de lengte van de string. Als het 0 is, wordt de rest van het script niet uitgevoerd.
  • "If (window.XMLHttpRequest) ..." Internet Explorer versies 5 en 6 gebruiken ActiveXObject voor AJAX implementatie. Andere versies en browsers zoals Chrome, FireFox gebruiken XMLHttpRequest. Deze code zorgt ervoor dat onze applicatie werkt in zowel IE 5 & 6 als andere hoge versies van IE en browsers.
  • "Xmlhttp.onreadystatechange = function…" controleert of de AJAX-interactie is voltooid en de status 200 is, werkt vervolgens de txtName-reeks bij met de geretourneerde resultaten.

Stap 4) Het testen van onze PHP Ajax-applicatie

Ervan uitgaande dat je het bestand index.php hebt opgeslagen In phututs / ajax, blader naar de URL http: //localhost/phptuts/ajax/index.php

Typ de letter C in het tekstvak. U krijgt de volgende resultaten.

Het bovenstaande voorbeeld demonstreert het concept van AJAX en hoe het ons kan helpen bij het maken van rijke interactietoepassingen.

Overzicht

  • AJAX is de afkorting voor Asynchronous JavaScript en XML
  • AJAX is een technologie die wordt gebruikt om rijke interactietoepassingen te maken die de interacties tussen de client en de server verminderen door alleen delen van de webpagina bij te werken.
  • Internet Explorer versie 5 en 6 gebruiken ActiveXObject om AJAX-bewerkingen te implementeren.
  • Internet Explorer versie 7 en hoger en browsers Chrome, Firefox, Opera en Safari gebruiken XMLHttpRequest.

Interessante artikelen...