Kirjautuminen
Tehtävät
Kilpailu
4. kierros:
7.11. klo 18 – 9.11. klo 23
Tämä funktio mahdollistaa XMLHttpRequest-kyselyiden tekemisen helposti. Funktiolle annetaan parametreiksi url ja id. POST-kyselyssä käytetään myös kahta muuta parametriä, lisätietoja alapuolella. url on osoite, johon kysely tehdään. id on elementin ID, johon osoitteen palauttama teksti tulostetaan.
Käyttötavat
Tällä funktiolla voit lähettää sekä GET- että POST-kyselyjä. Kumpiinkin voit myös antaa muuttujia, jotka lähetetään palvelimelle.
GET-kysely muuttujilla
Lisää osoitteen perään haluamasi muuttujat.
Funktion kutsunta esim.
load('index.php?a=viewsource&p=etusivu', 'lahdekoodi');POST-kysely muuttujilla
Lisää params -muuttujaan haluamasi muuttujat. Muista myös laittaa method -parametrin arvoksi POST
Funktion kutsunta esim.
load('index.php', 'lahdekoodi', 'POST', 'a=viewsource&p=etusivu');TÄRKEÄÄ TIETOA:
Jos lähetät POST-kyselyn, laita url -muuttujaan VAIN osoite, ei mahdollisia parametrejä. Parametrit laitetaan params -muuttujaan POST-kyselyssä. Muista myös täyttää method -kenttä arvolla POST.
Demo löytyy täältä.
load.js
function load(url, id, method, params){
// tarkistetaan onko funktion parametrit method
// ja params täytetty, jos ei, laitetaan tarvittavat
// arvot niille
if(typeof method === "undefined") method = "GET";
if(typeof params === "undefined") params = "";
xmlhttp = "null"; // Tyhjennetään xmlhttp-muuttuja
// Suoritetaan yhteensopivuustestejä
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
if (window.ActiveXObject){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// Jos muuttuja ei ole tyhjä
if (xmlhttp !== "null"){
if(method == "POST"){
xmlhttp.open("POST", url, true); // POST-kysely
// Lähetetään headereita
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
} else {
xmlhttp.open("GET",url,true); // GET-kysely
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
// kysely onnistui, laitetaan tiedot elementtiin
document.getElementById(id).innerHTML=xmlhttp.responseText;
}
}; // kun kysely on valmis, suoritetaan funktio
if(method == "POST"){
// Jos tapa on POST, lähetetään muuttujat
xmlhttp.send(params);
} else {
// Muutoin lähetetään tyhjä data
xmlhttp.send(null);
}
} else {
// Jos muuttuja oli tyhjänä, selain ei tue XMLHttpRequestiä
// joten näytetään ilmoitus
alert("Pahoittelemme, mutta selaimesi ei valitettavasti tue käyttämäämme XMLHTTP-tekniikkaa. Päivitäthän selaimesi uudempaan versioon.");
}
}Käyttöesimerkki
<html>
<head>
<title>XMLHttpRequest-testi</title>
<script type="text/javascript" src="load.js">
</script>
</head>
<body>
Allaolevaan diviin pitäisi tulostua tiedoston <a href="tiedot.txt"><tt>tiedot.txt</tt></a> sisältö,
kun painat <a href="javascript:load('tiedot.txt', 'tiedot');">tästä</a>.<br><br>
<div id="tiedot" style="border:1px solid black;"><br></div>
</body>
</html>Sori, esittelystä tuli vähän vaikeasti luettava :(
Yritin laittaa kaiken tarvittavan infon, niin meni noin hankalasti luettavaksi.
Aihe on jo aika vanha, joten et voi enää vastata siihen.