[Resolvido] XMLHttpRequest não funciona no Safari/Chrome

[GARC 0]

Pessoal o que pode estar errado com o meu código, o mesmo no Safari e Chrome não carrega o resultada na xmlhttp.responseText;, ou seja, el ao invés de mostrar na mesma página carrega em outra janela. No FF, IE e OP funciona.

 

 

 

var navegador = navigator.userAgent.toLowerCase(); //Cria e atribui à variável global 'navegador' (em caracteres minúsculos) o nome e a versão do navegador
var xmlhttp; //Cria uma variável global chamada 'xmlhttp'

//Função que inicia o objeto XMLHttpRequest
function objetoXML() {
	if (navegador.indexOf('msie') != -1) { //Internet Explorer
		var controle = (navegador.indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; //Operador ternário que adiciona o objeto padrão do seu navegador (caso for o IE) à variável 'controle'
		try {
			xmlhttp = new ActiveXObject(controle); //Inicia o objeto no IE
		} catch (e) { }
	} else { //Firefox, Safari, Mozilla
		xmlhttp = new XMLHttpRequest(); //Inicia o objeto no Firefox, Safari, Mozilla
		
	}
}

//Função que envia o formulário
function enviarForm(url, campos, destino) {
	var elemento = document.getElementById(destino); //Atribui à variável 'elemento' o elemento que irá receber a página postada
	objetoXML(); //Executa a função objetoXML()
	if (!xmlhttp) { //Se o objeto de 'xmlhttp' não estiver true
		elemento.innerHTML = 'Impossível iniciar o objeto XMLHttpRequest.'; //Insere no 'elemento' o texto atribuído
		return;
	} else { //Senão
		elemento.innerHTML = 'Carregando...'; //Insere no 'elemento' o texto atribuído
	}
 xmlhttp.onreadystatechange = function () {
		if (xmlhttp.readyState == 4 || xmlhttp.readyState == 0) { //Se a requisição estiver completada
			if (xmlhttp.status == 200) { //Se o status da requisição estiver OK
				elemento.innerHTML = xmlhttp.responseText; //Insere no 'elemento' a página postada
			} else { //Senão
				elemento.innerHMTL = 'Página não encontrada!'; //Insere no 'elemento' o texto atribuído
			}
		}
	}
	
	xmlhttp.open('POST', url+'?'+campos, true); //Abre a página que receberá os campos do formulário
	xmlhttp.send(campos); //Envia o formulário com dados da variável 'campos' (passado por parâmetro)
}

[William Bruno 1501]

para debug, execute o seguinte:

function enviarForm(url, campos, destino) {
        var elemento = document.getElementById(destino); 
        objetoXML(); //Executa a função objetoXML()
         
        alert( xmlhttp );

diga oque retornar nos navegadores que você diz que não está funcionando.

[GARC 0]

William, primeiramente obrigado.

 

Executei o teste no Safari e Chrome e não retorna nada. Apenas abre a respostas em uma nova página.

 

No FF e outros que estão funcionam deu [object XMLHttpRequest]

 

Agradeço

[William Bruno 1501]

não entendi essa parte:

Apenas abre a respostas em uma nova página.

 

teste assim:

function getHTTPObject(){
	if(window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else if(window.ActiveXObject){
		var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
		for(var i = 0; i < prefixes.length; i++){
			try{
				return new ActiveXObject(prefixes[i] + ".XMLHTTP");
			} catch (e) {}
		}
	}
}
function enviarForm(url, campos, destino) 
{
	alert( campos );
	var xmlHttp = getHTTPObject();
	var elemento = document.getElementById(destino);
	elemento.innerHTML = 'Carregando...';
	
	
	xmlHttp.open( 'POST', url, true );
	xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	xmlHttp.send( campos );
	
	xmlHttp.onreadystatechange = function() 
	{
		if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) 
			elemento.innerHTML = xmlHttp.status == 200 ? xmlHttp.responseText : 'Página não encontrada!';
	}
}

exemplo de envio:

http://forum.imasters.com.br/index.php?/topic/393224-fazer-tudo-na-div-idconteudo/

 

como você está formando a variavel campos ?

[GARC 0]

Vamos lá.

 

Eu tenho uma página "Itens.php" que contem um form com um campo de nome 'cep' e o botão para verificar o mesmo.

 

Esse form carrega o arquivo em questão que carrega o VerificaAreaCep.php e lá retorna na div.

 

No FF, Opera e IE quando eu clico no botão ele aparece Carregando... e logo depois retorna com a resposta que vem do arquivo, sem alterar de página tudo ali mesmo, ou seja, o ajax funcionando perfeitamente.

 

No Chrome e no Safari quando clico no botão, ao invés de carregar e printar o resultado na div ele abre a página VerificaAreaCEP.php no navegador, ou seja, não funciona o ajax.

 

No último exemplo que você enviou, o alert dá cep=21721600.

 

o "campos", ele pega todos os campos do formulario e usa o seu propio 'name'.

 

Agradeço...

[William Bruno 1501]

Com o código que postei, continuou funcionando normalmente ?

 

No Chrome e no Safari quando clico no botão, ao invés de carregar e printar o resultado na div ele abre a página VerificaAreaCEP.php no navegador, ou seja, não funciona o ajax.

 

hum... não me parece que seja 'bem isso'.

Mostre o html do botão, e como você chama a função.

[GARC 0]

Respondendo

 

1) Com os códigos que você postou funcionaram perfeitamente.

 

Segue o html

<form action="VerificaAreaCEP.php" method="post" onSubmit="setarCampos(); enviarForm('VerificaAreaCEP.php', campos, 'divResultado'); return false;" >
<input type="text" name="cep" id="cep" class="form-cadastro-usuario-cep" maxlength="8"/> 
<input type="submit" value="Verificar" class="form-cadastro-botao-buscacep">

<div id="divResultado" class="texto-topo-login" align="center"></div>

Agradeço...

[GARC 0]

William, você chegou a entender o que acontece?

 

Abs

[William Bruno 1501]

entendi sim, na verdade o return false; não entrou em ação... por isso a página era chamada 'sem ajax'.

 

mas não está okay agora ?

se não estiver, chame a funçao setaCampos() dentro da enviarForm(); e faça a enviarForm() returnar false;

[GARC 0]

entendi sim, na verdade o return false; não entrou em ação... por isso a página era chamada 'sem ajax'.

 

mas não está okay agora ?

se não estiver, chame a funçao setaCampos() dentro da enviarForm(); e faça a enviarForm() returnar false;

 

 

 

William, quando falei que funcionou foi que continuou a funcionar no IE, FF e Opera com o seu código, mas no Safari e crhome continua do mesmo jeito.

 

Como alterar o que você informou? Ou outra solução? Sou meio leigo nisso. Sorry. rs

 

Grande abraço,

 

George

[William Bruno 1501]

<form action="VerificaAreaCEP.php" method="post" onsubmit="return enviarForm('VerificaAreaCEP.php', 'divResultado');" >

ai:

function enviarForm(url, destino) 
{
        setCampos();
        var xmlHttp = getHTTPObject();
        alert( campos );
        alert( xmlHttp );
        var elemento = document.getElementById(destino);
        elemento.innerHTML = 'Carregando...';
        
        
        xmlHttp.open( 'POST', url, true );
        xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xmlHttp.send( campos );
        
        xmlHttp.onreadystatechange = function() 
        {
                if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) 
                        elemento.innerHTML = xmlHttp.status == 200 ? xmlHttp.responseText : 'Página não encontrada!';
        }
        return false;
}

e ai, veja se os alerts continuam retornando oq era esperado.

[GARC 0]

William, com essa alteração os alerts não retornaram nada e o FF, IE, Opera passou a dar o mesmo problema que o Chrome/Opera.

 

Aguardo,

[Evandro Oliveira 331]

Poste a função setarCampos

[GARC 0]

Poste a função setarCampos

 

<script>
	function setarCampos() {
		campos = "cep="+encodeURI(document.getElementById('cep').value);
	}
</script>

[William Bruno 1501]

faz o seguinte:

function setarCampos() {
        return "cep="+encodeURI(document.getElementById('cep').value);
}

e então:

function enviarForm(url, destino) 
{
      var campos = setCampos();

[Evandro Oliveira 331]

GARC, como você está enviando os dados via POST, não há necessidade de tratar ou filtrá-los.

 

Verifique na Developer tools(ctrl + shift + i) se não há erro de compilação Javascript.