CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

supersquirrel Nybegynder

01. februar 2008 - 19:57 Der er 40 kommentarer og
1 løsning

Ajax opdatering

Hejsa,

Jeg vil gerne have noget ajax i min kode. Det det skal gøre er at opdatere en lille top hvori der står noget om lyttertal og hvilken sang der bliver afspillet.

Så jeg ville høre om der var en herude der vil hjælpe mig med at lave det (Skal lige siges at jeg ikke aner det mindste om Ajax! :)), eller vidersende mig til et link hvor man kan lære det.

- Kender godt http://www.w3schools.com/ :)

Synes godt om

jakobdo Ekspert

01. februar 2008 - 23:24 #1

Olebole kan ikke lide dette framework, men det kan opdatere noget løbende.
Så du burde tage et kig på:
http://prototypejs.org/api/ajax/periodicalUpdater

Synes godt om

jakobdo Ekspert

01. februar 2008 - 23:25 #2

Og her er lidt mere kode nederst:
http://prototypejs.org/learn/introduction-to-ajax

Synes godt om

jakobdo Ekspert

01. februar 2008 - 23:28 #3

Skal nok kigge på noget kode senere, men fandt lige lidt færdig kode her:
http://groups.google.com/group/Prototypejs/web/ajax-periodicalupdater-example

Det kræver du finder du frameworks.
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>

Synes godt om

supersquirrel Nybegynder

02. februar 2008 - 01:18 #4

Mange tak, men kan sku ikke rigtig forstå noget af det

Synes godt om

olebole Juniormester

02. februar 2008 - 18:39 #5

<ole>

Det handler ikke om, hvad jeg 'kan lide' eller 'ikke kan lide'. Det handler om god eller dårlig kode - samt om valid eller invalid kode - og her lever framework'et ikke op til mindstemålene :)

/mvh
</bole>

Synes godt om

jakobdo Ekspert

03. februar 2008 - 17:16 #6

Olebole: Hvilket javascript framework vil du så anbefale?

Synes godt om

olebole Juniormester

03. februar 2008 - 17:55 #7

Desværre har jeg stadig til gode at se et, der er skrevet i valid, tidssvarende kode - og som ikke lækker mængder af unødig hukommelse i IE.

Derudover har jeg svært ved at se den store forskel på - eller fordelene ved - at sætte sig ind i et framework's struktur og syntaks i forhold til at sætte sig ind i XMLHttpRequest/DOM. Bevares, det sidste kræver en lidt større indsats, men giver til gengæld betydelig større fleksibillitet.

De store problemer ligger under alle omstændigheder i IE's elendige garbage collection, som det kræver en hel del erfaring og et 'arktisk' overblik at kode sig udenom.

Min anbefaling er derfor at lære en masse om de bagvedliggende teknologier - (X)HTML, XMLHttpRequest, JavaScript, DOM, CSS og XML/JSON - og så begynde på Ajax. Man kan så evt. skrive sine egne wrappers og små-libs, som er tilpasset ens egen kodestil og sædvanlige opgavetyper.

Det står ikke skrevet, at alle webteknikker skal være tilgængelige for alle - uden væsentlig indsats. Alle kan købe et keyboard og lære at akkompagnere sig selv ... det tager tid, slid og slæb at blve koncertpianist :)

Synes godt om

jakobdo Ekspert

03. februar 2008 - 18:00 #8

Supersquirrel: Noget i stil med: http://www.codebreaker.dk/exp/817625exp.php

Synes godt om

supersquirrel Nybegynder

03. februar 2008 - 18:27 #9

jakobdo > Det ser faktisk ud som om det er lige præcis sådan et det er jeg ville kunne bruge! :D

For det er faktisk kun lige i toppen, hvor der står ect.

Antal lyttere: xx/xx Sangen skal stå her DJ navn

Og så er der jo en media spiller, så hvis man opdaterer for at se evt. sang navn, eller hvor mange der lytter, så stopper musikken jo, og det er det jeg gerne vil undgå ved at have ajax der opdaterer toppen så snart der skiftes sang/lytterantal :)

Synes godt om

jakobdo Ekspert

03. februar 2008 - 18:43 #10

Her er koden:

<?php
//http://www.eksperten.dk/spm/817625
echo '<?xml version="1.0" encoding="UTF-8"?>' . "\r\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.testtime {
border:1px solid #000;
padding: 5px;
margin-bottom: 2px;
}
</style>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
var ajaxPopulater = function (id,url){
new Ajax.PeriodicalUpdater(id, url,
{
method: 'post',
frequency: 1,
asynchronous: true,
decay: 1
});
}
</script>
<title>Test Script</title>
</head>
<body onload="java script:ajaxPopulater('latest','817625ajax.php')">
<div id="latest"></div>
</body>
</html>

Synes godt om

jakobdo Ekspert

03. februar 2008 - 18:43 #11

<?php
//http://www.eksperten.dk/spm/817625
echo '<div class="testtime" id="test">Vi spiller nu sang nummer: ' . date('s') . '</div>' . "\n";
?>

Synes godt om

supersquirrel Nybegynder

03. februar 2008 - 18:51 #12

Nu tænker jeg.. Skal jeg ikke have prototype.js og scriptaculos.js også?

Synes godt om

jakobdo Ekspert

03. februar 2008 - 19:19 #13

Jo.
Dem kan du enten finde på nettet eller fra min server.
http://www.codebreaker.dk/exp/SCRIPT_NAVN.js

Synes godt om

supersquirrel Nybegynder

03. februar 2008 - 21:03 #14

Hvordan skal jeg så sætte det hele sammen?
Min top skal vel ligge i "817625ajax.php" <- eller hvad jeg nu kalder den

Også skal jeg der hvor toppen skal være på siden skrive: <div id="latest"></div>
Huh? :D

Synes godt om

jakobdo Ekspert

03. februar 2008 - 21:17 #15

Hvad mener du med din top?

Der hvor data skal skrives, skal være: <div id="latest"></div> ja.

Synes godt om

olebole Juniormester

03. februar 2008 - 22:28 #16

Data bliver skrevet ud med innerHTML, som hører til i midthalvfemser kode - aldrig har været valid - og ofte spænder ben for implementering af moderne JavaScript/DOM kode. Da jeg ofte ender op i heftige debatter om emnet, har jeg skrevet denne her :)
http://www.dengodekode.dk/artikler/DOM/no_innerhtml.php

Hvis du kopierer min Ajax / XMLHttpRequest wrapper fra:
http://www.dengodekode.dk/artikler/ajax/xmlhttprequest_wrapper.php

- og inkluderer den i toppen af dokumentet, kan du skrive noget i stil med:

<script type="text/JavaScript">
var sUrl = "http:/www.domain.dk/sti/til/ajax.php";

function AjaxReq(sMethod, sUrl, oVars, fnCallBack) {
var oHttp = new XMLHttpRequest();
oHttp.open(sMethod, sUrl, true);
oHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
oHttp.onreadystatechange = _fnCallBack;
var aQuery = [];
for (var x in oVars) aQuery.push( encodeURIComponent(x) + "=" + encodeURIComponent(oVars[x]) );
oHttp.send( aQuery.join("&") );
aQuery = null;

function _fnCallBack() {
if (oHttp.readyState<4) return;
fnCallBack(oHttp);
oHttp = null;
}
return this;
}

function myCallBack(oHttp) {
document.getElementById("latest").firstChild.nodeValue = oHttp.responseText;
}

function foo() {
new AjaxReq("POST", sUrl, null, myCallBack);
}
</script>

<button onclick="foo()">TEST</button>

<div id="latest"> </div>

Synes godt om

supersquirrel Nybegynder

04. februar 2008 - 15:14 #17

Nu har jeg valgt jakobdo's eksempel, og det virker helt perfekt! :D

Jakobdo > Smid bare point, men tænkte på om du kunne fortælle hvordan jeg kunne bruge dit script 2 steder på en side?

Hvis jeg nu har 2 ting på en side der skal opdateres uden brugere ligger mærke til det - hvordan gør man så det?

Synes godt om

jakobdo Ekspert

04. februar 2008 - 15:49 #18

Enten via 2 kald eller via xml kald.

Synes godt om

supersquirrel Nybegynder

04. februar 2008 - 16:29 #19

Mange tak for hjælpen! :)

Synes godt om

olebole Juniormester

04. februar 2008 - 19:48 #20

- og jeg skal naturligvis ikke undlade at nævne, at der generelt kun er fordele ved at skrive tidssvarende, valid og hensigtsmæssig kode. Hvis man ikke bekymrer sig om at skrive valid script/DOM, er det vanskelligt at se, hvorfor man skulle bekymre sig omkring validiteten af HTML- og CSS-koden ... og det er de fleste jo ellers vældig optaget af ;o)

Synes godt om

jakobdo Ekspert

05. februar 2008 - 06:53 #21

Takker for point.

Synes godt om

supersquirrel Nybegynder

05. februar 2008 - 18:14 #22

Well..

Håber du har lidt tid til at hjælpe mig igen :))

Nu har den virket i 1 dag ca., og den er begyndt at komme med fejlen:
Lyttere: 56/500 Kanye West - Stronger 58,1,71,500,56,56,Kanye West - Stronger,HTTP/1.0 200 OK content-type:text/html
Admin Page is Busy. Waiting 4 Seconds.

Kan det være fordi at den ikke kan rumme mere i sin hukommelse e.l.?

Synes godt om

supersquirrel Nybegynder

05. februar 2008 - 20:28 #23

Nå..

Ajax'et brugte ca. 100 kbps, og fik mit site suspenderet til 01 i nat.
Det jeg vil gøre, er så at ændre frequency: 1, til frequency: 60, så den opdaterer hvert minut, istedet for hvert sekund.

Det må gøre godt :)

Synes godt om

jakobdo Ekspert

07. februar 2008 - 21:39 #24

:o)

Ole, har du også noget god ajax kode, som benytter json ?

Synes godt om

olebole Juniormester

10. februar 2008 - 02:50 #25

Undskyld, jeg har vist ikke fået mails i denne tråd ... kom via et link i en anden tråd :)

Der er ikke så meget hokus-pokus ved JSON i forbindelse med Ajax. Du kan encode et recordset på denne måde (helt råt eksempel):

<?php
header("Content-Type: application/json");

$json = new stdClass();
$json->rows = array();

$sql = "SELECT `user`, `age`, `sex` FROM `users`";
$res = mysql_query( $sql ) or die ( mysql_error() );
while ($row=mysql_fetch_assoc($res)) {
$json->rows[] = $row;
}

print json_encode($json);
/*
Outputter noget i stil med:
{"rows": [{"user":"olebole", "age":52, "sex":"m"}, {"user":"gurlimarie", "age":82, "sex":"f"}]}
*/
?>

- og så skrive:

<script type="text/JavaScript">
/*
Brug samme XMLHttpRequest-wrapper og Ajax-objekt som før
*/

// Et par handy DOM-wrappers:
var d=document;
function gE(id){return d.getElementById(id)};
function gA(o,t){return o.getElementsByTagName(t)};

function myCallBack(oHttp) {
var oTmp = aTd = null, oCont = oDispl.cloneNode(false);
eval("var oResp = " + oHttp.responseText);
var aRows = oResp.rows;
for (var i=0,j=aRows.length; i<j; i++) {
oTmp = oTempl.cloneNode(true);
oCont.appendChild(oTmp);
aTd = gA(oTmp, "td");
aTd[0].firstChild.nodeValue = aRows[i].user;
aTd[1].firstChild.nodeValue = aRows[i].age;
aTd[2].firstChild.nodeValue = aRows[i].sex;
}
oDispl.parentNode.replaceChild(oCont, oDispl);
oDispl = oCont;
}

function getUsers() {
new AjaxReq("POST", sUrl, null, myCallBack);
}

var oTempl = oDispl = null;
window.onload = function() {
oDispl = gE("userDispl");
oTempl = gA(oDispl, "tr")[0];
oDispl.removeChild(oTempl);
}
</script>

<button onclick="getUsers()">Hent brugere</button>

<table>
<thead>
<tr>
<th>Navn</th><th>Alder</th><th>Køn</th>
</tr>
</thead>
<tbody id="userDispl">
<tr>
<td> </td><td> </td><td> </td>
</tr>
</tbody>
</table>

Synes godt om

olebole Juniormester

10. februar 2008 - 02:52 #26

- ganske utestet, men det ser meget rigtigt ud :)

Synes godt om

olebole Juniormester

10. februar 2008 - 02:56 #27

njaahh ... dræb lige responsen i slutningen af myCallBack:

}
oDispl.parentNode.replaceChild(oCont, oDispl);
oDispl = oCont;
oResp = oResp.rows = null;
}

- og så forudsætter serverkoden, at der køres PHP 5+

Synes godt om

olebole Juniormester

10. februar 2008 - 03:09 #28

Derudover kan jeg anbefale:
http://www.json.org/js.html

- og ikke mindst js-filen her:
http://www.json.org/json2.js

- som en- og decoder JSON. Så kan man sende data i et serialiseret array eller objekt til serveren i en enkelt POST-variabel.

På serveren bruges efterfølgende:
$postObject = json_decode( $_POST["variabel_navn"] );

- hvorefter objektet (eller array'et) kan bruges som et alm. PHP-objekt.

I øvrigt kan JSON med fordel bruges til serialisation af PHP-objekter og arrays - f.eks. ved indsættelse i DB. JSON kan bruges til meget andet end Ajax ;o)

Synes godt om

jakobdo Ekspert

10. februar 2008 - 07:14 #29

Super, det må jeg lige få testet og generelt kigget lidt mere på.

Synes godt om

olebole Juniormester

10. februar 2008 - 14:11 #30

Jeg er midt i en artikelserie om Ajax til Prosa. Når den er afsluttet, rammer de samme artikler www.dengodekode.dk i en lidt udvidet version. Derefter er det planen at udvide endnu mere og udgive hele 'librettoen' som bog (250-300 sider), hvilket allerede er godt igang.

Der er rigtig mange faldbruber i Ajax/DOM, og en bog er nok den bedste og mest realistiske måde at komme omkring alle (eller i det mindste de fleste) aspekter.
Naturligvis kunne jeg nok fortælle det hele i gratis, online artikler/tutorials - meeeeen der må også være grænser for filantropien. Det er et stort arbejde, så modellen bliver: "noget er gratis - resten vil jeg betales for" :)

Synes godt om

jakobdo Ekspert

10. februar 2008 - 17:10 #31

Fair nok. :o)

Synes godt om

jakobdo Ekspert

10. februar 2008 - 17:34 #32

Olebole, nu sidder jeg og tester din kode, er den strict eller klarer den alle doctypes?
Jeg synes nemlig jeg får fejl i strict, xhtml. :o(

Synes godt om

jakobdo Ekspert

10. februar 2008 - 17:44 #33

Det blev dog løst med:

//<![CDATA[
WRAPPER
//]]>

Synes godt om

jakobdo Ekspert

10. februar 2008 - 17:55 #34

olebole, hvad er din oVars tiltænkt?
json ?

Synes godt om

olebole Juniormester

10. februar 2008 - 18:02 #35

oVars er tiltænkt et objekt af variabler:
new AjaxReq("POST", sUrl, {"var_1":"bla", "var_2":"blabla"}, myCallBack);

Objektet konverteres til en query-streng med:
var aQuery = [];
for (var x in oVars) aQuery.push( encodeURIComponent(x) + "=" + encodeURIComponent(oVars[x]) );

- og sendes med:
oHttp.send( aQuery.join("&") );

Variablerne vil på serveren så være at finde som $_POST["var_1"] og $_POST["var_2"]

Synes godt om

olebole Juniormester

10. februar 2008 - 18:06 #36

Løsningen med de udkommenterede CDATA-escapings:
//<![CDATA[
WRAPPER
//]]>

- er i virkeligheden noget fordrukkent sludder. Det giver absolut ingen mening i forbindelse med XHTML og kan udelukkende bruges til at tilfredsstille en (i denne forbindelse tåbelig) markup-validator ... men det er jo ikke din skyld ;o)

Synes godt om

jakobdo Ekspert

10. februar 2008 - 18:26 #37

Du er sgu da også altid så skide klog og har svar på alt! :o)
Takker endnu engang.

Synes godt om

olebole Juniormester

27. marts 2008 - 22:16 #38

Via en anden tråd er det gået op for mig, jeg er kommet til at lave en fejl i denne!

HTTP-header felter er case sensitive - og der skulle højere oppe have stået:
oHttp.setRequestHeader("Content-Type", "text/xml");

'Content-Type' skal være med stort 'T'. Der sker mig bekendt ikke noget ved at skrive det med lille 't', men man kan ligeså godt gøre det korrekt. Sorry ;o)

Synes godt om

jakobdo Ekspert

31. marts 2008 - 21:33 #39

amen olebole dog.
Smider du om dig med buggy kode? :o)

Synes godt om

olebole Juniormester

31. marts 2008 - 21:48 #40

- osse med byldede semikolon og væskende gåseøjne! ;D

Synes godt om

jakobdo Ekspert

31. marts 2008 - 21:55 #41

LOL

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra PHP kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Adgang til vandaflæsningsdata Af nemlig i PHP	4	22/04/202422:04	30/04/202421:08
Vælg post rækkefølge Af Mojo_dk i PHP	3	06/04/202418:40	07/04/202412:20
Hjælp til PHP Af Friis77 i PHP	5	11/02/202419:58	12/02/202407:55
Total antal records med undtagelse Af uac i PHP	5	09/02/202414:55	09/02/202415:30
Delete form Af lefsa62 i PHP	1	29/01/202412:40	29/01/202412:41

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS