Høgskolen i Oslo Webprogrammering Ajax og PHP

I dag l Hvordan få en bedre brukeropplevelse via Ajax- script l Gjennomgang av kode l Oppgaveløsning på lab –Prosjektet –Regner med vi kjører lab de neste 3 ukene –Eksempel-eksamen er lagt ut

Hva er Ajax? l Asynkron JAvascript and Xml l Hensikten er å gjøre brukeropplevelsen bedre ved at data kan lastes asynkront l Det vil si når man trenger noe fra server uten å måtte sende hele siden opp til server (postback) l F.eks når man skriver noe inn i et felt –Få mulige feltverdier dynamisk fra databasen

Fordeler og ulemper med Ajax l Fordeler: l Bedre brukervennlighet l Umiddelbar tilbakemelding l Mer likt vanlige GUI som windowsappl. f.eks Word l Ulemper: l Økt belastning på server l Følsom for ytelse (må mot server mye oftere) l Krever bra linjekapasitet l Må brukes med forsiktighet l Nettleser avhengig l Begrenset debugging

Ajax videre l Et standard javascript med en ”event” og funksjon f.eks: – –Her er funksjon1 en javascript-funksjon. –Parameter inn er verdien på tekstfeltet

Ajax, bruk av HttpRequest 1. Opprette et objekt av type XMLHttpRequest 2. Sende objektet til server via en GET metode, URL og parametere (url?var=Per) 3. Filen som URL’en peker på returnerer data via standard output (i PHP echo) 4. Vente på svar via en funksjon i objektet (onreadystatechange) 5. Hente informasjon via parameteren responseText i objektet

Eksempel l Et skjema med to inputfelter, Navn og Adresse l Mulig å skrive inn i Navnfeltet ikke i Adresse l Skriver inn et navn i Navn-feltet l Går ut av Navn-feltet: –Programmet går asynkront til server for å hente adressen til navnet (bruker et Ajax kall) –Adressen vises i Adresse-feltet.

Klient / Tjener kode Klient-kode (HTML/JavaScript) Tjener-kode (PHP) var url=”Tjener-kode.php?var=Per”; xmlhttp=new XMLHttpRequest(); xmlhttp.open("GET",url,true); xmlhttp.send(); xmlhttp.onreadystatechange=function() returfelt.value=xmlhttp.responseText ; <? //Tjener-kode.php $DB = mysql_connect('localhost','root',''); mysql_select_db('test'); $var=$_GET["var"]; $sql = "SELECT * FROM bruker WHERE Navn =var"; $resultat = mysql_query($sql); $rad = mysql_fetch_array($resultat); echo $rad['Adresse'] ?>

function ajaxfunksjon(str) { xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { returfelt.value=xmlhttp.responseText; } // returfelt må defineres som et HTML felt i } var url = "Hent-data.php?var=”+str; xmlhttp.open("GET",url,true); xmlhttp.send(); } Navn : Adresse: Klientkode: Ikke komplett kode Kun skallkode!

<? //Tjener-kode.php $DB = mysql_connect('localhost','root',''); mysql_select_db('test'); $var=$_GET["var"]; $sql = "SELECT * FROM bruker WHERE Navn =var"; $resultat = mysql_query($sql); $rad = mysql_fetch_array($resultat); echo $rad[’Adresse'] ?> Tjenerkode: Ikke komplett kode Mangler bla. feilhåndtering

Ajax-trinn l Må lage en javascript funksjon som trigges av en ”event” (onClick, mouseOver…) l I denne funksjonen må det bygges opp et XMLHttpRequest objekt l Dette sendes med GET-metode, URL og parametere l Leses av tjenerprogrammet med $_GET l Returnerer verdier ved å echo’e disse l Leses av klient via objekt. ResponseText

Kodeeksempel l Et skjema med to inputfelter, Postnr og Poststed l Ved å oppgi Postnr så skal Poststedet komme automatisk l Skjer ved onChange-hendelse på Postnr-feltet l Henter Poststed fra databasen via at Ajax-kall l Deretter skal dataene lagres ved å trykke på en knapp l Inputvalidering av Postnr-feltet via Javascript på klient og PHP på server (viktig med begge steder) l Bruk av Regex l Så til koden!

Siste forelesning l Siste forelesning! l Eksamen 7.6, alle skriftlige hjelpemidler tillatt l Lykke til med ferdigstillingen prosjektet (leveres innen 15 mai). l Lykke til med videre jobbing og eksamen! l Vanlig lab neste uke og uken deretter l Etter det er jeg tilgengelig på mail / kontoret for spørsmål utover i mai (litt til og fra…)