toppbanner

Main topics

Study techniques
Religion and view of life
Denominations and church history
Ethics and Philosophy
Pedagogy
ICT
Math, technology and science
CV and publications
Miscellaneous

Search in this website:

Choose articles by genre:

V Essays, papers
A Other papers
U Education, lectures
O Tables or summaries
S Citations
F Readers fruits
K Textbook summaries
T Speaches, sermons
L Links
P Web portal
D Miscellaneous
G Thoughts
All articles, cronological
All articles, alphabetical

My websites:

Non Aliud professional
Semaphore railway Viaduct model railroad

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>

This article is shown 4620 times

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

I dag 9286 treff på nonaliud, og 2158827 totalt siden 20.04.2004 08:25. Dagsgjennomsnitt: 380 treff ·

© Svein Sando, PhD, Associate Professor at Queen Maud's College of Early Childhood Education (QMC), Trondheim, Norway
Phone +47 73 80 52 26 - fax: +47 73 80 52 52 - e-mail: seserstatt dette bildet med tegnet krøllalfadmmh.no               
Start page (Eng.) · Startside (Norw.) · · Display modes: Standard · Without menus: Arial · Times · Times spacious · Large ·    

The content of this webpage is subject to Norwegian legislation about copyright, which gives the author all publications wrights. Any further publication of this text and its pictures, completely or partly, can only be done after being authorized to do so by the author. Shorter citation in papers, students essays and so forth can be done if referring to the source. APA style reference to this webpage:

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