Jarbs

Variáveis GET e o Javascript

Variáveis GET são variáveis definidas via o método HTTP GET. Essas variáveis são visíveis para todos, ficam presentes na URL.

O acesso dessas informações por Javascript pode ser interessante por diversos motivos:

Script dinâmico com base na URL
Modificar parâmetros de URLs sem ter que usar formulários

Variáveis GET e o Javascript

Acessando variáveis GET por Javascript

O método URL.parse() identifica as variáveis GET da URL atual ou de uma URL. Uma vez que as variáveis foram identificadas, seus valores são acessados através do método URL.get().

URL atual

// www.jarbs.com.br/?teste=sim&valor=1

// identifica as variáveis da URL
URL.parse();

// o acesso das variáveis é feito através do método URL.get
URL.get('teste');
>>> sim

URL.get('valor');
>>> 1

De uma URL

URL.parse('index?var1=A&var2=B');

URL.get('var1');
>>> A

URL.get('var2');
>>> B

Editando e criando variáveis GET

O processo de identificar as variáveis transforma a URL, que é uma string, em variáveis Javascript. Sendo variáveis Javascript podemos fazer qualquer coisa com essas variáveis. O acesso a variavél é feito pelo método URL.get e o seu valor modificado pelo método URL.set.

// www.jarbs.com.br/?pais=EUA&uf=NY

// identifica as variáveis GET
URL.parse();

URL.set('pais', 'Brasil');
// pais=Brasil&uf=NY

URL.set('uf', 'sp');
// pais=Brasil&uf=sp

URL.set('uf', 'rj');
// pais=Brasil&uf=rj

Se você tentar modificar uma variável que não existe ela será automaticamente criada. Logo mais veremos por que criar variáveis GET, quando tudo que nós interessa de primeira vista é acessar seus valores.

// cria uma nova variável GET
URL.set('lg', 'pt');
// pais=Brasil&uf=rj&lg=pt

Refazendo

De nada serve modificar ou criar variáveis se não vamos transforma-las de volta em URL.

O método URL.go transforma as variáveis Javascript que foram identificadas, modificadas e ou criadas de volta em URL e redireciona para essa URL.

// www.jarbs.com.br/?post=300&lg=pt

// identifica as variáveis
URL.parse();

// substituí o valor da variável lg
URL.set('lg', 'en');

// cria uma nova variável
URL.set('cache', 'false');

// redireciona para a nova URL
URL.go();

// podemos também usar essas variáveis em uma outra página
URL.go('index2.html');

Código fonte

Código fonte explicado

var URL = {
	// array de variáveis get
	vars: [],

	// acessa uma variável
	get: function(nam) {
		// retorna o valor da variável se existir
		// ou falso
		return this.vars[nam] || false;
	},

	// cria ou modifica uma variável
	set: function(nam, val) {
		this.vars[nam] = val;
	},

	// identifica as variáveis de uma URL
	parse: function(url) {
		// a expressão regular procura por possíveis variáveis
		// que estiverem entre ? e #
		// pode ser em uma URL ou da URL da página atual
		if (vars = /\?([^#]+)/.exec(url || window.location.href)) {
			// caso encontre, as variáveis são separadas nos pares
			// variável = valor
			var e = vars[1].split('&');

			// o laço percorre todas as variáveis encontradas
			for (var i=0; i &lt; e.length; i++) {
				// nome e valor são separados
				var a = e[i].split('=');
				// e incluídos no array de variáveis
				this.vars[a[0]] = a[1];
			}
		}
	},

	// une as variáveis javascript transformando no padrão de URL
	// e redireciona para a URL
	go: function(url) {
		var a = [];
		// URL passada por parâmetro ou a URL atual
		url = url || window.location.href.split('?')[0];

		// se existir variáveis
		if (this.vars) {
			// percorre as variáveis, gerando combinações de nome=valor
			for (k in this.vars)
				// cada conjunto nome=valor é inserido em um array
				a.push(k +'='+ this.vars[k]);

			// o array é convertido para string
			url += '?' + a.join('&');
		}

		// faz o redirecionamento
		window.location.href = url;
	}
}

Código fonte

var URL = {
	vars: [],

	get: function(nam) {
		return this.vars[nam] || false;
	},

	set: function(nam, val) {
		this.vars[nam] = val;
	},

	parse: function(url) {
		if (vars = /\?([^#]+)/.exec(url || window.location.href)) {
			var e = vars[1].split('&');

			for (var i=0; i &lt; e.length; i++) {
				var a = e[i].split('=');
				this.vars[a[0]] = a[1];
			}
		}
	},

	go: function(url) {
		var a = [];
		url = url || window.location.href.split('?')[0];

		if (this.vars) {
			for (k in this.vars)
				a.push(k +'='+ this.vars[k]);

			url += '?' + a.join('&');
		}

		window.location.href = url;
	}
}