Ir para conteúdo

POWERED BY:

Arquivado

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

Ted k'

Curso de ASP e AJAX

Por , em ASP Clássico

Recommended Posts

Ted k'    126

Ted k'
Postado

Curso de ASP e AJAX

 

Desenvolvido por: DarkDemo

 

 

===============================================

1ª - Introdução ao ASP e AJAX

+ O que é AJAX?

+ O que é ASP?

 

2ª - Módulo II

===============================================

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ted k'    126

Ted k'
Postado

[anchor=ASP1]1) O que é AJAX ?[/anchor]

 

A tecnologia AJAX é basicamente um JavaScript, só que "melhorado".

 

A diferença entre os dois é que enquanto o JavaScript é Client - Side, o AJAX fax a intermediação entre o Browser do Cliente e as requisições feitas ao Servidor.

 

Ao contrário do que todo mundo pensa, o AJAX não é uma coisa nova no mercado, ele é praticamente tão antigo quanto o JavaScript, porém, o seu "boom" ocorreu a mais ou menos 2 anos atrás.

 

Resumindo, AJAX é uma ponte de ligação rápida e ágil entre o Cliente e o Servidor, fazendo assim com que seus sites e aplicações web fiquem cada vez mais rápidos e "parecidos" com aplicações desktop.

 

2) ONDE, QUANDO e POR QUE utilizar AJAX ?

 

Uma pergunta muito frequente hoje em dia no mundo da programação web é: "Faço o site em AJAX ou em Flash?".

 

Esqueça essa pergunta. A pergunta correta é: "ONDE eu posso utilizar o AJAX?".

 

O AJAX é legal ? Sim. É prático? Sim. É Bonito ? Sim. Porém, NÃO deve ser utilizado sem moderação, e eu vou explicar o por que.

 

Se você abusar do uso de AJAX em suas aplicações web, poderá se arrepender posteriormente, e eu não estou brincando.

 

Ai você pergunta: "Mas Dark, por que ???? ".

 

E o Dark responde:

 

- Se você utilizar AJAX para chamar suas páginas em todos os links da sua aplicação, ela ficará mais rápida, porém o Google não irá encontrar nada em seu site.

 

- Fazendo o uso acima citado, as pessoas não poderão adicionar seu site nos favoritos, pois páginas carregadas com AJAX não ficam armazenadas no histórico, logo o "Favoritos" não funciona, muito menos os botões "Voltar" e "Avançar" dos navegadores.

 

- Páginas carregadas por AJAX, NÃO POSSUEM O EVENTO "OnLoad". Assim como também não executam funções JavaScript e códigos CSS.

 

Ou seja, do que adianta ter uma aplicação web rápida e com um visual de "Web 2.0", se o Google não consegue indexar o mesmo ???

 

É por isso que o uso do AJAX deve ser moderado.

 

O Dark aki recomenda o uso para chamar páginas que façam consultas SQL, que façam algum tipo de processamento demorado, ou até mesmo utilizando o "FileSystemObject", pois esses processos geralmente são "cansativos" para o usuário.

 

Resumindo: o AJAX deve ser utilizado APENAS onde for realmente necessário o aumento de performance da aplicação.

 

3) Exemplo simples de AJAX.

 

Bom, já sabemos o que é o AJAX, já vimos quando e onde devemos utilizá-lo, mas até agora não vimos o dito cujo em ação, e você deve estar xingando o pobre Dark aki até agora...

 

Calma meus caros, vamos agora ver um exemplo simples do nosso bom amigo AJAX funcionando:

 

- Criaremos uma página com um botão que, ao ser clicado, colocará o conteúdo de outra página dentro de uma DIV.

 

Página principal (Main.asp):

<script src="ajax.js">
</script>
<input type="button" id = "botao" value = "Click Me!" onclick="Carrega('Body.asp');" />
<br />
<div id = "conteudo">
</div>

 

Página que será carregada (Body.asp):

<body>
<span>
Este é meu primeiro contato com AJAX! =)
</span>
</body>

O arquivo .JS que contém o nosso AJAX (ajax.js):

 

var url;
var xmlHttp=null;
function Carrega(str)
{ 
xmlHttp=GetXmlHttpObject();
url=str;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
return url;
}


function stateChanged() 
{ 
if (xmlHttp.readyState==4 && xmlHttp.status == 200)
{ 
var resultado = document.getElementById("conteudo").innerHTML=xmlHttp.responseText;
}
}


function GetXmlHttpObject()
{
 if (window.XMLHttpRequest) {   
		   a=new XMLHttpRequest(); } 
	   else {  
		 try {   
			a=new ActiveXObject("Msxml2.XMLHTTP");  
		 }	 
		 catch(e) {  
		   try {   
			  a=new ActiveXObject("Microsoft.XMLHTTP"); 
		   }	 
		   catch(e) { 
			  a=false;   
		   }  
		 }  
	   }   
	   return a;  
	 }

 

O exemplo acima é muito básico e simples, mas se você conseguir entender a sua estrutura, já começará a ver que o AJAX não é nenhum bicho de 7 cabeças....

 

O AJAX não faz nama mais além de ler o conteúdo da página requisitada na função "Carregar()" e jogá-la dentro da DIV "Conteudo".

 

Mas poxa Dark, o AJAX só faz isso, ler uma página e jogá-la em algum lugar ???

 

SIM. o AJAX serve pra isso, ler o conteúdo de uma requisição feita ao servidor (página) e jogar o que ele leu em qualquer lugar.

 

Qualquer dúvida sobre o exemplo, basta perguntar.

 

 

[anchor=ASP2]4) O que é ASP ?[/anchor]

 

Active Server Pages é uma tecnologia criada pela Micro$soft para realizar a interação entre aplicações web e bancos de dados.

 

O ASP atualmente é considerada uma linguagem "morta" por muitos por ai, pois com a chegada da plataforma Dot Net e a falta de atualização, as pessoas começaram a olhar meio torto para ele.

 

Mas todos nós sabemos que o ASP ainda é MUITO utilizado hoje em dia, eu mesmo sou um fã fervoroso dele, e não largarei dele tão cedo.

 

Bom, mas o que o ASP faz Dark ???

 

O ASP, assim como o PHP, faz a ligação entre sua aplicação web ou site, com Bancos de Dados, como o Access, SQL Server, MySql, entre outros. Além disso ele também executa outras funções em Server-Side, como FileSystemObject, que é o responsável pela manipulação de arquivos e pastas, realiza o envio de e-mails, upload de arquivos.... ou seja, faz um monte de coisas que as linguagens Server-Sides devem fazer: Executar operações e processos que só podem ser feitas através de um servidor.

 

 

5) Preparando o Ambiente para rodar páginas ASP

 

Para podermos fazer nossas páginas ASP rodarem como queremos, devemos "preparar" o ambiente para ele.

 

Para isso, precisamos apenas instalar um "Servidor" Web em nossa máquina que suporte esta tecnologia.

 

Como o ASP é nativop da Micro$oft, o próprio Windows possui este "Servidor". No win98 é o PWS (Personal Web Server) e do Win2000 pra cim aé o IIS (Internet Information Server).

 

Para instalar ambos, basta ir até o Painel de Controle, na parte de "Adicionar ou Remover Programas", Componentes do Windows e marcar a opção do servidor. Depois é só colocar o CD do Windows e pronto, o server está instalado.

 

Neste curso sempre irei me referiri ao IIS, visto que o Win98 quase já não é mais utilizado.

 

Após a instalação do IIS, você perceberá que no C: da sua máquina uma pasta chamada "inetpub" será criada, dentro dela existirá, entre outras, a pasta "wwwroot", que é a "raiz" do seu Web Server. É nesta pasta que as páginas ASP devem ficar armazenadas.

 

Para trabalharmos com banco de dados neste curso, iremos utilizar o MS Access, então é só instalá-lo em sua máquina normalmente.

 

Feito os passo sa seguir, podemos ver agora um exemplo simples de ASP.

 

 

6) Exemplo simples de ASP

 

Pagina.asp

<%
Response.Write("Olá Mundo! <br>")
Response.Write("Hoje é " & Date() & " e essa é minha primeira página em asp! =)")
%>

Este exemplo irá mostrar uma mensagem de "Olá Mundo" junto com a Data Atual na tela do Browser, tudo isso via ASP.

 

Notem que os comandos ASP fica entre as Tags "<% %>", que indicam o início e o fim do bloco de comandos ASP.

 

 

Bom pessoas, acho que por hoje é só.

Neste capítulo vimos o que é o AJAX e como utilizá-lo, assim como o ASP. Como disse, é apenas o início de nosso curso, então não se desanime e nem fique pensando "Putz Dark. esperei tanto pra isso ??? Vai.... " calma, é apenas a introdução, na semana que vem já começaremos a entrar de cabeça nesse novo mundo que se abrirá.

 

 

Abraços a todos.

DarkDemo.

 

 

Clique aqui para as principais dúvidas do assunto:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ted k'    126

Ted k'
Postado

Curso AJAX + ASP - Módulo II:

 

Iniciando o projeto: Inserção de dados no BD.

 

 

Bom galera.. primeiramente peço desculpas pelo atraso do segundo módulo, mas vou tentar "tirar o atraso"....

 

O primeiro módulo foi apenas uma introdução ao AJAX e ao ASP, para quem não conhecia ou conhecia um pouco...

A partir de agora vamos colocar os neurônios pra funcionar e começar a matar esse bicho de 7964634654 cabeças chamado AJAX !

 

 

Bom.. vamos lá...

 

1) Iniciando o projeto: Parte administrativa:

 

Primeiramente, devemos criar o nosso BD.

 

Para "ilustrar" esse nosso curso, escolhi criar um cadastro de produtos para fugir um pouco da mesmisse de sempre, o cadastro

 

de clientes...

 

Bom, para isso, devemos abrir o access, e criar uma nova tabela no modo estrutura.

 

Segue abaixo a estrutura da nossa tabela:

 

Nome: Tbl_Produto;

 

Nome Tipo Tamanho/OBS.

 

ID AutoNumeração/Numeração Automática Chave primária;

Código Número 13

Descrição Texto 50

Unidade texto 2

Preco Moeda/Unidade Monetária 15

Pronto, feito isso, salve sua tabela co mo nome proposto......

 

Depois disso, vamos à melhor parte (pelo menos para mim).. a programação... \o/

 

 

2)Inserção de dados no BD.

Como design não é meu forte, não liguem para meus layoyts toscos... heeheheh

 

Vamos criar um "mini menu" e uma parte administrativa bem objetiva e de fácil acesso aos usuários...

 

Vamos lá!!!!!

 

Página: Adm.asp ( é a principal )

 

<script src = "ajaxProd.js"></script>
<style>

#tabela table thead tr
{
font: 80% Arial, Helvetica, sans-serif;
color:#990000;
text-align:center;
background: #F2F2F2;
font-weight:bold;
}
#tabela table tbody tr:hover
{
background:#F2F2F2;
color:#000;
}
#tabela table tbody tr
{
font:70% Arial, Helvetica, sans-serif;
color:#0050A4;
text-align:left;
font-weight:bold;
background:#FFF;
padding:5px;
}
fieldset
{
border:2px dotted #C3C3C3;
background:#FFFFEE;
}

legend
{
color: #000;
}

.buttons
{
font:100% Arial, Helvetica, sans-serif;
color:#0050A4;
text-align:left;
font-weight:bold;
background:#FFF;
padding:5px;
background:transparent;
border:0;
display:none;
}

.edita
{
display: block;
}

#tabela table 
{
background: #3399FF;
width:100%;
}
#titulo
{
font: 70% Arial, Helvetica, sans-serif;
color: #CC0000;
font-weight:bold;
}
#tabela
{
margin-top:20px;
cursor: text;
}
.exc
{
text-align:center;
}

#menu a:link
{
font:80% Arial, Helvetica, sans-serif;
font-weight: bold;
text-align:center;
text-decoration:none;
color: #0050A4;
}
#menu 
{
font: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align:center;
text-decoration:none;
color: #0050A4;
}
#menu a:visited
{
font:80% Arial, Helvetica, sans-serif;
font-weight: bold;
text-align:center;
text-decoration:none;
color: #0050A4;
}
#menu a:hover
{
font:80% Arial, Helvetica, sans-serif;
font-weight: bold;
text-align:center;
text-decoration: underline;
color: #0050A4;
}
#cadastro
{
font:70% Verdana;
font-weight:bold;
text-align:center;
color:#990000;

}
#cadastro input,select
{
font:90% Arial, Helvetica, sans-serif;
font-weight:bold;
background: #F2F2F2;
margin-right:10px;
color:#0050A4;
}

#overlay
{
position:absolute;
width:100px;
height:50px;
border:1px dotted;
top:40%;
left:45%;
background: #FFFFCC;
z-index:10;
text-align:center;
font:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

</style>

<div id = "menu">
|
<a href = "#2" onclick="showPag('Produto.asp')"> Produtos </a>
|
</div>
<hr>
<div id = "conteudo">
</div>

Notem que essa página contém TODO o CSS que utilizaremos em nosso sistema, pois como mencionei na aula passada, o AJAX não

 

carrega o CSS, então o mesmo deve estar na página "Pai"...

 

Vamos agora à página que irá fazer a Interface com o usuário.

 

 

Produto.asp:

 

<%
Response.AddHeader "Content-Type", "text/html; charset=iso-8859-1"
%>
<div id = "cadastro">
<fieldset>
<legend> Cadastro de Produtos</legend>
<span> Código: </span>
<input id = "codigo" size = "15" />

<span> Descrição: </span>
<input id = "descricao" size = "30" >

<span> Unidade: </span>
<input id = "unidade" size = "2" /> 

<span> Preço: </span>
<input id = "preco" size = "10" /> 

<input type="button" value = "Gravar" onClick="gravaProd()">
</fieldset>
</div>
<center>
<div id = "tabela">
<!--Usaremos este espaço mais tarde para ouxar os dados -->
</div>
</center>

Nesta página nós criamos a interface para o usuário realizar a inserção dos dados e, posteriormente, realizar a manipulação

 

dos mesmos...

 

Agora vamos ver a página que realizará a inserção dos dados no BD..

 

GravaProd.asp:

 

<%
'Aki nós pegamos os valores passados pelo AJAX

Codigo = Request.QueryString("C")
Descricao = Request.QueryString("D")
Unidade = Request.QueryString("U")
Preco = Request.QueryString("P")

'Criamos a conexão com o BD
Set Conex = Server.CreateObject("ADODB.Connection")
Conex.Open "Driver={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("Bd/Ajax.mdb")

'Iniciamos a instrução SQL para inserção de dados no BD
SQL = "INSERT INTO Tbl_Produto ( Codigo, Descricao, Unidade, Preco) VALUES ( '" & Codigo & "', '" & Descricao & "', '" & 

Unidade & "', '" & Preco & "')"

'Mandamos executar a instrução SQL
Set Rs = Conex.Execute(Sql)

'Se tudo correr bem, ele irá mostrar essa mensagem na tela
Response.Write("Produto " & Descricao & " gravado com sucesso!")

%>

Para quem já conhece o ASP, isso não tem segredo algum. Para quem nunca viu na vida, basta analisar os meus comentários para

 

entender, se mesmo assim não entender, basta perguntar depois que a galera responderá...

 

Bom, agora falta a parte principal, o cara responsável em pegar os dados do formulário e mandar a página gravar no BD... o

 

nosso amigo AJAX!

 

 

Ai vai ele...

 

ajaxProd.js:

 

// Essa é a função que carrega a página quando o menu da página inicial é acionado
function showPag(str)
{ 
xmlHttp=GetXmlHttpObject();
url=str;
url = url + "?=" + Math.random();
xmlHttp.onreadystatechange=stateChangedProd;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
if (xmlHttp.readyState == 1) { 
document.getElementById("conteudo").innerHTML="Aguarde... Carregando....";
}
return url;
}


function stateChangedProd() 
{ 
if (xmlHttp.readyState==4)
{ 
var resultado = document.getElementById("conteudo").innerHTML=xmlHttp.responseText;
}
}


// Aki é a função que envia os dados para a página que faz o cadastro no BD

function gravaProd()
{
	xmlHttp=GetXmlHttpObject();
	url="GravaProd.asp";
	
	// aki eu crio uma variavel randomica para evitar a cache
	url = url + "?sid=" + Math.random();

	// aki eu pego o conteudo dos campos do nosso formulário através do DOM e coloco eles dentro da variavel "url", que é 

quem passará os valores via QueryString
	url = url + "&C=" + document.getElementById("codigo").value;
	url = url + "&D=" + document.getElementById("descricao").value;
	url = url + "&U=" + document.getElementById("unidade").value;	
	url = url + "&P=" + document.getElementById("preco").value;

	// Aki mando ele puxar a função "salvouProd()" quando a requisição estiver completa, ou seja, quando ele gravar os 

dados
	xmlHttp.onreadystatechange=salvouProd;
	
	// aki fazemos o envio da variavel "url" com todos os valores, utilizando o método GET
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);

	// Nesta parte, colocamos uma mensagem de "aguarde" ao usuário enquanto a requisição é feita
	if (xmlHttp.readyState == 1) { 
	document.getElementById("tabela").innerHTML="Aguarde... Gravando dados...";
}
}


// aki é a função que irá ver se a rtequisição está pronta
function salvouProd() 
{ 

// aki verificamos o estado da requisição. O estado 4 significa "pronto"
if (xmlHttp.readyState==4)
{ 

// aki, coloco a resposta da requisição dentro da div com o id "tabela"
document.getElementById("tabela").innerHTML=xmlHttp.responseText;

// aki limpamos o conteúdo dos campos do nosso form qpós a inserção
document.getElementById("codigo").value = "";
document.getElementById("descricao").value = "";
document.getElementById("unidade").value = "";
document.getElementById("preco").value = "";
}
}


// aki é criado o objeto XmlHttp request, que é o AJAX em si
function GetXmlHttpObject()
{
 if (window.XMLHttpRequest) {   
		   a=new XMLHttpRequest(); } //Objeto nativo (FF/Safari/Opera7.6+)  
	   else {  
		 try {   
			a=new ActiveXObject("Msxml2.XMLHTTP");  //activeX (IE5.5+/MSXML2+)  
		 }	 
		 catch(e) {  
		   try {   
			  a=new ActiveXObject("Microsoft.XMLHTTP"); //activeX (IE5+/MSXML1)  
		   }	 
		   catch(e) { /* O navegador não tem suporte */   
			  a=false;   
		   }  
		 }  
	   }   
	   return a;  
	 }

 

Bom galera.. com isso finalizamos a nossa aula de hoje.

 

Qualquer dúvida basta postar que iremos sanar para vocês.

 

Espero que estejam gostando, e que isso seja útil a vocês...

 

Em anexo, estão os arquivos utilizados nesta aula...

 

Um abraço!

 

DarkDemo

 

Arquivos em Anexo

 

 

Clique aqui para as principais dúvidas do assunto:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos ASP Clássico
×

Informação importante

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

  Aceito