Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
e ae galera, meu 2 tutorial por aki /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/smile.gif&key=15294d64c22e9e9c4ae0bf82a62ec27d13f27d6ba7078a5f7982077798029364" alt="Imagem Postada" />
bom, vou ensinar aqui como se usar o Ajax em suas aplicacoes web.
pra comeco de historia, o Ajax na verdade, eh um treco do JavaScript, o qual permite puxar dados de arquivos, e permite tambem, enviar dados pra esses arquivos (nossos queridos GET e POST), pra fazer uma cosulta ao arquivo (parece o LoadVars do Flash)
quem quizer aprender mesmo isso, alem de conhecimento PHP, eh bom saber um Javascript legal, pois ele é o mais usado nesse caso
ao codigo!
precisamos primeiro inicializar o Ajax, seria muito facil, se todo mundo usasse o mesmo browser... mas como isso não é real, entao vamos criar uma funcao que retornao Ajax do browser em uso:
ajaxInit.js
function ajaxInit() { var req; try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch(ex) { try { req = new XMLHttpRequest(); } catch(exc) { alert("Esse browser não tem recursos para uso do Ajax"); req = null; } } } return req;}oque esse script faz é ir tentando carregar o Ajax até conseguir, usando try / catch agora ja temos a funcao de inicializacao (oia q legal!)
agora vamos criar um script PHP para ser usado nesse exemplo
obs: esse script poderia ser feito apenas em javascript, mas a intencao é apenas demonstrar o uso do Ajax
scriptAjax.php
PHP
[*]<?php
[*]$gmtDate = gmdate("D, d M Y H:i:s");[*]
[*]header("Expires: {$gmtDate} GMT");
[*]header("Last-Modified: {$gmtDate} GMT");
[*]header("Cache-Control: no-cache, must-revalidate");
[*]header("Pragma: no-cache");[*]
[*]//os readers acima serao explicados apos o script
[*]
[*]$n = $_GET["n"]; //pegar a variavei enviada
[*]
[*]//vamos multiplicar essa variavel por 50
[]$n = 50;
[*]
[*]echo $n; //agora vamos "retornar" o valor, para isso escrevemos ele
[*]
[*]?>
como vimos, o script recebe um numero, e multiplica ele por 50, e depois retorna o novo valor, para um uso pratico, poderiamos puxar dados no banco de dados e retornar, oq seria um uso real disso
os headers iniciais, em base querem dizer: "NAO USE O CACHE DO BROWSER!!!"
ou seja, sevem pra você n correr o risco de tentar baixar coisas do cache, oq seria inutil para uma linguagem server-side
agora vamos criar o script final, que usa nossos scripts pre-criados
calcula.php
<html><head><title> Uso do Ajax </title><script src="ajaxInit.js" language="javascript" type="text/javascript"></script><script>function calcula() { valIni = document.getElementById("valorIni").value; ajax = ajaxInit(); if(ajax) { ajax.open("GET", "scriptAjax.php?n=" + valIni, true); ajax.onreadystatechange = function() { if(ajax.readyState == 4) { if(ajax.status == 200) { document.getElementById("resultado").value = ajax.responseText; } else { alert(ajax.statusText); } } } ajax.send(null); }}</script></head><body><input type="text" id="valorIni"> * 50 = <input type="text" id="resultado" readonly="true"> <button type="button" onclick="calcula();">Calcular</button></body></html>bom, acho que deu pra entender neh galera, o script manda o valor de N por get, pelo proprio endereco (scriptAjax.php?n=xxx), pra completar, eu vo ensina abaixo como seria pra enviar esse mesmo dado por POST:
...ajax.open("POST", "scriptAjax.php", true);ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");...ajax.send("n=" + valIni);escrevi os ... pra dizer q a parte do codigo q falta, tanto por get como por post, na hora de enviar variaveis, você deve as separar por &, td numa string soh (mesmo no post, n pense q ele aceita varios argumentos pois é um só)
vo dexa a descricao dos objetos abaixo (peguei no PHPBrasil):
abort():
Pára a requisição atual.
getAllResponseHeaders():
Retorna todos os cabeçalhos (labels e valores) como uma string.
getResponseHeader("headerLabel"):
Retorna o valor de um único label do cabeçalho.
open("metodo", "URL"[, asyncFlag[, "userName"[, "password"]]]):
Define a página a ser aberta, o método (GET | POST), a URL, o marcador de "assíncrono", e, se a página requerer login, o nome de usuário e a senha.
send(content):
Envia a requisição, opcionalmente pode ser uma string ou até um objeto DOM.
setRequestHeader("label", "valor"):
Define um par label + valor para ser enviado com o cabeçalho da requisição atual.
E as propriedades:
onreadystatechange:
(!) Método a ser invocado quando o estado (definido em readyState) mudar. (!)
readyState:
Inteiro representando o estado da requisição:
0 = não inicializado
1 = carregando
2 = carregado
3 = modo interativo
4 = completado
responseText:
Versão em string dos dados retornados pela requisição.
responseXML:
Objeto DOM retornado pela requisição
status:
Código numérico do estado da requisição retornado pelo servidor. O conhecido 404 "Not Found" e o menos conhecido, mas mais importante 200 "Ok"
statusText:
A string que acompanha o código de estado acima ("Not Found", "Ok", etc)
flw galera!
Carregando comentários...