Att kunna skicka information mellan två olika webbsidor är alltid trevligt. Det finns olika sätt att göra det på, och query strings, eller frågesträngar, är ett sätt. En frågesträng är information som skickas i url:en till en sida. Du har säkerligen sett url:er i stil med sida.php?id=423 eller script.asp?blah=yak&all=same. I det första exemplet betyder det att sida.php ska hämtas, med variabeln id satt till värdet 423, och i det andra exemplet ska script.asp hämtas med två variabler, blah som har värdet yak och all som har värdet same. Detta är ett vedertaget (och praktiskt) sätt att skicka information mellan sidor. Det går även att använda dessa frågesträngar i JavaScript. Den "råa" frågesträngen finns i location.search, men det är obekvämt att använda sig direkt av denna egenskap, så jag har knåpat ihop en liten klass (eller vad man nu ska kalla det) som gör jobbet åt en. Användningen är enkel.
Initiering
För att arbeta med url:en för det dokument som scriptet körs i skapar man ett nytt QueryString-objekt utan några argument till konstruktorn. Alltså:
var qs = new QueryString();
[i]... gör något vettigt med informationen...[/i]
Du kan även skapa ett QueryString-objekt med en frågesträng för ett annat dokument än det aktuella. Om du till exempel skulle vilja använda den frågesträng som används av det "översta" dokumentet i ett frameset skulle du kunna göra så här:
var qs = newQueryString(top.location.search);
Du kan även skicka in "hårdkodade" frågesträngar (om du kan komma på någon vettig anledning ;) ):
var qs = new
QueryString("?blah=yak&blame=pain");
Om det första tecknet i den frågesträng som scriptet arbetar med är ett frågetecken antas det att detta tecken är ointressant. Exemplet ovan hade kunnat skrivas så här:
var qs = new QueryString("blah=yak&blame=pain");
Användning
För att få fram värdet för en variabel i frågesträngen anropas en metod som heter get. Exempel:
var qs = new QueryString();
document.write("<img src=\""+qs.get("filnamn")+".jpg\" alt=\"En bild\">");
Om denna kodsnutt kördes på en sida som hämtades med url:en sida.html?filnamn=hus så skulle den genererade html-koden bli <img src="hus.jpg" alt="En bild">. (Detta är ett smart användningsområde för frågesträngar och javascript: Skriv en sida för bildvisning, och visa olika bilder på denna sida med hjälp av scriptet ovan.) Det går även att ange default-värden för variabler, som returneras om den eftersökta variabeln inte finns i frågesträngen. Anta att vi i exemplet ovan skulle vilja ange att om variabeln filnamn inte finns i frågesträngen, så ska vi använda strängen "auto" i stället.
Då skulle raden som skriver ut html-koden se ut så här (tillägget markerat med fetstil):
document.write("<img src=\""+qs.get("filnamn"[b], "auto"[/b])+".jpg\" alt=\"En bild\">");
Om inget defaultvärde anges, och om variabeln inte finns, returneras en tom sträng.
En variabel kan har flera värden, om frågesträngen ser ut i stil med det här:
sida.html?filnamn=hus&filnamn=vovve&filnamn=pangpang
Hur man ska hantera sådana situationer kan man diskutera, men jag löste det genom att låta värdena - om det finns flera stycken - hamna i en array. I exemplet skulle QueryString.get("filnamn") returnera en array med tre element, det första "hus", det andra "vovve" och det tredje "pangpang". Huruvida en variabel har flera värden eller ej kan man avgöra på flera vis, här är ett exempel:
var qs = new QueryString();
var arraytyp = typeof [/*tom array*/];
var filnamn = qs.get("filnamn", false);
if((typeof filnamn) == arraytyp)
alert("Flera filnamn");
else if(filnamn)
alert("Bara ett filnamn");
else
alert("Inget filnamn");
Att skicka värden värdena i en frågesträng kan skickas på flera vis. Du kan till exempel skriva en länk, med informationen hårdkodad:
<p>Bilder på...<br>
<a href="bild.html?filnamn=hus">... mitt hus</a><br>
<a href="bild.html?filnamn=vovve">... min hund</a><br>
<a href="bild.html?filnamn=pangpang">... min luftvärnskanon</a>
</p>
Ett annat sätt är att göra ett formulär som använder metoden GET.
<form action="bild.html" method="GET">
<select name="filnamn">
<option value="hus">Mitt hus</option>
<option value="vovve">Min hund</option>
<option value="pangpang">Min luftvärnskanon</option>
</select>
<input type="submit" value="Titta på bilden">
</form>
Om du hårdkodar frågesträngarna i länkar, så måste du komma ihåg att url-koda värdet. Om du till exempel vill skicka med värdet "Ålsoppa med ättika och öl" i variabeln favoritmat, måste länken se ut på följande vis:
<a href="krubb.html?favoritmat=%C5lsoppa+med+%E4ttika+och+%F6l">Titta!</a>
Om du inte kodar specialtecken som å, ä och ö eller mellanslag, kan i princip vad som helst hända (även om det i de flesta fall bara innebär att inte all information skickas med). Vet du inte hur url-kodning går till, kan du skriva in följande kod i webbläsarens adressfönster:
javascript: alert(escape("Ålsoppa med ättika och öl")); // Visa texten url-kodad
Kompatibilitet
Har testats i och funkar med Opera 5, Netscape 4.08, Internet Explorer 4 samt Mozilla 0.7 (Netscape 6, i princip). Funkar dock inte lokalt med Internet Explorer, eftersom den inte förstår att frågesträngen inte är en del av filnamnet. Över http går det däremot bra.
/**
* Bibliotek för användning av frågesträngar. Fritt för användning, modifiering och spridning.
*/
function QueryString(){
this.values = {};
this.queryString = "";
if(arguments.length == 0)
this.queryString = location.search?location.search:"";
else // hade argument
this.queryString = arguments[0];
if(this.queryString.indexOf("?") == 0)
this.queryString = this.queryString.substring(1);
var pairs = this.queryString.split("&");
for(var i in pairs){
pairs[ i] = pairs[ i].split("=");
for(var j in pairs[ i]) // avkoda URL
pairs[ i][j] = unescapePlus(pairs[ i][j]);
var key = pairs[ i][0];
var value = pairs[ i][1];
if(this.values[key]){ // finns redan
if( (typeof this.values[key]) == (typeof []) ){ // fler finns redan
this.values[key] = this.values[key].push(value); // appendera
} /* if array */ else if( (typeof this.values[key]) == (typeof "string")){
this.values[key] = [this.values[key], value]; // skapa ny array
} else this.values[key] = value;
} else { // finns inte
this.values[key] = value;
} // if this.values[key]
} // for pairs
} // function QueryString
function qsGet(key){
var alt ="";
if(arguments.length == 2)
alt = arguments[1];
return this.values[key]? this.values[key] : alt;
}
function qsToString(){
return this.queryString;
}
QueryString.prototype.get = qsGet;
QueryString.prototype.toString = qsToString;
function unescapePlus(str){ // unescape med plustecken
str = globalReplace(str, "+", " ");
return unescape(str);
}
// I Opera 5 funkar inte String.replace av någon konstig
// anledning, så vi får lov att använda en egen funktion.
function globalReplace(str, what, withWhat){
var tmp = "";
while(str.length != 0)
if(str.indexOf(what) == 0){
tmp += withWhat;
str = str.substring(what.length);
} else {
tmp += str.charAt(0);
str = str.substring(1);
}//else
return tmp;
}//globalReplace
------------------
Life feeds on life feeds on life feeds on life feeds on life...
[Redigerat av spango den 10 apr 2001]