Entrar
Cadastre-se
Ajuda
Responder
Aí, galerinha.
Eu sei que, assim como eu, bilhões e bilhões de pessoas estão usufruindo da função que o Micox fez pra usar ajax. Realmente ela é muito simples, e serve em quase todas as ocasiões. Infelizmente não conseguíamos usá-la com o método POST, mas a alteração é muito simples e nós mesmos podemos fazê-la sem a ajuda dos nossos pais. Então, sem enrolar muito, vamos às alterações.
Primeiramente eu criei uma função auxiliar chamada camposForm(nome_form). Essa função é chamada pela minha (ou nossa) função ajaxPost, que é a irmãzinha da ajaxGet, do Micox.
camposForm() recebe o nome de um formulário qualquer da página e retorna um valor assim var1=valor1&var2=valor2. O formato precisa ser assim, pois ajaxPost vai precisar dela.
function camposForm(nomeForm)
{
/**************************************************
* Autor: José Cláudio Medeiros de Lima
* Data: 17/12/2007
* Objetivos: Pega todos os campos de um formulário, seus valores
e junta tudo em um formato de querystring,
por exemplo: var1=valor1var2=valor2
* Parâmetros: nomeForm - O nome do formulário qualquer.
**************************************************/
var buff = [];
var contador = 0; //viabiliza a contagem de laços do for,
//pois sem ele dá "undefined" nos checkboxes
//ou radiobuttons que não estão marcados
for (i=0;i<nomeForm.length;i++)
{
campo = nomeForm.elements[i];
if(campo.type=="checkbox" || campo.type=="radio")
{
if(campo.checked)
{
buff[contador] = campo.name + "=" + campo.value;
contador ++; //incrementa 1 ao contador
}
}
else
{
buff[contador] = nomeForm.elements[i].name + "=" + nomeForm.elements[i].value;
contador++;
}
}
return buff.join("&");
}Agora que já criamos essa função, vamos às alterações na função principal.
É bom deixar claro que a função é IDÊNTICA à original. Idêntica mesmo. Eu não retirei nada dela, nem as funções que não servem pra ela. Tá tudo lá. Eu só alterei algumas coisas pra funcionar com POST.
As alterações que fiz estão em vermelho
function ajaxPost(nome_form,elemento_retorno,exibe_carregando){
/******
* ajaxPost - Coloca o retorno de uma url em um elemento qualquer
* Use a vontade mas deixe os créditos. Dúvidas, me mande um email.
* Versão: 2.0 - 17/12/2007
* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br
* Modificada por: José Cláudio Medeiros de Lima - klawdyo@gmail.com
* Parametros:
* nome_form: string; elemento_retorno: object||string; exibe_carregando:boolean
* - Informe o nome do formulário no primeiro parâmetro. A função chama a camposForm(), e pega todos os campos do formulário e os seus respectivos valores e envia tudo pelo método POST para o valor definido no "action" do formulário.
Exemplo de uso:
<form action="?teste" id="formulario" name="formulario"
onsubmit="ajaxPost(this,'nome_elemento_retorno',true ou false)">
* - Se elemento_retorno for um elemento html (inclusive inputs e selects),
* exibe o retorno no innerHTML / value / options do elemento
* - Se elemento_retorno for o nome de uma variavel
* (o nome da variável deve ser declarado por string, pois será feito um eval)
* a função irá atribuir o retorno à variável ao receber a url.
*******/
var ajax1 = pegaAjax();
if(ajax1){
var url = nome_form.action;
var parameters = camposForm(nome_form);
url = antiCacheRand(url);
ajax1.onreadystatechange = ajaxOnReady
ajax1.open("POST", url ,true);
ajax1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax1.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");
ajax1.setRequestHeader("Cache-Control", "no-cache");
ajax1.setRequestHeader("Pragma", "no-cache");
if(exibe_carregando){ put("Carregando ...") }
ajax1.send(parameters)
return true;
}else{
return false;
}
function ajaxOnReady(){
if (ajax1.readyState==4){
if(ajax1.status == 200){
var texto=ajax1.responseText;
if(texto.indexOf(" ")<0) texto=texto.replace(/\+/g," ");
//texto=unescape(texto); //descomente esta linha se tiver usado o urlencode no php ou asp
put(texto);
extraiScript(texto);
}else{
if(exibe_carregando){put("Falha no carregamento. " + httpStatus(ajax1.status));}
}
ajax1 = null
}else if(exibe_carregando){//para mudar o status de cada carregando
put("Carregando ..." )
}
}
function put(valor){ //coloca o valor na variavel/elemento de retorno
if((typeof(elemento_retorno)).toLowerCase()=="string"){ //se for o nome da string
if(valor!="Falha no carregamento"){
eval(elemento_retorno + '= unescape("' + escape(valor) + '")')
}
}else if(elemento_retorno.tagName.toLowerCase()=="input"){
valor = escape(valor).replace(/\%0D\%0A/g,"")
elemento_retorno.value = unescape(valor);
}else if(elemento_retorno.tagName.toLowerCase()=="select"){
select_innerHTML(elemento_retorno,valor)
}else if(elemento_retorno.tagName){
elemento_retorno.innerHTML = valor;
//alert(elemento_retorno.innerHTML)
}
}
function pegaAjax(){ //instancia um novo xmlhttprequest
//baseado na getXMLHttpObj que possui muitas cópias na net e eu nao sei quem é o autor original
if(typeof(XMLHttpRequest)!='undefined'){return new XMLHttpRequest();}
var axO=['Microsoft.XMLHTTP','Msxml2.XMLHTTP','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0'];
for(var i=0;i<axO.length;i++){ try{ return new ActiveXObject(axO[i]);}catch(e){} }
return null;
}
function httpStatus(stat){ //retorna o texto do erro http
switch(stat){
case 0: return "Erro desconhecido de javascript";
case 400: return "400: Solicitação incompreensível"; break;
case 403: case 404: return "404: Não foi encontrada a URL solicitada"; break;
case 405: return "405: O servidor não suporta o método solicitado"; break;
case 500: return "500: Erro desconhecido de natureza do servidor"; break;
case 503: return "503: Capacidade máxima do servidor alcançada"; break;
default: return "Erro " + stat + ". Mais informações em [url="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html";"]http://www.w3.org/Protocols/rfc2616/rfc261...c10.html";[/url] break;
}
}
function antiCacheRand(aurl){
var dt = new Date();
if(aurl.indexOf("?")>=0){// já tem parametros
return aurl + "&" + encodeURI(Math.random() + "_" + dt.getTime());
}else{ return aurl + "?" + encodeURI(Math.random() + "_" + dt.getTime());}
}
}
function select_innerHTML(objeto,innerHTML){
/******
* select_innerHTML - altera o innerHTML de um select independente se é FF ou IE
* Corrige o problema de não ser possível usar o innerHTML no IE corretamente
* Veja o problema em: [url="http://support.microsoft.com/default.aspx?...kb;en-us;276228"]http://support.microsoft.com/default.aspx?...kb;en-us;276228[/url]
* Use a vontade mas coloque meu nome nos créditos. Dúvidas, me mande um email.
* Versão: 1.0 - 06/04/2006
* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br
* Parametros:
* objeto(tipo object): o select a ser alterado
* innerHTML(tipo string): o novo valor do innerHTML
*******/
objeto.innerHTML = ""
var selTemp = document.createElement("micoxselect")
var opt;
selTemp.id="micoxselect1"
document.body.appendChild(selTemp)
selTemp = document.getElementById("micoxselect1")
selTemp.style.display="none"
if(innerHTML.toLowerCase().indexOf("<option")<0){//se não é option eu converto
innerHTML = "<option>" + innerHTML + "</option>"
}
innerHTML = innerHTML.replace(/<option/g,"<span").replace(/<\/option/g,"</span")
selTemp.innerHTML = innerHTML
for(var i=0;i<selTemp.childNodes.length;i++){
if(selTemp.childNodes[i].tagName){
opt = document.createElement("OPTION")
for(var j=0;j<selTemp.childNodes[i].attributes.length;j++){
opt.setAttributeNode(selTemp.childNodes[i].attributes[j].cloneNode(true))
}
opt.value = selTemp.childNodes[i].getAttribute("value")
opt.text = selTemp.childNodes[i].innerHTML
if(document.all){ //IEca
objeto.add(opt)
}else{
objeto.appendChild(opt)
}
}
}
document.body.removeChild(selTemp)
selTemp = null
}
function extraiScript(texto){
//Maravilhosa função feita pelo SkyWalker.TO do imasters/forum
//http://-- link para outro fórum não permitido --.com.br/index.php?showtopic=165277&
// inicializa o inicio ><
var ini = 0;
// loop enquanto achar um script
while (ini!=-1){
// procura uma tag de script
ini = texto.indexOf('<script', ini);
// se encontrar
if (ini >=0){
// define o inicio para depois do fechamento dessa tag
ini = texto.indexOf('>', ini) + 1;
// procura o final do script
var fim = texto.indexOf('</script>', ini);
// extrai apenas o script
codigo = texto.substring(ini,fim);
// executa o script
//eval(codigo);
/**********************
* Alterado por Micox - micoxjcg@yahoo.com.br
* Alterei pois com o eval não executava funções.
***********************/
novo = document.createElement("script")
novo.text = codigo;
document.body.appendChild(novo);
}
}
}O arquivo completo com essa função você encontra em http://www.esnips.com/web/Klawdyo
Té mais, galera e bom uso dela. Aqui não deu problema. Testado em ie6 e ff2.
Valeu
Quote
