Blog Image

WEB ontwikkeling & design BLOG

Waarom ?

Deze blog biedt een platform om informatie te delen over HTML & CSS, JavaScript, PHP, (My)SQL, ... .
Niet alleen voor de cursisten en lesgevers uit de afdeling WEB ontwikkeling & design van het SCVO-ENCORA, Grote Steenweg 226 te Berchem - Antwerpen, maar met en door iedereen die geïnteresseerd is in de ontwikkeling van het internet

e-mail cloacking

JavaScript Posted on 09 dec, 2016 15:32:54


Wanneer je jouw e-mail-adres op een (niet beschermde) site plaatst ga je al heel snel een hele hoop spam mails krijgen.
Spam-robots hebben jouw e-mail opgepikt.

je kan dit op een eenvoudige manier verhelpen.
Op deze codepen vind je een oplossing



Frameworks of eigen JavaScript code ?

JavaScript Posted on 03 jun, 2016 15:48:20

Is het gebruik van jQuery of Angulair JS een goede zaak ?
Niet altijd. Frameworks hebben een grote overhead aan code en vertragen het inladen van je web-pagina.
Meestal is het veel beter om zelf kleine stukjes JavaScript code te schrijven. dit resulteert in snellere up-load en beter verwerking dmv efficiënter JavaScript code.

Voorbeelden

POP-UP scherm

function popUp(info)

{

window.open(‘../scripts/E_popUp.php?i=’+info,’_blank’,’toolbar=no, scrollbars=yes, resizable=yes, top=300, left=600, width=300, height=300′);

}

AJAX call

function loadXMLDoc()

{

xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById(“info”).innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open(“GET”,”ajax_1.txt”,true);

xmlhttp.send();

}



AJAX eenvoudiger kan het niet

JavaScript Posted on 03 jun, 2016 14:52:11

AJAX –> Asynchroon JavaScript And XML

AJAX was voor mij altijd een wat troebele techniek, nuttig, maar ingewikkeld. Vele boeken over dit onderwerp maakten het mysterie groter zonder de essentie te verklaren.

Hier ga ik proberen om een eenvoudige uitleg te geven over het gebruik van AJAX voor Web-applicaties.

Doel: ververs/verander een deel van je pagina zonder dat je de hele pagina moet inladen.

code

function AJAXFunctie()

{

xmlhttp=new XMLHttpRequest();

setTimeout(function() {xhttp.abort() },40000);

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById(“naam”).value=xmlhttp.responseText;

}

}

xmlhttp.open(“GET”,”gemeenteNaam.php?p=”+postcode,true);

xmlhttp.send();

}

HOE WERKT HET


xmlhttp=new XMLHttpRequest();

• Het
XMLHttpRequest object
wordt gebruikt om data uit te wisselen “achter de schermen”

• Dit
maakt het mogelijk om slechts een deel van een pagina aan te passen i.p.v. de
hele pagina terug in te laden

à
xmlhttp.open(“Method”, “URL”,Async);

• Method

– GET

– POST

• URL

– Locatie
op de server

• Async

– True à
Asynchroon

– False
à
synchroon

_ xmlhttp.send(string);

• Verstuurt
het request naar de server

• String
à enkel bij method
“POST”

xmlhttp.open(“GET“,”gemeenteNaam.php?
p=12&a=13”,true);

xmlhttp.send();

xmlhttp.open(“POST“,”gemeenteNaam.php”,true);

xmlhttp.setRequestHeader(“Content-type”,”application/ x-www-form-urlencoded”);

xmlhttp.send(“p=12&a=13”);

à
document.getElementById(“info”).innerHTML=xmlhttp.responseText

responseText

– “response
data” als een string

responseXML

– “response
data” als een XML geformateerde data

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4
&& xmlhttp.status==200)

{

document.getElementById(“myDiv”).innerHTML=

xmlhttp.responseText;

}

}

à
onreadystatechange

• We
willen een actie uitvoeren op basis van het antwoord van de server

• Het
onreadystatechange event is triggered elke keer de readyState veranderd

• Het
readyState property geeft de status van thet XMLHttpRequest.

readyState

0: request not initialized

1: server connection established

2: request received

3: processing request

4: request finished and response
is ready

status

200:
“OK”

404: Page not
found