Barra de Progresso com AJAX
Uma das necessidades com que nos deparamos na hora de realizar projetos longos na web é indicar ao usuário o quanto é preciso esperar. Às vezes é bastante complicado criar uma barra de progresso que mostre o estado atual do processo que está sendo executado.
Uma forma de realizar essa tarefa é usando AJAX. Fazemos uma chamada AJAX que executa a ação, e quando o objeto AJAX tem o estado LOADING (readyState == 3), podemos obter a resposta do script chamado e passá-lo para mostrar o percentual da ação que está sendo realizada.
Para isso, desenvolveremos um script (res. php, por exemplo) que devolva a porcentagem seguida por um hífen. Por exemplo, quando passar por 1% será retornado pelo script “1-”, quando passar por 5% será retornado “1-2-3-4-5″. Processando isso podemos saber, através do último número, o percentual já processado.
O PHP seria o seguinte:
for($i=0; $i<10000000; $i++) {
if ($i%10000 == 0) echo ((int) $i/100000).'-';
flush();
} E o JavaScript seria assim:
function ajaxobj() {
try {
_ajaxobj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
_ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
_ajaxobj = false;
}
}
if (!_ajaxobj && typeof XMLHttpRequest!='undefined') {
_ajaxobj = new XMLHttpRequest();
}
return _ajaxobj;
}
function prueba () {
ajax = ajaxobj();
ajax.open("GET", "res.php", true);
ajax.onreadystatechange=function() {
if (ajax.readyState == 3) {
// Mostramos o percentual
var res = ajax.responseText;
res = res.split('-');
alert(res[res.length-2]);
} else if (ajax.readyState == 4) {
// Fim
alert('FIM');
}
}
// Enviamos algo para que o processo funcione
ajax.send(null);
} Como não existe nada perfeito, e menos ainda o Internet Explorer, esse script só funcionou no Firefox, Opera, Safari e Chrome.
Fonte: Imasters
jQuery e ASP para cadastrar dados
Usar o jQuery é uma forma mais fácil de criar funcionalidades extras em seus sistemas, de animações básicas a grandes galerias de fotos, mas vamos para o nosso foco que é inserir no banco.
Criei um arquivo chamado funcao_jquery.js para colocar a função de efeito do jQuery. Para nossa aplicação usei o efeito fadeIn().
O Fade in (a função fadeIn()) serve para dar opacidade, e pode ser ajustado para ter animação. Existem três strings de velocidade predefinidas (“slow”, “def”, e “fast”), usei a slow em nossa aplicação;
fadeIn("slow");
Criei dois campos de exemplo (Nome e E-Mail) e um botão “submit“. Podem ser criados quantos necessários:
<form action="Cadastro_JQuery.asp?Cadastrar=Ok" method="post">
Nome: <input name="Nome" type="text" id="Nome" />
<br>
E-Mail: <input name="EMail" type="text" id="EMail" />
<input name="btAdd" type="submit" value="Adicionar" id="btn_enviar" />
</form>No action do formulário coloquei uma Query “Cadastrar” com valor ok para ativar a ação do ASP (usando JScript) que segue abaixo:
<%
// Função para cadastrar no banco
if (Request.QueryString("Cadastrar") == "Ok") {
var nome = Request.Form("Nome");
var email = Request.Form("EMail");
Conexao.Execute("Insert Into Newsletter (Nome, EMail)
Values ('"+nome+"', '"+email+"')");
Response.Write("");
}
%>Usando listas (UL>LI) eu pego as informações do banco e organizo tudo para ser mostrado ao usuário:
<%
var rs = Conexao.Execute("Select * From Teste"); // SQL para listar os dados
if (rs == null) {
Response.Write("NADA ENCONTRADO");
}
else {
while (!rs.EOF) {
Response.Write("<li>"+rs("Nome")+" : "+rs("EMail")+"</li>")
// Lista todos os cadastrados do banco
rs.MoveNext();
}
}
%>No ASP, com JScript para verificar se existe algo no banco, eu pego o RecordSet e comparo ele com “null” e o “else” caso encontre;
if (rs == null) {
… continua o resto do código…
A mesma idéia temos para o “loop”, só que uso o End Of File (.EOF)
while (!rs.EOF) {
… continua o resto do código …
Em seqüência imprimo na tela o que foi encontrado.
O jQuery vai agir da seguinte maneira:
No botão de tipo “submit” coloquei uma ID de nome “btn_enviar”, quando o botão for clicado será enviado os parâmetros via POST para o jQuery.
$('#btn_enviar').click(function(){
var nome_post = $('#Nome').val();
var email_post = $('#EMail').val();
$.post("Cadastro_JQuery.asp?Cadastrar=Ok",{nome: nome_post, email: email_post}Logo em seguida jogo dentro da lista (UL>LI).
$("ul li:last").after("<li>" + nome_post + " : " + email_post + "</li>").next().fadeIn("slow");
});E finalizo limpando os campos. Veja na imagem abaixo:
Segue o link da página com o código completo e o arquivo jQuery!
Fonte: Imasters
Upper-box – Componente para jQuery
Para nós, desenvolvedores, existem scripts, códigos, métodos, estruturas que carregamos conosco ano após ano. Utilizamos essas soluções empacotadas em determinados momentos, muitas vezes salvando nossas horas de descanso.
Há muito tempo, em um sistema web em que o foco era a visualização de documentos, o cliente solicitou que o menu fosse retrátil. Ou seja, o menu superior da aplicação tinha que desaparecer se não estivesse sendo utilizado e aparecer quando o cursor do mouse se aproximasse dele. Para suprir isso criei uma função Javascript (utilizando CSS), e ficou bem bacana, simples e bastante útil. Esse script eu carrego comigo desde lá.
Precisei disso novamente alguns dias atrás, mas dessa vez fiz diferente. Tornei o script genérico, de modo que posso utilizar mais facilmente em qualquer aplicação web que tenha jQuery, e ainda coloquei em um repositório no Github (repositório GIT).
Sei que ainda é bastante primitivo e não está nos padrões de plugin jQuery. Mas essa é uma das intenções de colocar em um repositório público. Quem quiser usar e acoplar funcionalidades, otimizações e mesmo dar opiniões será muito bem-vindo. Pra quem não quer nem tocar no repositório, segue o link pra download (versão mais recente). Veja um exemplo do seu funcionamento aqui.
Pra explicar o que, como, onde, vou transcrever o README do repositório no Github abaixo.
upper-box
API javascript que transforma qualquer elemento de seu HTML (uma div, por exemplo) em uma caixa móvel posicionada na parte de cima da tela.
Para utilizá-lo é necessário estar com o jQuery adicionado ao documento.
O que acontece?
O elemento upper-box vai virar uma caixa invisível na parte de cima da tela.
Quando o usuário se aproxima com o mouse da parte superior da tela (body), o elemento ira rolar, abrindo e exibindo seu conteúdo.
Como usar?
Primeiro inclua os arquivos jQuery e upper-box no seu html, desta forma:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upper-box.js"></script>Seu uso é bem simples, basta adicionar upper-box ao class do elemento que vai virar upper-box.
Exemplo:
<div id='div1' class='divClass'>
<h2>Olá,</h2>
<p>Esta div não é um <b>upper-box</b>!</p>
</div><div id='div2' class='divClass upper-box'>
<p>Esta div será um <b>upper-box</b>!</p>
<p>Simples, não?!</p>
</div>Espero não só ter ajudado como também ter instigado a colaboração de código. Sintam-se à vontade para realizar melhorias no simples – por enquanto – upper-box.
Fonte: Imasters
Validação de formulários com jQuery
Vamos verificar, por exemplo, se todos os campos foram preenchidos ou não.. ou se os seus valores estão ok.
Veja um exemplo do que será aprendido nessa aula.
Usarei como exemplo um formulário de contato que é o mais comum por aí. Vamos ao passo-a-passo:
Faça o download da última versão do jQuery no site: http://jquery.com/
Faça o download do plugin Validation no site: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Insira-os dentro do <head> do seu site, da seguinte forma:
1.<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
2.<script language="JavaScript" src="jquery.validate.js" type="text/javascript"></script>Após isso, criamos um pequeno bloco de CSS para estilizar as mensagens de erro:
1.* { font-family: Verdana; font-size: 96%; }
2.label { display: block; margin-top: 10px; }
3.label.error { float: none; color: red; margin: 0 .5em 0 0; vertical-align: top; font-size: 10px }
4.p { clear: both; }
5..submit { margin-top: 1em; }
6.em { font-weight: bold; padding-right: 1em; vertical-align: top; }Ainda dentro do head, depois de inserir o jQuery e o estilo das mensagens de erro, precisaremos adicionar um bloco de JavaScript contendo instruções para a validação:
01.$(document).ready( function() {
02.$("#formularioContato").validate({
03.// Define as regras
04.rules:{
05.campoNome:{
06.// campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
07.required: true, minlength: 2
08.},
09.campoEmail:{
10.// campoEmail será obrigatório (required) e precisará ser um e-mail válido (email)
11.required: true, email: true
12.},
13.campoMensagem:{
14.// campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
15.required: true, minlength: 2
16.}
17.},
18.// Define as mensagens de erro para cada regra
19.messages:{
20.campoNome:{
21.required: "Digite o seu nome",
22.minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
23.},
24.campoEmail:{
25.required: "Digite o seu e-mail para contato",
26.email: "Digite um e-mail válido"
27.},
28.campoMensagem:{
29.required: "Digite a sua mensagem",
30.minLength: "A sua mensagem deve conter, no mínimo, 2 caracteres"
31.}
32.}
33.});
34.});Por fim, inserimos o HTML do formulário na página:
01.<form id="formularioContato" method="post" action="">
02.<label>Nome</label>
03.<input name="campoNome" type="text" value="" />
04.
05.<label>E-mail</label>
06.<input name="campoEmail" type="text" value="" />
07.
08.<label>Mensagem</label>
09.<textarea name="campoMensagem"></textarea><br />
10.
11.<input type="submit" class="submit" value="Enviar" />
12.</form>Viram como é fácil? O arquivo final ficou dessa forma. Se você preferir pode copiar todo esse código JavaScript para um arquivo .js e incluí-lo no <head> do seu site da mesma forma que fizemos no começo da aula.
Coloquei alguns comentários na parte das instruções de validação para facilitar o entendimento.
Com isso você faz uma validação client-side que ajuda a evitar dados inválidos e campos vazios. Mas preciso lembrar que, por ser client-side, essa validação acontece apenas no computador do visitante e o mesmo pode desativar o JavaScript e a validação toda não irá funcionar. Então não se esqueça de fazer a mesma validação dentro do PHP quando receber os dados.
Veja o exemplo desta aula funcionando.
Mais exemplos de validações diferentes podem ser encontrados no site do plugin: http://jquery.bassistance.de/validate/demo/
Fonte: Imasters
Upper-box – Componente para jQuery
Para nós, desenvolvedores, existem scripts, códigos, métodos, estruturas que carregamos conosco ano após ano. Utilizamos essas soluções empacotadas em determinados momentos, muitas vezes salvando nossas horas de descanso.
Há muito tempo, em um sistema web em que o foco era a visualização de documentos, o cliente solicitou que o menu fosse retrátil. Ou seja, o menu superior da aplicação tinha que desaparecer se não estivesse sendo utilizado e aparecer quando o cursor do mouse se aproximasse dele. Para suprir isso criei uma função Javascript (utilizando CSS), e ficou bem bacana, simples e bastante útil. Esse script eu carrego comigo desde lá.
Precisei disso novamente alguns dias atrás, mas dessa vez fiz diferente. Tornei o script genérico, de modo que posso utilizar mais facilmente em qualquer aplicação web que tenha jQuery, e ainda coloquei em um repositório no Github (repositório GIT).
Sei que ainda é bastante primitivo e não está nos padrões de plugin jQuery. Mas essa é uma das intenções de colocar em um repositório público. Quem quiser usar e acoplar funcionalidades, otimizações e mesmo dar opiniões será muito bem-vindo. Pra quem não quer nem tocar no repositório, segue o link pra download (versão mais recente). Veja um exemplo do seu funcionamento aqui.
Pra explicar o que, como, onde, vou transcrever o README do repositório no Github abaixo.
upper-box
API javascript que transforma qualquer elemento de seu HTML (uma div, por exemplo) em uma caixa móvel posicionada na parte de cima da tela.
Para utilizá-lo é necessário estar com o jQuery adicionado ao documento.
O que acontece?
O elemento upper-box vai virar uma caixa invisível na parte de cima da tela.
Quando o usuário se aproxima com o mouse da parte superior da tela (body), o elemento ira rolar, abrindo e exibindo seu conteúdo.
Como usar?
Primeiro inclua os arquivos jQuery e upper-box no seu html, desta forma:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upper-box.js"></script>Seu uso é bem simples, basta adicionar upper-box ao class do elemento que vai virar upper-box.
Exemplo:
<div id='div1' class='divClass'>
<h2>Olá,</h2>
<p>Esta div não é um <b>upper-box</b>!</p>
</div><div id='div2' class='divClass upper-box'>
<p>Esta div será um <b>upper-box</b>!</p>
<p>Simples, não?!</p>
</div>Espero não só ter ajudado como também ter instigado a colaboração de código.
jQuery – Seletores e estilização
Esta matéria tem por finalidade mostrar os fundamentos básicos de seleção e estilização com uso da biblioteca jQuery.
Desenvolvemos uma página de apoio a este artigo na qual é possível verificar na prática o funcionamento do script aqui mostrado. A página encontra-se neste endereço e sinta-se à vontade para visitá-la e constatar seu funcionamento antes de prosseguir a leitura.
Marcação HTML
Observe com cuidado a marcação da página de apoio na qual aplicaremos os scripts de seleção e estilização.
...
<h1>jQuery -- Seletores</h1>
<p>Página criada...</p>
<h2 id="um">Apresentação da jQuery</h2>
<p>jQuery é uma poderosa biblioteca...</p>
<p>Desenvolvedores especialistas em JavaScript...</p>
<h2 id="dois">Livro jQuery do Maujor</h2>
<p>Este livro, na primeira parte...</p>
<p>Na segunda parte...</p>
<p><a href="http://www.livrojquery.com.br">Visite...</a></p>
<h2 id="tres">Ficha Cadastral</h2>
<ul class="ficha">
<li>Título: jQuery</li>
<li>Subtítulo: A biblioteca do programador JavaScript</li>
<li>Autor: Maurício Samy Silva</li>
<li>Nacionalidade do autor: Brasileiro</li>
<li>ISBN: 978-85-7522-178-5</li>
<li>Dimensões: 17x24 cm</li>
<li>Número páginas: 432</li>
<li>Preço: R$75,00</li>
<li>Tiragem: 2.000 exemplares</li>
<li>Palavras-chave: jQuery, JavaScript...</li>
</ul>
...
CSS
A folha de estilos para o layout e apresentação da página de apoio não será analisada por ser irrelevante para o funcionamento do script. Contudo, há uma classe CSS chamada bloco, não constante da marcação, com respectiva regra CSS que será usada pelo script para demonstrar a adição de uma classe com uso do método addClass, como veremos adiante. A regra CSS é a seguinte:
.bloco {
display:block;
border:1px solid #000;
} Linkando os scripts
Scripts tal como folhas de estilos devem ser linkados ao documento onde serão empregados. Um documento que use a biblioteca jQuery deve estar linkado a ela como mostrado a seguir.
<head>
...
<script type="text/javascript" src="jquery-x.x.x.mini.js"></script>
</head>
E os scripts que desenvolvemos para adicionar efeitos jQuery nas páginas devem ser também linkados ao(s) documento(s) que o(s) utilize(m). Na página de apoio usaremos o script incorporado ao documento para facilitar a consulta e estudo quando da visualização do código-fonte da página.
Scripts escritos em linguagem JavaScript e que façam busca de elementos da marcação para aplicar seus efeitos não funcionarão se forem declarados antes que o documento tenha sido carregado.
Quando colocamos um script na seção head do documento precisamos de um mecanismo para informar ao script que espere o documento ser carregado para entrar em ação. Em JavaScript tradicional a sintaxe consiste em encapsular o script em uma função definida para o método window.onload como mostrado a seguir.
<head>
...
<script type="text/javascript">
window.onload = function() {
...script aqui...
}
</script>
A biblioteca jQuery usa um método próprio chamado ready() que é o
equivalente ao método window.onload conforme mostrado a seguir.<head> ... <script type="text/javascript"> $(document).ready(function() { ...script aqui... }) </script>Agora estamos com o documento em condições de receber os scripts jQuery. A seção head contém o seguinte.<head> ... <script type="text/javascript" src="jquery-x.x.x.mini.js"></script> <script type="text/javascript"> $(document).ready(function() { ...script aqui... }) </script>
Método para adicionar estilos
A biblioteca jQuery dispõe do método css() que permite adicionar estilos aos elementos de um documento. O método admite duas sintaxes conforme mostrado a seguir.
Sintaxe para uma declaração CSS
Usada para regra CSS com apenas uma declaração a ser aplicada no elemento alvo do seletor. As propriedades CSS compostas de mais de um termo como são font-size, line-height, border-top-width têm seus equivalentes JavaScripts em grafia conhecida como camelCase e devem ser escritas fontSize, lineHeight, borderTopWidth respectivamente.
Exemplos:
css('color', '#fd6');
css('fontSize', '14px');
css('background', 'blue');
css('lineHeight', '1.2');
css('border', '1px dotted #333');Sintaxe para mais de uma declaração CSS
Usada para regra CSS com mais de uma declaração a ser aplicada no elemento alvo do seletor.
Exemplo:
css({
color: '#fd6',
background: 'blue',
lineHeight: '1.2',
border: '1px dotted #333'
});
Seletores tipo, id e class
A biblioteca jQuery faz uso dos seletores CSS para selecionar seus alvos na árvore do documento (DOM – Document Object Model). Tal como as CSS existem os seletores tipo, de identificador único e de classe cuja sintaxe é mostrada a seguir.
$('h3');
$('ul');
$('#topo');
$('#principal');
$('.separador');
$('.destaque');Código comentado
- Linha 1 — Seletor tipo – seleciona os elementos h3.
- Linha 2 — Seletor tipo – seleciona os elementos ul.
- Linha 3 — Seletor id – seleciona o elemento com id=”topo”.
- Linha 4 — Seletor id – seleciona o elemento com id=”principal”.
- Linha 5 — Seletor class – seleciona o(s) elemento(s) com class=”separador”.
- Linha 6 — Seletor class – seleciona o(s) elemento(s) com class=”destaque”.
Pseudoseletor :eq()
Uma funcionalidade poderosa da biblioteca jQuery é que as seleções retornam um conjunto que pode ser manipulado como array. Isto significa que ao contrário do que ocorre com a linguagem JavaScript formal não há necessidade de construção de loops para se percorrer uma seleção de elementos no DOM. O pseudo seletor :eq() permite selecionar uma ou mais ocorrências de uma seleção jQuery, conforme esclarecem os exemplos a seguir.
$('h2:eq(0)'); // seleciona a 1a. ocorrência de h2
$('ul li:eq(5)'); // seleciona a 6a. ocorrência do item de uma lista
$('p:eq(2n)'); // seleciona parágrafos de ordem ímparNota: O parâmetro de seleção deste peseudoseletor pode ser um número ou uma expressão e segue o sistema de contagem padrão da linguagem JavaScript, isto é a contagem inicia em zero e não em um. Razão pela qual o seletor mostrado na linha 3 do código acima seleciona ocorrências ímpares e não pares, pois: 2×0 = 0 (primeira ocorrência), 2×1=2 (terceira ocorrência), 2×2=4 (quinta ocorrência), e assim por diante.
Métodos next(), children() e addClass()
Para a página de apoio que preparamos para demonstrar os efeitos estudados nesta matéria usaremos estes três métodos cuja finalidade é a seguinte.
- Método next() – seleciona o elemento seguinte na marcação do documento.
- Método children() – seleciona o(s) elemento(s) filho(s).
- Método addClass() – adiciona uma classe no(s) elemento(s) selecionado(s).
Aplicação prática
Vamos aplicar os conceitos de estilização e seleção estudados anteriormente para desenvolver o script que faz funcionar a página de apoio que você visitou, conforme sugerido no início desta matéria. A sintaxe é tão simples que eu tenho certeza que uma simples análise do código mostrado a seguir permitirá chegar-se à conclusão sobre o funcionamento do script.
Consultando a marcação apresentada no início da matéria acompanhe atentamente o script a seguir.
<script type="text/javascript">
$(document).ready(function(){
$('#um').css('background', '#ff6');
$('#dois').css({
background: '#f00',
color: '#fff',
padding: '5px 0',
textAlign: 'center'
});
$('h2:eq(2)').css('color', 'blue');
$('#tres')
.next()
.children('li:first-child')
.css('fontWeight, 'bold');
$('.ficha li:nth-child(5)').css('background', '#0f0');
$('cite').addClass('bloco');
$('a[href*="livro"]').css('color', '#ff4500');
});
</script>
Código comentado
- Linhas 2 até 19 – Container do método ready().
- Linha 3 – Seleciona o elemento com id="um" e aplica uma cor de fundo amarela.
- Linhas 4 até 9 – Seleciona o elemento com id="dois" e usando a sintaxe para múltiplas declarações CSS aplica vários estilos.
- Linha 10 – Usa o pseudoseletor :eq() para selecionar a terceira ocorrência de cabeçalho nível 2 e aplica a cor azul para o seu texto.
- Linha 11 até 14 – Seleciona o elemento com id="tres" (terceira ocorrência de h2), usa o método next() para selecionar o elemento que vem depois dele (lista ul), procura entre os filhos children() de ul aquele que é o primeiro filho first-child e a ele aplica negrito.
- Linha 15 – Seleciona os elementos li que são descendente do elemento com class="ficha", procura a quinta ocorrência nth:child(5) e a ela aplica uma cor de fundo verde.
- Linha 16 – Seleciona os elementos cite e a eles adiciona a classe bloco. Notar que foi definida uma regra de estilo para esta classe e em consequência quando o script entrar em ação os elementos cite da página seguirão esta regra CSS.
- Linha 17 – Usa um seletor de atributo para mudar a cor dos links que contenham a palavra “livro” no atributo href.
Dúvidas com seletores CSS? Consulte:
Trabalhando com JSON
A JSON nada mais é do que uma maneira de representar os objetos em JavaScript,ou seja, JSON é JavaScript puro. Para trabalhar com esse formato não é necessário usar DOM ou qualquer Framwork ou Kit específico, embora muitos dos frameworks de hoje em dia dêem algum tipo de suporte à JSON.
JSON se assemelha muito com as matrizes do JavaScript, mas pode armazenar os mesmos dados que os documentos XML.
Veja um breve exemplo:
dados retornados,
{"notas" : [
{"nome":"João", "nota1":8, "nota2":6, "nota3":10 },
{"nome":"Maria", "nota1":5, "nota2":9, "nota3":8 },
{"nome":"Pedro", "nota1":2, "nota2":7, "nota3":5 }
]};
código da página,
<html>
<head>
<script language="javascript">
var request = null;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
if (request == null)
alert("Não foi possível criar o objeto !");
function obterDados() {
var url = "alunos.php";
url = url + "?cache=" + new Date().getTime();//para evitar problemas com o cache do navegador
request.open("GET", url, true);
request.onreadystatechange = exibe;//chame a função sem os parênteses
request.send(null);
}
function exibe(){
if (request.readyState == 4) {//verifica o estado de prontidão
if (request.status == 200) {//verifica o status da requisição
//recupera os dados e os converte em um objeto
var jsonData = eval('(' + request.responseText + ')');
//o navegador trata a JSON com texto, portanto utilize o responseText
//trabalhando com os dados
var aluno1 = jsonData.notas[0].nome;//recupera o nome do primeiro aluno
var aluno2 = jsonData.notas[1].nome;//recupera o nome do segundo aluno
var aluno3 = jsonData.notas[2].nome;//recupera o nome do terceiro aluno
//exibe as notas
alert("Aluno : " + aluno1+"nNota1 : "+jsonData.notas[0].nota1+"nNota2 : "+jsonData.notas[0].nota2+"nNota3 : "+jsonData.notas[0].nota3);
alert("Aluno : " + aluno2+"nNota1 : "+jsonData.notas[1].nota1+"nNota2 : "+jsonData.notas[1].nota2+"nNota3 : "+jsonData.notas[1].nota3);
alert("Aluno : " + aluno3+"nNota1 : "+jsonData.notas[2].nota1+"nNota2 : "+jsonData.notas[2].nota2+"nNota3 : "+jsonData.notas[2].nota3);
}
}
}
</script>
</head>
<body>
<script language="javascript">
obterDados();//chama a função
</script>
</body>
</html>
O interessante da JSON é que ela é apenas javascript, portanto, o seu código JavaScript poderá utiliza-lá facilmente.
A má notícia é que JSON é JavaScript, linguagens como PHP, PERL e Asp não consiguirão entendê-la. Provalvelmente você precisará de alguma biblioteca para exibir a JSON em seus scripts de servidor.
Para fazer o download das bibliotecas mais comuns de JSON, acesse:www.json.org
Veremos agora um exemplo de como gerar uma JSON resposta no PHP
<?php header("Content-Type: text/html; charset=ISO-8859-1",true); ?>
<?php
require("JSON.php"); //importando a biblioteca
$json = new Services_JSON();//criando o objeto para manipular a JSON
$aluno1 = array('nome'=> 'Ana',
'nota1'=> "8",
'nota2'=> "6" ,
'nota3'=> "2");
$aluno2 = array('nome'=> 'Maria',
'nota1'=> "5",
'nota2'=> "9" ,
'nota3'=> "8");
$aluno3 = array('nome'=> 'Pedro',
'nota1'=> "2",
'nota2'=> "7" ,
'nota3'=> "5");
$notas = array('notas' => array($aluno1, $aluno2, $aluno3));
$output = $json->encode($notas);
echo($output);
?>
Como podemos observar, primeiro temos de criar um vetor para cada aluno, em seguida deve-se criar um outro vetor para armazenar os vetores de alunos, formando uma matriz.
Já foi dito anteriormente que matrizes são os objetos que mais se assemelham à JSON, por isso a grande maioria de classes para a JSON, pedirá como parâmetro de entrada uma matriz;
Este foi apenas um exemplo simples simples para a utilização da JSON.
Uma aula prática de jQuery
Nomenclatura
Durante o texto vou me referir à função $ como função jQuery, pois na verdade elas são a mesma coisa. A diferença é que a função $ não estará disponível se você optar por utilizá-la sem conflitos.
Como começar
Antes de escrever qualquer código JavaScript, faço questão de utilizar aquela técnica clássica onde o nosso código JS começa a ser executado apenas quando o DOM terminou de ser carregado:
$(document).ready(function() {
// aqui vai o código específico da sua aplicação
});
Esse código eu deixo em um arquivo externo, e o referencio a partir da tag <script> presente no meu template HTML (independente do framework que você estiver – ou não – utilizando, manter o código JS fora do seu template HTML é uma forma simples de separar apresentação e comportamento).
Deste ponto em diante passo a omitir essas linhas de inicialização. Todo o código que for exibido pode ser posicionado na linha 2 da listagem de código acima.
Encontrando elementos
Cedo ou tarde você precisará encontrar elementos do seu documento e manipulá-los. Na verdade, boa parte da minha programação JavaScript consiste disso. Com o jQuery, qualquer ação começa com uma chamada à função jQuery, e com esta não poderia ser diferente. Para encontrar um elemento você pode passar uma string que atenda a especificação da biblioteca para seletores. Alguns exemplos:
// todos os parágrafos contendo a classe "warning"
$('p.warning');
// todas as checkboxes dentro do elemento de id "users_list"
$('#users_list input[type=checkbox]');
Fazendo alguma coisa com os elementos
Encontrar os elementos e não fazer nada com eles não serve pra muita coisa. Por exemplo, vamos imaginar que você queira fazer a seguinte operação: quando o usuário clicar em um link com a classe help, vamos mostrar a ele um alerta. É algo bem estúpido, e como esperado, simples de fazer:
$('a.help').click(function() {
alert('Você clicou num parágrafo de ajuda!');
});
A função jQuery, quando recebe uma string, irá retornar um outro objeto jQuery, contendo internamente uma lista de todos os elementos encontrados no documento que satisfazem a sua consulta. Como esse retorno é um outro objeto jQuery, você já pode realizar uma chamada de função sobre esse objeto (neste caso, click). Veremos mais adiante como levar esse conceito ao extremo.
Parando eventos
Quando definimos o evento para cliques sobre links com a classe help, não evitamos que a URL especificada no atributo href do link fosse seguida pelo navegador. Se esse link tinha como href o símbolo #, então após o clique a barra de rolagem vertical (se existia) foi movida para o topo do documento.
Para evitar esse comportamento, precisamos utilizar o objeto de tipo Event que o jQuery envia para a nossa função de processamento de eventos. Veja como:
$('a.help').click(function(e) {
// o link não será seguido pelo navegador
e.preventDefault();
});
Caso você esteja observando a submissão de um formulário, pode utilizar a mesma técnica para evitar que o formulário seja submetido.
$('form#create_user').submit(function(e) {
// o formulário não será enviado
e.preventDefault();
});
Esses são apenas alguns dos eventos disponíveis, aqui você pode encontrar todos eles.
Manipulando as classes de um elemento
Você tem à disposição 3 métodos básicos para manipular as classes de elementos. Aprenda a utilizá-los com exemplos:
// adiciona a classe "teste" ao parágrafo
$('p:first').addClass('teste')
// remove a classe "teste" ao parágrafo
$('p:first').removeClass('teste')
// adiciona (se não existir) ou remove (se existir) a classe "teste" ao parágrafo
$('p:first').toggleClass('teste')
Acessando atributos
Acessar atributos é algo trivial com jQuery:
// recupera o "href" do link
var id = $('a#add_another_row').attr('id');
// define o "href" do link
var id = $('a#add_another_row').attr('href', '#');
Note que attr atua apenas sobre o primeiro elemento interno a um objeto jQuery. Por atributos, nesse caso, entende-se as propriedades de um elemento HTML (diferente de suas propriedades de estilo).
Definindo estilos de elementos
Sempre que possível procuro manter todos os estilos associados ao documento dentro das minhas definições CSS. Assim, se quero modificar o visual do sistema, sei que é apenas lá que devo mexer. Mas em algumas situações me vi obrigado a quebrar essa regra. São casos onde você precisará manipular propriedades CSS específicas de elementos.
$('a#do_something_crazy').click(function(e) {
e.preventDefault();
// vamos recuperar a cor do link
alert("Agora o link tem cor " + $(this).css('color'));
// agora vamos alterar apenas a cor do link
$(this).css('color', 'blue');
// agora vamos alterar as propriedades CSS "color" e "background-color" do link
$(this).css({
color: 'green',
backgroundColor: 'red'
});
});
Na listagem acima apresentei as 3 formas de utilizar a função css:
css(propriedade): recupera o valor de “propriedade”css(propriedade, valor): define o valor de “propriedade” como “valor”css(objeto): define diversos pares de “propriedade/valor”
Encontrando elementos ancestrais
Imagine que você está definindo um tratador de evento sobre um link. Esse link está dentro de uma célula de tabela (td), que por sua vez está dentro de uma linha de tabela (tr). No contexto do tratamento desse evento, seu objeto atual, associado à variável this, é esse link. Nesse momento você percebe que precisa, por algum motivo, do id da linha onde está link (isso acontece bastante comigo). Para esses casos utilize a função parents, que retorna todos os ancentrais do elementos do objeto jQuery atual.
$('a#do_something').click(function(e) {
var rowId = $(this).parents('tr:first').attr('id');
});
Como parents retorna todos os ancestrais, passamos à função um seletor jQuery, indicando que queremos apenas a primeira linha. Simples, rápido e indolor.
Encontrando elementos filhos
Já vimos como encontrar ancestrais. Quando você quer fazer o caminho inverso, é só utilizar a função find. Por exemplo, imagine que você está processando a submissão de um formulário e precisa encontrar vários campos desse formulário, para validá-los. Se eles não possuem id’s associados, o find será uma mão na roda.
$('form#authentication').submit(function(e) {
e.preventDefault();
var username = $(this).find('input[name=username]').val();
var password = $(this).find('input[name=password]').val();
});
Valores de elementos
Utilize a função val para descobrir o conteúdo de determinados elementos (como o conteúdo de uma caixa de texto, por exemplo):
$('#username').val();
Funções semelhantes são text e html.
Realizando tarefas de acordo com o navegador do usuário
Como avisar ao seu usuário que você, por exemplo, está utilizando uma biblioteca baseada no elemento canvas, e que a experiência desse usuário no Internet Explorer não será tão boa (baixa performance)? Verifique que navegador ele está utilizando:
if ($.browser.msie) {
alert('Experimente o Firefox!');
}
Você pode realizar testes para outros navegadores também, é claro. Dê uma olhada na documentação dos utilitários da biblioteca.
Inserindo elementos no documento
Volta e meia crio pequenos frameworks baseados em classes de elementos, de forma a evitar a repetição de código HTML. Nesses casos sempre é bom poder inserir código HTML arbitrário após a carga do documento. Eis como fazer isso com jQuery:
$('<p>Este parágrafo foi inserido dinamicamente!</p>').appendTo('body');
$('<p>Este parágrafo também foi inserido dinamicamente!</p>').prependTo('body');
Como podemos ver, quando a string enviada à função jQuery não é reconhecida como um seletor, ela é reconhecida como um elemento a ser criado (não sei se é exatamente essa a implementação interna, mas se você pensar assim não terá problemas para entender a diferença entre enviar uma string como seletor ou um novo elemento HTML).
As funções appendTo e prependTo são muito úteis nesses casos. Com elas você indica que quer inserir um elemento como último ou como primeiro filho do elemento passado como parâmetro.
Sendo honesto: muitas vezes preciso inserir muito mais HTML do que uma linhazinha dessas. Em situações reais já precisei inserir grandes trechos de formulário, por exemplo. Não tenha medo: insira uma contra-barra ao fim de cada linha e prolongue sua string HTML por diversas linhas:
$('<p class="input_row"> \
<input id="username" type="text" /> \
</p> \
...'
)
.prependTo($('form#auth'));
Criando um cache
Quando você precisa fazer 2 operações diferentes utilizando o mesmo seletor, mas em pontos diferentes do código, é interessante atribuir o objeto jQuery que contém o resultado da consulta a uma variável, para evitar o custo de processamento de uma nova consulta.
Portanto, isto não é legal:
$('a.special').click(function() {
//
});
// muitas linhas depois...
$('a.special').hover(function() {
//
});
Isto é legal:
var $specialLinks = $('a.special');
$specialLinks.click(function() {
//
});
// muitas linhas depois...
$specialLinks.hover(function() {
//
});
Note que utilizei um cifrão como prefixo para a variável $specialLinks. Considero isso uma boa prática dentro de código JS que utilize jQuery, pois deixa bem claro quais variáveis são objetos jQuery e quais não são. Se você for estudar o código de plugins é provável que encontre essa mesma convenção sendo seguida.
Encadeando funções
Como disse anteriormente, toda função jQuery que você invoca a partir de um objeto jQuery retorna o próprio objeto jQuery. Isso significa que em vez de fazer isto:
var $newP = $('<p class="warning"></p>');
$newP.css('width', '100%');
$newP.appendTo('body');
Você pode fazer isto:
$('<p class="warning"></p>')
.css('width', '100%')
.appendTo('body');
Sim, você pode encadear quantas chamadas quiser.
Em inglês o termo para esse encadeamento de chamadas é chaining. Quando vi o código disposto dessa forma pela primeira vez não gostei nenhum pouco, pensei: “nunca vou fazer isso!”. Mas hoje, se você abrir meus arquivos JS verá encadeamento de chamadas por todo lado. Acho que isso vicia, simplesmente.
Se você for utilizar aquele parágrafo em algum outro ponto do código, crie um cache para ele no momento da criação:
var $warningP = $('<p class="warning"></p>')
.css('width', '100%')
.appendTo('body');
Utilizando plugins
Sem plugins o jQuery já teria sido uma grande idéia, mas com a possibilidade de definir novas funções para o objeto jQuery, fica difícil reclamar dessa biblioteca. Em geral um plugin jQuery tem um nome bastante sugestivo (como tablesorter), e o nome dele indica exatamente qual o nome da função que corresponde ao plugin.
Para utilizar qualquer plugin jQuery basta incluir no seu cabeçalho HTML uma referência (tag <script>) ao código-fonte do plugin após ter referenciado o código-fonte do jQuery. Digamos que estejamos utilizando o plugin tablesorter, capaz de dar à tabelas HTML poderes de ordenação de colunas. Eu utilizaria o plugin da seguinte forma:
// primeiro verifique se o plugin foi carregado
if ($.fn.tablesorter) {
$('table.record_list').tablesorter();
}
Com o código acima aplicamos o comportamento oferecido pelo plugin a todas as tabelas de classe record_list do documento.
Note que a grande maioria dos plugins opta pela simplicidade: eles funcionam sem que você passe parâmetros para a função principal. Se você precisar passar parâmetros, em geral você irá passar um objeto literal, o qual sobrescreverá as opções padrão do plugin.
jQuery e Firebug
Dentro de um projeto que utiliza o jQuery, tire o máximo de proveito da biblioteca. Se aquele seletor jQuery que você escreveu não está funcionando, copie e cole o código no console do Firebug e veja a resposta. Se a resposta do console for simplesmente um array vazio, quer dizer que seu seletor não casou com nenhum elemento. Caso contrário, você verá uma representação dos elementos que casaram.
Além de fazer consultas no documento, gosto de manipular os elementos que encontro via Firebug. Por exemplo:
$('p.warning:first').css('background-color', 'red');
Acho mais fácil que utilizar o editor de CSS embutido no Firebug.
Um exemplo completo
Nosso documento contém uma tabela com a classe record_list, a qual está envolvida por uma div#table_panel. Após o carregamento da página, vamos adicionar um link abaixo dessa tabela. Esse link, quando clicado, adiciona uma nova linha à tabela. Este exemplo sozinho não serve para nada, mas utilizei a mesma idéia aqui no meu projeto para criar uma tabela que exibia todas as curvas de um gráfico. Para adicionar mais uma curva ao gráfico, eu utilizava essa mesma abordagem: primeiro adicionava a nova linha, e em seguida gerava o gráfico novamente, via Ajax.
$(document).ready(function() {
$('<a href="#" id="create_new_line">Criar nova linha</a>')
.click(function(e) {
e.preventDefault();
$('<tr> \
<td>...</td> \
<td>...</td> \
<td>...</td> \
</tr>'
)
.appendTo('table.record_list:first');
})
.appendTo('#table_panel');
});
Prototype – Janelas em AJAX
Visite o endereço abaixo e clique nas opções “click here” para ver cada exemplo:
http://prototype-window.xilinus.com/samples.html
Você pode definir o visual das janelas ou pode escolher alguns templates prontos:
http://prototype-window.xilinus.com/themes.html
Para copiar e testar visite:
Cálculo de frete dos Correios utilizando AJAX
Esse script realiza o cálculo do valor do frete nos correios utilizando apenas AJAX. Para utilizar este módulo, faça da seguinte maneira:
function callback(dados) {
alert('O valor total é R$' + dados['preco_postal']);
}
Correios.calcular(callback, null, '33000-000', '33000-001', peso=5);
Não se esqueça de ler as instruções. É indispensável que você faça uma regra no apache e que modifique o atributo “url” do protótipo Correios.
Script
//******************************************************************************
// @name: util.correios.calculo.js
// @purpose: interface para efetuar os cálculos de frete nos correios.
// Para que ele funcione você precisa criar uma regra em seu
// servidor para reescrever as urls vindas de determinado
// endereço. No meu caso, que uso apache, minha regra ficou assim:
// - Utilizando mod_rewrite:
// RewriteEngine On
// RewriteCond %{REQUEST_URI} ^(/correios/*)
// RewriteRule ^/correios/(.*) http://www.correios.com.br/$1 [NE,L,P]
// - Ou utilizando mod_proxy:
// ProxyRequests On
// ProxyVia On
// ProxyPass /correios/ http://www.correios.com.br/
//
// @example: Para utilizar este módulo, faça da seguinte maneira:
// function callback(dados) {
// alert('O valor total é R$' + dados['preco_postal']);
// }
// Correios.calcular(callback, null, '33030-645', '30535-630', peso=5);
//
// @author: Ruhan Bidart - ruhanbidart __at__ gmail __dot__ com
// @created: 08/09/2008
// @version: 0.1
//******************************************************************************
var Correios = {
// Propriedades:
// nao se esqueca de reescreve-la no seu server, senao ocasiona
// um erro de permissao
url : 'http://localhost/correios/encomendas/precos/calculo.cfm',
_retorno: null,
callback: function() { alert('Voce nao implementou uma funcao de callback');},
// Funções:
get_dados : function(dados) {
var handler = new XMLHandler();
var xmlreq = new XMLClient(Correios.url);
// parametros
for(var key in dados) {
// nao insere aqueles que sao null
if(dados[key] != null) xmlreq.addParam(key, dados[key]);
}
handler.onError = function (e) {
throw('Ocorreu um erro ao tentar chamar a url ' + Correios.url + '
com os parametros que voce informou. Mensagem original: '+ e)
}
handler.onProgress = function () {}
handler.onInit = function () {}
handler.onLoad = function (xml) {
var parser = new XMLParser();
var xmlobj = parser.parseString(xml);
var rootnd = xmlobj.documentElement;
// verificando se ocorreu algum erro nos correios
var erro = rootnd.getElementsByTagName('erro')[0];
if(erro && erro.getElementsByTagName('codigo')[0].firstChild.nodeValue != '0') {
throw('Ocorreu um erro nos correios. ' + erro.getElementsByTagName('descricao')[0].firstChild.nodeValue);
}
// caso nao tenha ocorrido nenhum erro, monta o dicionario de retorno
Correios.callback(Correios.xml_to_dict(rootnd.getElementsByTagName('dados_postais')[0]));
}
xmlreq.query(handler);
},
xml_to_dict: function(elementos) {
var dic = {};
for(var i=0; i<elementos.childNodes.length; i++) {
var el = elementos.childNodes[ i ];
if(el.nodeType == 1) dic[el.tagName] = el.firstChild.nodeValue;
}
return dic;
},
calcular : function(callback, servico, cep_origem, cep_destino, peso,
mao_propria, valor_declarado, aviso_recebimento) {
// Parâmetros:
// callback: funcao que sera chamada depois de terminar de executar
// o calculo.
// servico: Código do tipo de entrega que será calculada
// O valores possíveis são:
// - 40010 (SEDEX)
// - 40010 (SEDEX)
// - 40290 (SEDEX Hoje)
// - 40215 (SEDEX 10)
// - 40045 (SEDEX a Cobrar)
// - 81019 (e-SEDEX)
// - 44105 (MALOTE)
// Valor padrão é: 40010
// cep_origem: Cep de Origem no formato XXXXX-XXX
// cep_destino: Cep de Destino no formato XXXXX-XXX
// peso: Peso da remessa limite de 30, menor 0.3
// mao_propria: Serviço de Mão Própria(S/N)
// Valor padrão é: N
// valor_declarado: Serviço de seguro com valor declarado
// aviso_recebimento: Serviço de Aviso de Recebimento(S/N)
// Valor padrão é: N
//
// Retorno:
// Dicionario com os dados retornados pelo correio. Eles
// estarão na forma (em uma pesquisa feita de um frete de BH para RJ - Interior):
// {'servico': 40010,
// 'servico_nome': SEDEX,
// 'uf_origem': 'MG',
// 'local_origem': 'Capital',
// 'cep_origem': '33030645',
// 'uf_destino': 'RJ',
// 'local_destino': 'Interior',
// 'cep_destino': '25770970',
// 'peso': 10,
// 'mao_propria': 0,
// 'aviso_recebimento': 0,
// 'valor_declarado': 0,
// 'tarifa_valor_declarado': 0,
// 'preco_postal': 73.7 }
// ** E serão retornados como parametro para a funcao de callback.
Correios.callback = callback;
if(!servico) servico = 40010;
if(!peso || peso < 0.3) peso = null;
if(peso > 30) throw('A mercadoria não pode pesar mais do que 30 Kg');
if(!mao_propria) mao_propria = null;
if(!valor_declarado) valor_declarado = null;
if(!aviso_recebimento) aviso_recebimento = null;
var dados = {'servico': servico,
'cepOrigem': cep_origem,
'cepDestino': cep_destino,
'peso': peso,
'maoPropria': mao_propria,
'valorDeclarado': valor_declarado,
'avisoRecebimento': aviso_recebimento,
'resposta': 'Xml'}
return Correios.get_dados(dados);
}
}
/********************************************************************************
* Biblioteca para trabalhar com Ajax.
* Obs.: Se você precisa de um script de tamanho menor, implemente novamente o
* post feito em Ajax para formatar um código lightweight.
* ** O código abaixo não foi feito por mim.
********************************************************************************/
var aXmlIds = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP", "MICROSOFT.XMLHTTP.1.0", "MICROSOFT.XMLHTTP.1", "MICROSOFT.XMLHTTP"];
function XMLClient(sUrl, bdoAsync)
{
this.sUrl = sUrl;
this.oHandler = null;
this.oXMLRequest = null;
this.sParams = '';
if (bdoAsync == undefined) bdoAsync = true;
this.bdoAsync = bdoAsync;
this.sClosureNode = "";
}
XMLClient.prototype.query = function(oHandler)
{
this.oHandler = oHandler;
if (window.XMLHttpRequest)
{
if (!this.oXMLRequest)
this.oXMLRequest = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
for (var i = 0; i < aXmlIds.length; i++)
{
try
{
this.oXMLRequest = new ActiveXObject(aXmlIds[ i ]);
break;
} catch(e) { }
}
}
else
{
if (!this.oIframe)
{
var oIframe = document.createElement("IFRAME");
oIframe.setAttribute("id", "xmlhttpFrame");
oIframe.setAttribute("name", "xmlhttpFrame");
oIframe.style.visibility = "hidden";
oIframe.style.position = "absolute"
oIframe.style.top = "0px";
oIframe.style.left = "0px";
document.body.appendChild(oIframe);
this.oIframe = document.getElementById("xmlhttpFrame");
}
this.oIframe.setAttribute("src", this.sUrl + "?" + this.sParams);
window.clearInterval(this.iTimeout);
this.bJustCalled = true;
var oSelf = this;
this.iTimeout = window.setInterval(function() {oSelf.processReqChange(oSelf);}, 500);
}
if (this.oXMLRequest)
{
var oSelf = this;
if(this.bdoAsync){ this.oXMLRequest.onreadystatechange = function () {oSelf.processReqChange()}; }
this.oXMLRequest.open("POST", this.sUrl, this.bdoAsync);
this.oXMLRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
this.oXMLRequest.send(this.sParams);
if (!this.bdoAsync)
return this.oXMLRequest.responseText;
}
}
XMLClient.prototype.setAsync = function (bdoAsync)
{
this.bdoAsync = bdoAsync;
}
XMLClient.prototype.setClosureNode = function(sNodeName)
{
this.sClosureNode = sNodeName;
}
XMLClient.prototype.processIFrame = function()
{
var oLoadedData = null;
if (document.frames["xmlhttpFrame"] != null)
{
var sDoc = document.frames["xmlhttpFrame"].document.body.innerHTML;
if ((sDoc.indexOf("/" + this.sClosureNode) != -1) || (sDoc.indexOf(this.sClosureNode + "/") != -1))
{
oLoadedData = document.frames["xmlhttpFrame"].document;
this.iReadyState = 4;
window.clearInterval(this.iTimeout);
}
return oLoadedData;
}
}
XMLClient.prototype.processReqChange = function ()
{
if (this.oIframe != null)
{
if (this.bJustCalled)
{
this.bJustCalled = false;
this.iReadyState = 1;
}
else
{
oLoadedData = this.processIFrame();
if (oLoadedData == null)
{
return;
}
}
}
if (this.oXMLRequest != null)
{
this.iReadyState = this.oXMLRequest.readyState;
}
switch (this.iReadyState)
{
case 1:
this.oHandler.onInit();
break;
case 2:
if (window.XMLHttpRequest)
{
if (this.oXMLRequest.status != 200)
{
this.oHandler.onError(this.oXMLRequest.status,
this.oXMLRequest.statusText);
this.oXMLRequest.abort();
}
}
else if (this.oIframe != null)
{
this.oHandler.onError(-1, oLoadedData);
}
break;
case 3:
var contentLength = 0;
if (window.XMLHttpRequest)
{
try
{
contentLength = this.oXMLRequest.getResponseHeader("Content-Length");
}
catch(ex)
{
}
if (this.oIframe != null)
{
this.oHandler.onProgress(oLoadedData.length);
}
this.oHandler.onProgress(this.oXMLRequest.responseText.length);
}
break;
case 4:
if (this.oIframe != null)
{
this.oHandler.onLoad(oLoadedData);
}
else
{
this.oHandler.onLoad(this.oXMLRequest.responseText);
}
break;
}
}
XMLClient.prototype.addParam = function (paramName, paramValue)
{
if (this.sParams.length > 0)
{
this.sParams = this.sParams + "&";
}
this.sParams= this.sParams + paramName + "=" + escape(paramValue);
}
XMLClient.prototype.clearParameters = function ()
{
this.sParams = "";
}
XMLClient.prototype.getReadyState = function ()
{
return this.iReadyState;
}
XMLClient.prototype.abort = function ()
{
try
{
if (this.oXMLRequest)
{
this.oXMLRequest.abort();
}
else
{
this.oIframe.setAttribute("src", "");
}
}
catch(e)
{
}
}
function XMLHandler ()
{
}
XMLHandler.onInit = function ()
{
}
XMLHandler.onError = function (status, statusText)
{
}
XMLHandler.onProgress = function (dataLength)
{
}
XMLHandler.onLoad = function (responseText)
{
}
function XMLParser ()
{
try
{
this.parser = new DOMParser();
}
catch (e)
{
this.parser = new ActiveXObject('Microsoft.XMLDOM');
}
}
XMLParser.prototype.parseString = function (xmlText)
{
try
{
XMLDocument = this.parser.parseFromString(xmlText, "text/xml");
}
catch (e)
{
this.parser.async = 'false';
this.parser.loadXML(xmlText);
XMLDocument = this.parser;
}
return XMLDocument;
}