Caderno de Anotações do Caio Nakashima: Ajax

Mostrando postagens com marcador Ajax. Mostrar todas as postagens

terça-feira, 17 de janeiro de 2012

Edição HTML com AJAX

O estilo apresentado abaixo permite a edição de um campo em uma página HTML, ou seja, permite a edição em uma página de relatório.

HTML
<input

name="" 

onchange="javascript:ajaxCampoResposta(this.value,1,5 )"  

value="teste" 

style="width: 100%; background: none repeat scroll 0% 0% transparent; border: 0px none;" 

onmouseout="this.style.border="0px none"" 

onmouseover="this.style.border="1px solid #000000"" 

maxlength="255" 

onkeyup=" { document.getElementById("botao_salvar").style.display="";document.getElementById("botao_cancelar").style.display="";this.parentNode.parentNode.firstChild.firstChild.title="*";} this.value = this.value.replace(/\d/g,"").toUpperCase();"

>

JavaScript - Codigo JavaScript que faz chamada para um Ajax de atualização de Campo.

function ajaxCampoResposta(oiac_objeto, id_dicionario, id)
{
 /*
 alert(oiac_objeto+campo);
 return true;
 //*/
 var xmlHttp;
 try
 {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
 }
 catch (e)
 {
  // Internet Explorer
  try
  {
   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch (e)
  {
   try
   {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   catch (e)
   {
    alert("Seu navegador não suporta AJAX!");
    return false;
   }
  }
 }
 xmlHttp.onreadystatechange=function()
 {
  if(xmlHttp.readyState==4)
  {
   // document.getElementById("resultado_ajax").innerHTML=xmlHttp.responseText;
   //alert("Kadu");
   alert(xmlHttp.responseText);
  }
 }
 xmlHttp.open("GET","tab_seletor_campos_ajax_resposta.php?p_conteudo="+escape(oiac_objeto)+'&id_dicionario='+id_dicionario+'&id='+id,true);
 xmlHttp.send(null);
}

segunda-feira, 19 de novembro de 2007

Ajax

Enviando uma requisição ao servidor

Para enviar uma requisição ao servidor utiliza-se o método open() e o método send().

O método open() requer três argumentos.

O primeiro argumento define qual método utilizar quando estiver enviando a requisição (GET ou POST).
O segundo argumento especifica a URL do script no servidor.
O terceiro argumento especifica que a requisição deve ser manipulada assincronamente.

O método send() envia a requisição para o servidor. Se assumir que os arquivos HTML e PHP estão na mesma pasta, o código pode ficar:

xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);

A função AJAX será executada quando o usuário digita algo no campo nome. O arquivo testeAjax.html agora fica parecido com o seguinte código:

<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Seu navegador não suporta AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","hora.php",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
Nome: <input type="text"
onkeyup="ajaxFunction();" name="nome" />
Hora: <input type="text" name="time" />
</form>
</body>
</html>

segunda-feira, 12 de novembro de 2007

Primeira Aplicação

Primeiro, será criado um formulário padrão HTML com dois campos: nome e hora. O campo nome será preenchido pelo usuário e o campo hora será preenchido utilizando-se AJAX. O arquivo HTML terá o nome “testeAjax.html”, e seu conteúdo será:


<html>
<body>
  <form name="myForm">
    Name: <input type="text" name="username" />
    Time: <input type="text" name="time" />
  </form>
</body>
</html>

Destaca-se que o formulário não possui o botão Submit.

Suporte AJAX do navegador

A chave do AJAX é o objeto XMLHttpRequest.

Navegadores diferentes utilizam métodos diferentes para criar o objeto XMLHttpRequest

Internet Explorer utiliza um ActiveXObject, enquanto que outros navegadores utilizam um objeto JavaScript chamado XMLHttpRequest.

Para criar este objeto e trabalhar com navegadores diferentes, será utilizado o comando “try and catch”.


<html>
<body>
<span >

<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
}
catch (e)
{
 // Internet Explorer
 try
 {
   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e)
 {
   try
   {
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   catch (e)
   {
     alert("Seu navegador não suporta AJAX!");
     return false;
   }
 }
}
}
>/script>
>form name="myForm">
Nome: <input name="nome">
Time: <input name="time">
>/form>
</body>
</html>

Primeiro cria-se uma variável xmlHttp para manter o objeto XMLHttpRequest. Então tenta-se criar o objeto com XMLHttp=new XMLHttpRequest(). Isto serve para os navegadores Firefox, Opera e Safári. Se falhar tenta-se com xmlHttp=new ActiveXObject("Msxml2.XMLHTTP") que serve para o Internet Explorer 6.0+, se também falhar, tentar xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") que serve para o Internet Explorer 5.5+.

Se nenhum dos três métodos funcionarem, o usuário possui um navegador muito desatualizado deverá ser avisado que não suporta AJAX.

A propriedade onreadystatechange

Depois de uma requisição para o servidor, precisa-se uma função que possa receber o dado que é retornado pelo servidor. A propriedade onreadystatechange armazena a função que processará a resposta do servidor. O código abaixo define uma função vazia e inicializa a propriedade onreadystatechange ao mesmo tempo.

xmlHttp.onreadystatechange=function()
{
// Deve-se escrever um código
}

A propriedade readyState

A propriedade readyState carrega a situação (status) da reposta do servidor (server’s reponse). Cada vez que muda o valor de readyState, a função onreadystatechange será executada.

Tabela de possíveis valores para a propriedade de onreadystatechange.

No exemplo abaixo, apresenta-se um teste (if) na função onreadystatechange para testar se a resposta esta completa, ou seja, que o dado foi recebido.

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
// Recebido dos dados do servidor.
}
}

A propriedade responseText
O dados enviado de volta do servidor pode ser recuperado com a propriedade responseText. No exemplo será colocado a hora no campo de entrada na propriedade responseText.

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}

Ajax - Introdução

AJAX é acrônimo de Asynchronous JavaScript And XML. É um tipo de programação que se tornou popular in 2005 pela Google (com Google Suggest). AJAX não é uma nova linguagem de programação, mas uma nova forma de utilizar os padrões existentes.

Com o AJAX se pode criar aplicações WEB melhores, mais rápidos e mais amigáveis. AJAX é baseado em JavaScript e requisições HTTP.

Com AJAX, o JavaScript se comunica diretamente com o servidor utilizando o objeto XMLHttpRequest do JavaScript. Com este objeto se pode trocar dados com um servidor WEB sem a necessidade de recarregar a página.

AJAX utiliza a transferência de dados assíncrona entre o navegador e o servidor WEB, permitindo que as páginas WEB façam pequenas requisições ao servidor WEB no lugar de uma página inteira. Esta tecnologia independe do servidor WEB.

AJAX é baseado nos seguintes padrões WEB: JavaScript, XML, HTML, CSS.

Em um código JavaScript tradicional, se se desejar receber qualquer informação do banco de dados ou um arquivo do servidor, ou enviar uma informação do usuário para um servidor, ter-se-á criar um formulário HTML e enviar por GET ou POST dados para o servidor. O usuário terá que clicar no botão SUBMIT para enviar e receber as informações, esperar que o servidor para responder e então uma nova página será carregada com os resultados.

Porque o servidor retorna uma nova página cada vez que o usuário submete uma entrada, as aplicações web são lentas e menos amigáveis.

Para uma aplicação tradicional, uma página pode fazer uma requisição para, e receber uma resposta do servidor WEB sem a necessidade de recarregar a página. O usuário ficará na mesma página e não notará que o script requisitou páginas, ou enviou dados para o servidor em background.

Objeto XMLHttpRequest

Utilizando o objeto XMLHttpRequest, o programador web pode atualizar uma página com dados do servidor sem necessidade de recarregar a página.

O Google em http://www.google.com/webhp?complete=1&hl=en fez com que AJAX se tornasse popular. Google Suggest esta utilizando objeto XMLHttpRequiest para criar uma interface web dinâmica, quando o usuário inicia digitando na caixa de pesquisa, um JavaScript envia as letras para o servidor e o servidor retorna uma lista de sugestões.

O objeto XMLHttpRequest é suportado por Internet Explorer 5 ou superior, Safári 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Nestscape 7.

Caderno de Anotações do Caio Nakashima