Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 75 postagens
Mais de 75 postagens
Tópico Autor
Mensagens: 96
Nome: Júnior
Descrição do site: Voltado para o Desenvolvimentos de Sistemas
Localização: Goiania
Contato:

O que é Ajax?

04-02-2009 11:12

fonte: http://www.htmlstaff.org/ver.php?id=4543
Bom dia a Todos do forum mais uma dica que eu achei nas minha viajem pela net

O que é AJAX?

A grande reclamação dos usuários que utilizam sistemas baseados na web é a necessidade para cada solicitação, a execução novamente de todo o processo de envio, criação da página e devolução ao navegador, que recebe sempre uma página completa.

Estas atividades geram um tráfego de rede excessivo e envio desnecessário de dados que não foram alterados. A conseqüência deste processo para o usuário é uma tela muito lenta quando existe a necessidade de interatividade maior com o usuário, agravando ainda mais quando a página possui muitos dados e/ou componentes.

Estes conjuntos de fatores levam muitos usurários e desenvolvedores a dizerem que os sistemas web têm pouca usabilidade e problemas com cenários com alta interatividade com o usuário.

É dentro deste cenário que o framework AJAX se aplica. A proposta de todos os frameworks AJAX é justamente reduzir drasticamente o trafego de dados e aumentar exponencialmente a interatividade com o usuário. Os dados são enviando e recebidos sem a necessidade de se enviar toda uma página, somente os dados necessários e/ou alterados trafegam.

Mas como isso é feito? Pergunta mais que objetiva que todos fazem após a afirmativa anterior. Quando disse no inicio do artigo que este novo “embora velho” framework, me referia ao recurso já algum tempo disponível nos principais navegadores de mercado:

XMLHttpRequest().

Esta função (ou semelhante), disponível há algum tempo nos principais navegadores, permite que sejam feitas requisições no servidor pela página do cliente sem a necessidade de uma nova “carga” de página. Se o leitor é atento a detalhes quando navega pela internet, já deve ter entrado em algum bate papo e percebido que a tela de conversação não tem o refresh, nem é carregada novamente a cada mensagem que é enviada e recebida. Esta é a idéia básica do AJAX, que disponibiliza junto com seu framework uma série de funções escritas em JavaScript que realizam esta tarefa. (Alguns framework embutem dentro dos componentes que disponibiliza estas funções).

Porem isso não é suficiente para resolver o problema... Alem de enviar e receber somente os dados necessários, sem executar novamente toda a página, o Framework AJAX deverá ser capaz de interceptar todas as requisições recebidas no servidor, para que possa dar o tratamento adequado aos objetos existentes, devolvendo de forma adequada ao cliente. O cliente por sua vez deve processar as repostas com as funções que já estão armazenadas na página.

Vejamos alguns Exemplos Abaixo:
function openajax() /* Cria a Funcao*/ { var ajax; /* Defini a Variável */ try { ajax = new XMLHttpRequest(); /* Tenta Instanciar o Objeto */ } catch(ee) { try { ajax = new ActiveXObject("Msxm12.XMLHTTP"); /* Se Nao Conseguiu o Anterior Tenta esse*/ } catch(e) { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); /* E o memso se repete aqui*/ } catch(E) { ajax = false; /* Se nao conseguiu em Nenhum retorna False pois o Navegador Usado nao Suporta Ajax*/ } } } return ajax; /* Retorna um Boleano*/

Obs.: Existem mais métodos alem deste isso difere de acordo com o navegador usado pelo cliente.

Aqui um outro exemplo de como usar:
function carrega_pagina (plink) /*Recebe parâmetro o Link a Pagina Solicitada */ { var divCarregando = document.getElementById('Carregando'); /* Pega o Div pelo id*/ var divResposta = document.getElementById('Resposta'); /* Pega o Div pelo ID */ var ajax = openajax(); /* Chama a Função que Instancia o AJAX */ ajax.open("GET",plink,true); /* ajax.open = Abri uma Solicitação ao Navegador */ /* GET = Método Usado */ /* plink = pagina que tratara o solicitado */ /* true = Assicrono ou não = Dando o Refresh no Browser ou Nao*/ ajax.onreadystatechange = function() /* ajax.onreadystatechange = O que ele fara de acordo com o tempo de execuação*/ { if (ajax.readyState < 4) /* ajax.readystate = Estado que se encontra a Requisição*/ { divCarregando.style.display = 'block'; } if (ajax.readyState == 4) { if (ajax.status == 200) /* Estado de Carregamento*/ { divCarregando.style.display = 'none'; divResposta.innerHTML = ajax.responseText; /* ajax.responseText = Recebe o que foi enviado pelo arquivo de tratamento*/ } } } ajax.send(null); /* Muito Importante Envia o Resultado para o Navegador */ }

Obs.: Na parte readyState ele tem 4 tempos:

1. Sendo enviado;
2. Processando;
3. Armazenando;
4. Pronto.

Uma parte importante é o tratamento de acentos que o AJAX geralmente precisa pois ele tem problemas com isso.

Outro é que ele não traz do código uma tag Javascript.

Ele possui por POST também para formulários embora não diferencie muito pois com GET não aparece o passado na url desde usado assincrono.
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado