<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;
}
}
Nenhum comentário:
Postar um comentário