PHP Ajaxi õpetus koos näitega

Autor: Fiona Brown Fiona Brown
Hours Ajakohastatud

Mis on Ajax?

AJAX täisvorm on asünkroonne JavaScript & XML. See on tehnoloogia, mis vähendab serveri ja kliendi vahelist suhtlust. See teeb seda, värskendades ainult osa veebilehest, mitte tervet lehte. Asünkroonse suhtluse algatab JavaSkript.AJAX-i eesmärk on vahetada serveriga väikeseid andmemahtu ilma lehte värskendamata.

JavaScript on kliendipoolne skriptikeel. Seda käivitavad kliendi poolel toetavad veebibrauserid JavaSkript.JavaSkriptikood töötab ainult brauserites, millel on JavaSkript on lubatud.

XML on akronüüm sõnast Extensible Markup Language. Seda kasutatakse sõnumite kodeerimiseks nii inim- kui ka masinloetavas vormingus. See on nagu HTML, kuid võimaldab teil luua kohandatud silte. Lisateavet XML-i kohta leiate artiklist XML

Miks kasutada AJAX-i?

  • See võimaldab arendada rikkalikke interaktiivseid veebirakendusi nagu töölauarakendusi.
  • Valideerimist saab teha nii, et kasutaja täidab vormi ilma seda esitamata. Seda saab saavutada automaatse lõpetamise abil. Sõnad, mille kasutaja sisestab, saadetakse serverisse töötlemiseks. Server vastab märksõnadega, mis vastavad kasutaja sisestatule.
  • Seda saab kasutada rippmenüü kasti täitmiseks sõltuvalt teise rippmenüü kasti väärtusest
  • Andmeid saab serverist alla laadida ja uuendada ainult teatud osa lehest ilma tervet lehte laadimata. See on väga kasulik veebilehe osade jaoks, mis laadivad näiteks
  • Tweets
  • Kommentaarid
  • Saiti külastavad kasutajad jne.

Kuidas luua PHP Ajaxi rakendust

Loome lihtsa rakenduse, mis võimaldab kasutajatel otsida populaarseid PHP MVC raamistikke.

Meie rakendusel on tekstikast, mille kasutajad sisestavad raamistiku nimed.

Seejärel kasutame vaste otsimiseks mvc AJAX-i, seejärel kuvame raamistiku täieliku nime otse otsinguvormi all.

1. samm) registrilehe loomine

Indeks.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>

SIIN,

  • "onkeyup="showName(this.value)" käivitab JavaSkriptifunktsioon showName iga kord, kui võti tekstikasti sisestatakse. Seda funktsiooni nimetatakse automaatseks lõpetamiseks

2. samm) Raamistiku lehe loomine

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;

?>

SEOTUD ARTIKLID

Samm 3) JS-skripti loomine

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

}

SIIN,

  • "if (str.length == 0)" kontrollige stringi pikkust. Kui see on 0, siis ülejäänud skripti ei käivitata.
  • "if (window.XMLHttpRequest)..." Internet Exploreri versioonid 5 ja 6 kasutavad ActiveXObjecti AJAX-i juurutamiseks. Muud versioonid ja brauserid, nagu Chrome, FireFox kasutage XMLHttpRequesti. See kood tagab, et meie rakendus töötab nii IE 5 ja 6 kui ka teistes IE kõrgetes versioonides ja brauserites.
  • „xmlhttp.onreadystatechange=function…” kontrollib, kas AJAX-i interaktsioon on lõppenud ja olek on 200, seejärel värskendab txtName ulatust tagastatud tulemustega.

Samm 4) Meie PHP Ajaxi rakenduse testimine

Eeldades, et olete faili index.php salvestanud, sirvige failis phututs/ajax URL-i http://localhost/phptuts/ajax/index.php

Meie PHP Ajaxi rakenduse testimine

Sisestage tekstiväljale täht C. Saate järgmised tulemused.

Meie PHP Ajaxi rakenduse testimine

Ülaltoodud näide demonstreerib AJAX-i kontseptsiooni ja seda, kuidas see aitab meil luua rikkalikke interaktsioonirakendusi.

kokkuvõte

  • AJAX on asünkroonse akronüüm JavaScript ja XML
  • AJAX on tehnoloogia, mida kasutatakse rikkalike interaktsioonirakenduste loomiseks, mis vähendavad kliendi ja serveri vahelist suhtlust, värskendades ainult veebilehe osi.
  • Internet Exploreri versioonid 5 ja 6 kasutavad AJAX-i toimingute rakendamiseks ActiveXObjecti.
  • Internet Exploreri versioon 7 ja uuemad ning brauserid Chrome, Firefox, Operaja Safari kasutavad XMLHttpRequesti.

Võta see postitus kokku järgmiselt: