Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

alexandremanowar

ajax & javascript

Por , em Javascript

Recommended Posts

alexandremanowar    0

alexandremanowar
Postado

E a e pessoal beleza

 

Estou iniciando os meus estudos em ajax e tem um exemplo aqui no meu livro que tem a seguinte função:

//criar uma variável booleana para verificar  uma instancia válida do IE.
var xmlhttp = false;

//verifica se estamos usando IE
try
{
	//Se a versão do javascript for maior que 5
	xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
	//se não usar activex mais antigo
	try
	{
		//se estivermos usando IE
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	catch (E)
	{
		//outro topo de navegador
		xmlhttp = false;
	}
	
}

//se estivermos usando um navegador diferente de IE, criar um instancia javascript do objeto
if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
	xmlhttp = new XMLHttpRequest();
}

//uma variavel usada para distinguir se deve abrir ou fechar o calendário

var showCalendar = true;

function showHideCalendar()
{
	var objID = "calendar";

	//mudar imagem atual do sinal de - ou de +

	if(showCalendar == true)
	{
		//mostra o calendário
		document.getElementById("opencloseimg").src = "images/mins.gif";
		//a página esta carregando
		var serverPage = "calendar.php";
		//ajusta a variavel do tracker abrir fechar
		showCalendar = false;

		var obj = document.getElementById(objID);
		xmlhttp.open("GET", serverPage);
		xmlhttp.onreadystatechange = function()
		{
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
			{
				obj.innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.send(null);

	}
	else
	{
		//ocultar calendário
		document.getElementById("opencloseimg").src = "images/plus.gif";
		showCalendar = true;
		document.getElementById(objID).innerHTML = "";
	}

}

Eu estou entendo esse código numa boa só estou me complicando um pouco nessa parte:

 

var obj = document.getElementById(objID);
		xmlhttp.open("GET", serverPage);
		xmlhttp.onreadystatechange = function()
		{
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
			{
				obj.innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.send(null);

Alguém poderia me explicar essa parte?

Caso seja necessário vou portar o html:

<!-- sample3_1 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Sample3_1</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="functions.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div id="createtask" class="formclass"></div>
	<div id="autocompletediv" class="autocomp"></div>
	<div id="taskBox" class="taskboxclass"></div>
	
	<p>
		<a href="java script://" onclick="showHideCalendar()"><img id="opencloseimg" src="images/plus.gif" alt="" title="" style="border: none; width: 9px; height: 9px;" /></a>

		<a href="java script://" onclick="showHideCalendar()">My Calendar</a>
	</p>

	<div id="calendar" style="width: 105px; text-align: left;"></div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

DSerma    19

DSerma
Postado 

var obj = document.getElementById(objID);
		xmlhttp.open("GET", serverPage);
		xmlhttp.onreadystatechange = function()
		{
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
			{
				obj.innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.send(null);

Esta parte faz o envio da requisição AJAX ( xmlhttp.open("GET", serverPage ) e depois coloca o resultado da requisiçao dentro da DIV ou do ELEMENTO indicado em "obj"..

 

Abraços...

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexandremanowar    0

alexandremanowar
Postado

E ae beleza!

 

Cara valeu pela dica! Essa parte entendi:

var obj = document.getElementById(objID);
		xmlhttp.open("GET", serverPage);

Mas essa ainda não:

xmlhttp.onreadystatechange = function()
		{
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
			{
				obj.innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.send(null);

Essa ainda estou meio perdido

Compartilhar este post

Link para o post
Compartilhar em outros sites

DSerma    19

DSerma
Postado 

xmlhttp.onreadystatechange = function()
		{
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
			{
				obj.innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.send(null);

Resumindo esta parte:

 

xmlhttp.onreadystatechange = function()

Quando o "estado" da requisição for alterado, faça a função seguinte.

 

{
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
			{
				obj.innerHTML = xmlhttp.responseText;
			}
		}

Se o "estado" da requisição for = a 4 ( pronto ) e o "status" da mesma for = a 200 ( sem problemas ) então mostre o resultado da página carregada na requisição dentro do objeto indicado (obj.innerHTML).

 

 

Abraços...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito