nelson corrêa viana júnior

agosto 4, 2007

Atualizando dados instantâneamente

Filed under: javascript, programação — nelson @ 21:32:38

No nosso caso iremos precisar do prototype.

Uma observação:
– Caso o javascript do browser estiver desabilitado esta função não funcionara. (meio difícil isso hoje em dia)

new PeriodicalExecuter(function(fr) {
	var ajax = ajaxRequest();

	/*
	no arquivo.ext você usa a linguagem que preferir (php, cgi, asp, coldfusion..)
	porém dentro do arquivo você tera que imprimir na tela (echo, response.write, print...)
	*/

	ajax.open('GET' , 'arquivo.ext', true);
	ajax.onreadystatechange = function() {
		if(ajax.readyState == 1) {
			response("Atualizando...");
		}
		if(ajax.readyState == 4) {
			if (ajax.status == 200) {

				//no 'id' abaixo você colocara o id aonde receberá o resultado
				$('id').innerHTML = ajax.responseText;

			}
		}
	}
	ajax.send(null);
}, 1);

//este 1 é o tempo de atualização (em segundos)

Links usando javascript não-obstrutivo

Filed under: javascript, programação — nelson @ 17:08:18

Antes de tudo você precisará fazer download do prototype.js. Este arquivo é quem vai nos ajudar.
Ele é um framework desenvolvido em javascript e tem funções que simplificam a nossa vida.

Site Oficial do prototype

Event.observe(window, 'load', loopLinks);
function loopLinks() {

	var body = document.getElementsByTagName('body').item(0);
	var links = body.getElementsByTagName('a');

	//loop em todos os links (<a>)
	for(var i=0; i < links.length; i++)
	{
		//coloca cada link numa variavel
		linkBtn = links[i];
		//captura o atributo rel de cada link
		var rel = new String(linkBtn.getAttribute('rel'));

		//verifica se a palavra delete esta no rel
		if(rel.substring(0, 6) == 'delete')
		{
			//caso esteja ele continua na função click
			linkBtn.onclick = function()
			{
				//chama o ajax
				var ajax = ajaxRequest();

				/*
				agora queremos capturar o id.
				lembrando que no atributo rel do link esta da seguinte forma: acao:id

				ex: <a rel="delete:2" href="arquivo.php?acao=delete&id=2">link</a>
				*/
				var id = this.getAttribute('rel').split(":")[1];

				/*
				setamos os parâmetros.
				estes parâmetros serão enviados para um arquivo.php no método GET
				*/
				var params = '&postAct=delete&postId=' + id;

				/*
				colocaremos em uma variavel qual é o id do link
				neste momento o link se encontra da seguinte forma:

				<a id="noticia" rel="delete:2" href="arquivo.php?acao=delete&id=2">link</a>
				*/
				var divID = this.getAttribute('id');

				/*
				aqui fica a função do ajax de enviar ao arquivo.php os parâmetros e retornar algo
				estas linhas de função do ajax estão melhor explicadas pela w3schools.
				*/
				ajax.open('GET' , 'arquivo.php?ajax=1' + params, true);
				ajax.onreadystatechange = function() {
					if(ajax.readyState == 1) {
						response("Carregando...");
					}
					if(ajax.readyState == 4) {
						if (ajax.status == 200) {
							response(ajax.responseText);
						}
					}
				}
				ajax.send(null);
				//este return false faz com que o link pare.
				return false;
			}

		}
	}
}
function ajaxRequest() {
	var ajax;
	try {
		ajax = new XMLHttpRequest();
	} catch(ee) {
		try {
			ajax = new ActiveXObject("Msxml2.XMLHTTP");
		} catch(e) {
			try {
				ajax = new ActiveXObject("Microsoft.XMLHTTP");
			} catch(E) {
				ajax = false;
			}
		}
	}
	return ajax;
}

Blog no WordPress.com.