Si en la página anterior introduciste valores
en el formulario, aquí tienes el resultado (comparar con la
URL)
Procesar la URL
El siguiente paso es recoger los argumentos en un formato un poco
más práctico.
Esto se hace utilizando "indexOf()"
y "split()" para separar la cadena
en trozos más pequeños.
Estos trozos son posteriormente introducidos en un array.
El autor decidió crear un objeto que manejara esto así
como poder utilizar simplemente las llamadas a unos métodos
personalizados.
La instancia del objeto (a la que yo he llamado para el ejemplo
"mi_objeto) se crea así::
var mi_objeto = new ArgumentURL();
(es decir creamos una copia de argumentURL(),que he llamado "mi_objeto"que
heredará todas sus funciones y métodos)
Este objeto hereda 3 métodos que permiten manipular los
argumentos (y que son los que utilizaremos), son:
mi_objeto.leerArgumento(Nombre) Devuelve el
valor como una cadena de caracteres (string). Si no encuentra argumentos
con el nombre introducido, devuelve "null".
mi_objeto.escribirArgumento(Nombre, Valor)
Crea un argumento con el nombre y valor declarados.
mi_objeto.quitarArgumento(Nombre) Elimina el
argumento.
mi_objeto.toString() o simplemente mi_objeto.
Creará una cadena que contendrá la parte final de la
URL a partir del signo ? sumando todas los métodos
mi_objeto.escribirArgumento(Nombre, Valor) que
hayamos creado
Esto es útil para enviar los argumentos.
Las siguientes sentencias cargarían el archivo pagina3.html
con los argumentos que hemosdeclarado:
var mi_objeto = new ArgumentURL();
mi_objeto.escribirArgumento("nombre","Pepe");
mi_objeto.escribirArgumento("Poblacion","Oviedo");
window.location = "pagina3.html" + mi_objeto;
Devolvería una dirección como esta:
http://www.miservidor.com/pagina3?nombre=Pepe&Población=Oviedo
Para recuperar el valor de "nombre", sólo habría
que poner:
var mi_objeto = new ArgumentURL();
mi_objeto.leerArgumento("nombre");
El código:
Éste es el código del archivo principal, argumenturl.js. Podéis copiarlo
en el encabezado o copiarlo en la misma carpeta de las páginas
que lo vayan a utilizar y enlazarlo en el <HEAD> con:
<SCRIPT src="argumenturl.js" type=text/javascript></SCRIPT>
function ArgumentURL() {
this.leerArgumento = _getArg;
this.escribirArgumento = _setArg;
this.quitarArgumento = _removeArg;
this.toString = _toString;
this.argumentos = new Array();
// Inicio
var separator = "&";
var equalsign = "=";
var str = window.location.search.replace(/%20/g, " ");
var index = str.indexOf("?");
var sInfo;
var infoArray = new Array();
var tmp;
if (index != -1) {
sInfo = str.substring(index+1,str.length);
infoArray = sInfo.split(separator);
}
for (var i=0; i<infoArray.length; i++) {
tmp = infoArray[i].split(equalsign);
if (tmp[0] != "") {
var t = tmp[0];
this.argumentos[tmp[0]] = new Object();
this.argumentos[tmp[0]].value = tmp[1];
this.argumentos[tmp[0]].name = tmp[0];
}
}
function _toString() {
var s = "";
var once = true;
for (i in this.argumentos) {
if (once) {
s += "?";
once = false;
}
s += this.argumentos[i].name;
s += equalsign;
s += this.argumentos[i].value;
s += separator;
}
return s.replace(/ /g, "%20");
}
function _getArg(name) {
if (typeof(this.argumentos[name].name) != "string")
return null;
else
return this.argumentos[name].value;
}
function _setArg(name,value) {
this.argumentos[name] = new Object()
this.argumentos[name].name = name;
this.argumentos[name].value = value;
}
function _removeArg(name) {
this.argumentos[name] = null;
}
return this;
}
|
Al margen de la utilidad del script, sirve también para
ver cómo se pueden crear en JavaScript objetos y métodos
personalizados (aunque tampoco es algo que se haga todos los
días...)
Links relacionados:
Tutorial
original de WEBFX
Autor: Erik Arvidsson
|
