toppbanner

Hovedemner

Kurs, studiemetode

Religion og livssyn

Kirkehistorie og konfesjonskunnskap

Etikk og filosofi

Pedagogikk

IKT

Realfag

CV og publikasjoner

Diverse

Søk i nettstedet:

Velg artikler ut fra sjanger:

V Fagartikkel, essay
A Andre artikler
U Undervisningsmateriell, forelesningsmanus
O Oversikter og tabeller
S Sitater
F Lesefrukter
K Læreboksammendrag
T Tale, preken
L Lenker
P Nettportal
D Diverse
G Grublerier og notater
Alle artikler, kronologisk
Alle artikler, alfabetisk

Mine nettsteder:

Non Aliud faglig
Semaforen jernbane
Viadukten modelljernbane

Administrativt:

Pålogging
Redigering
Red. artikkel

Kokebok for enkle ajax-applikasjoner i php-skript

Nedtrekksmeny generert av hva man taster i et søkefelt

Denne programkoden er også en illustrasjon på hvordan en man ajax-snutter implementeres i et php-program.

De fire elementene, to usynlige og to synlige

  1. De to usynlige programsnuttene, en hos brukeren, den andre på serveren:
    1. Javaskript: En javascript-funksjon som er bruker-motoren som kommuniserer mens man arbeider i et formular. Brukersideprogram
    2. Ajax-program: Et eget ajax-program (kan godt skrives i php) som leverer det javascriptet ber om. Klientsideprogram
  2. De to synlige elementene hos brukeren:
    1. Html-aktivisator: En html-programkode i form av en input-boks som aktiviserer javascriptet.
    2. Html-mottager: En mottager i html-koden der ajaxprogrammet plasserer det omsøkte stoffet

Hva som skjer

  1. I 2.1 (Html-aktivisatoren) gir bruker en input. Det vil normalt være et skrivefelt. Hvert tastetrykk kan fanges opp for eksempel med onkeyup=(javscriptfunksjonskall).
  2. Javascriptet 1.1 får en input fra 2.1 som det umiddelbart videresender til et program i serveren som
  3. Ajaxprogrammet 1.2 ligger hele tiden på serveren og mottar en input fra javascriptet samtidig som brukeren arbeider i skjemaet uten at nettsiden forøvrig oppdateres el.l. Ajaxprogrammet gjør det det er programmert til, og sender en respons tilbake til brukeren.
  4. Responsen fra ajaxprogrammet havner i et felt på nettsiden som er satt av til det, og bare denne delen på nettsiden oppdateres.

Resultatet er at mens brukeren gjør et eller annet, så får det omtrent umiddelbar (prosesseringstid og overføringstid fram og tilbake medgår) effekt ved noe på nettsiden brukeren arbeider i. Til forskjell fra vanlig html, så oppdateres og overføres akkurat så mye som skal til for at responsen skal bli som ønsket, og tilbake kommer akkurat det tilbake som skal til for å endre nettsiden i tråd med brukerinput. Istedet for å oppdatere en hel side ved å trykke en søke-tast el.l., endres kun det absolutt nødvendigste. Det gjør responsen betydelig raskere dels fordi det er mye mindre som skal overføres mellom klient og tjener, og ajaxprogrammet på serveren utfører bare den lille konkrete oppgaven som skal til for å endre skjermbildet.

Kodeeksempler for de fire elementene

1.1 Javascriptet

<script type="text/javascript">
  function VisResultat(str,identnavn)
  {
    if (str.length==0)
    {
      document.getElementById(identnavn).innerHTML="";
      document.getElementById(identnavn).style.border="0px";
      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(identnavn).innerHTML=xmlhttp.responseText;
        document.getElementById(identnavn).style.border="1px solid #A5ACB2";
      }
    }
    xmlhttp.open("GET","../ajax/"+identnavn+".php?q="+str,true);
    xmlhttp.send();
  } 
</script>

Skriptet plasserer i head-seksjonen i html-skriptet. Skriptet kan brukes til å aktivisere ulike ajax-programmer. Skriptet tar to parametre: identnavn og str:

  • identnavn er et navn som også brukes på ajax-programmet og på feltet som skal motta data tilbake fra ajax-programmet.
  • str er det data som ajax-programmet mottar for å gi ønsket respons tilbake.

Som man ser av linjen

xmlhttp.open("GET","../ajax/"+identnavn+".php
sier det noe om hvor ajax-programmet ligger på serveren, i dette tilfellet i mappen ajax som ligger parallelt til mappen som huser den aktuelle nettsiden. Hvis man har ajax-programmet liggende et annet sted, må banen følgelig endres i javaskriptet.

1.2 Ajax-programmet

Ajaxprogrammet er et ordinært selvstendig program, gjerne i PHP.


<?php
$match = $_GET["q"]; //Input fra javaskriptet er lagt i variabelen q (se javaskriptets ajax-kall)
$dbcnx = mysql_connect("localhost",brukernavn,passord); //Tilkobling til en Mysql-server forsøkes
if(mysql_select_db('mindatabase')) //Hvis tilkobling til databasen mindatabase lykkes, starter selve responsen
{
    $matching = $match . "%"; // søker på alt som starter med $match 
    $sql="select * from tabell where tekst like '$matching'"; //Mysql-kall mot tabellen tabell der feltet tekst passer med det overførte søkerordet
    if($r=mysql_query($sql)) //Går mysql-kallet bra?
    {	?>//da starter vi respons med å angi nedtrekksmeny
        <select name="id" size="10"> 
        <?php
        while($p=mysql_fetch_array($r)) //Vi går gjennom søkesvaret en gang for hvert søk som er funnet
        {
            $tekst = $p["tekst"]; //Innholdet fra feltet tekst hentes fram
            $tid   = $p["ID"]; //og identifikatoren for denne posten også
            echo("<option value='$tid'>$tekst</option>"); //en post i nedtrekksmenyen vises, med identikatoren som verdi, og teksten som synlig
        }
        ?>
        </select>
        <? //Da er responsen ferdig, og nedtrekksmenyen lukkes
    }
    else echo("Feil med $sql " . mysql_Error()); //Eventuelle feil i søket kan varsles her. Nyttig under utvikling av skriptet
}
?>

2.1 Html-aktivisatoren


<input type="text" size="35" name="kilde1" onkeyup="VisResultat(this.value,'hentkilde1')" />

Dette er et tekstfelt på størrelse 35 med navnet "kilde1" der det som er skrevet inn i feltet (this.value) overføres javaskriptet VisResultat hver gang en tast slippes (onkeyup) og ajax-programmet hentkilde1.php på serveren aktiviseres og leverer sin tilbakemelding til noe på nettsiden som har identifikatoren hentkilde1.

2.2 Html-mottageren

Mottageren for tilbakemeldingen i eksempelet over ordnes enklest slik:


<div id="hentkilde1"></div>

Denne artikkelen er vist 4619 ganger

Ett tilfeldig blant 12 av mine antatt bedre bilder jeg har tatt selv:
menyadm/pix1/galleri/e1317.jpg

I dag 24 treff på nonaliud, og 2149565 totalt siden 20.04.2004 08:25. Dagsgjennomsnitt: 378 treff ·

© Svein Sando, førsteamanuensis (associate professor) DMMH  - tlf. 73 80 52 26 - fax: 73 80 52 52 - e-post: seserstatt dette bildet med tegnet krøllalfadmmh.no               
Startside · Start page (Eng.) · Statisk meny · Visningsmåter: Standard · Uten meny: Arial · Times · Times luftig · Stor ·    

Innholdet på denne nettsiden er underlagt Åndsverklovens beskyttelse og er opphavsmannens eiendom. All offentlig gjengivelse av innholdet, helt eller delvis, kan kun skje etter forutgående forespørsel til opphavsmannen. Kortere sitater i artikler, studentoppgaver o.l. kan imidlertid skje dersom kilden oppgis. Denne nettsiden kan føres opp i referanselista (APA-stil) slik:

Sando, S. (2010). Kokebok for enkle ajax-applikasjoner i php-skript. Dronning Mauds Minne Høgskole. Lastet ned 13.11.2019 fra http://www2.dmmh.no/~ses/index.php?vis=301&nid=1