programação web aula 7 - xml, ajax, jquery · 1 xml de nições sintaxe exemplo ... programação...
TRANSCRIPT
XML Ajax Jquery
Programação WebAula 7 - XML, AJAX, JQuery
Bruno Müller Junior
Departamento de Informática
UFPR
31 de Março de 2014
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
1 XMLDe�niçõesSintaxe
ExemploDilemas
Regras EstruturaisXML SchemaDe�nindo um SchemaExemploGeração de um arquivo XML
Tipos de dadosTipos de dados SimplesTipos de�nidos pelo usuárioTipos de dados Complexos
Exemplo:
VisualizaçãoXSLT
2 AjaxComo funciona
Request Phase - XMLHttpRequest()Request Phase - openResponse DocumentReceiver PhaseReceiver Phase - onreadystatechangeReceiver Phase - Status
Json3 Jquery
Sintaxe
Jquery + AjaxExemplos:
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
XML
Histórico:SGML (1986) - Aprovado pela ISOHTML (1990)XML 1.0 (1998) W3CXML 1.1 (2004) W3C - não descrito aqui.
MotivaçãoUm arquivo HTML é enviado pela internet. Ele apresenta tagscom usos pré-de�nidos para uso em navegadores.Porém, quando se deseja trasmitir dados (por exemploregistros de BD), não é adequado.XML é uma linguagem de marcação derivada do SGML onde ousuário pode especi�car as tags.aplicação-alvo: armazenar dados textuais.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
De�nições
De�nições
É uma meta linguagem de marcação.especi�ca regras para a criação de uma linguagem demarcação.em outras palavras, permite criar in�nitas linguagens demarcação.Não inclui tags, mas especi�ca tags.Em XML, <tag> ... </tag é chamado elemento.Uma linguagem criada por XML é chamada aplicação XML.
Dados armazenados em documentos XML podem serutilizados por vários tipos de aplicação.
Por esta razão, é uma linguagem universal para troca de dados.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Sintaxe
Sintaxe
Dois níveis:Sintaxe geral (SGML), que será visto nesta seção;Sintaxe de�nida para uma determinada linguagem(DTD/Schemas);
Sintaxe Geral:nomes XML (usados para elementos e atributos)
[letra | _] [letra | _ | dígito | hífen | . ]*documento começa com <?xml ...> na primeira linha.cada elemento tem a tag de fechamento.
Existem ferramentas para veri�car se um documento XMLatende às regras acima, ou seja, é �bem formado�. Exemplo:http://www.w3schools.com/xml/xml_validator.asp.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Exemplo
Exemplo
<?xml version = "1.0" encoding = "utf-8"?><ad>
<year> 1977 </year><make> cessna </make><model> Skyhawk </model><color> Light blue and white </color><description> New paint, nearly new interior,685 hours SMOH, full IFR King avionics</description><seller phone = "555-222-3333"> Skyway Aircraft </seller><location>
<city> Rapid City, </city><state> South Dakota </state>
</location></ad>
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Dilemas
Dilemas
Como a sintaxe de um documento XML é de�nida pelousuário, isto pode levar a alguns dilemas:
<!-- Opção 1: colocar algumas informações em atributos --><patient name = "Ermenegildo da Costa">...</patient>
<!-- Opção 2: aninhar em uma nova tag --><patient>
<name> Ermenegildo da Costa </name>...</patient>
<!-- Opção 3: aninhar em várias tags --><patient>
<name><first> Ermenegildo </first><middle> da </middle><last> Costa </last>
</name></patient>
<!-- A última tem a vantagem de permitir acesso a mais detalhes -->
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Regras Estruturais
Regras Estruturais
Foram projetadas muitas linguagens utilizando XML.Exemplos: http://en.wikipedia.org/wiki/List_of_XML_markup_languages.Problema: como saber se um arquivo XML está de acordocom a sintaxe de uma determinada linguagem. Soluções:
DTD (http://www.w3schools.com/xml/xml_dtd.asp)Schema(http://www.w3schools.com/xml/xml_schema.asp)
Somente iremos abordar o segundo (XML Schema) por váriosmotivos, dentre eles destacamos a sintaxe ser mais próxima aXML. Procure na web por mais motivos.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
XML Schema
XML Schema
Analogia com orientação a objetos:XML Schema é a classe;documento XML é o objeto;
Objetivo de XML Schema;De�nir a estrutura de um documento XML;Permite determinar tipo de dado de cada elemento ou atributo;
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
De�nindo um Schema
De�nindo um Schema
Schemas são criados a partir de um schema, que contémelementos básicos como schema, element, sequence,string.
Este Schema de Schemas (Namespace) é de�ndo emhttp://www.w3.org/2001/XMLSchema.xsd.
Como exemplo, considere um exemplo de um arquivo XML eseu respectivo Schema (e DTD):http://www.w3schools.com/Schema/schema_howto.asp.
Observe como o schema de�ne uma linguagem, e que odocumento segue esta linguagem.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Exemplo
Exemplo
Para este exemplo, considere o arquivohttp://www.inf.ufpr.br/bmuller/CI320/7/planes1.xml,com schemahttp://www.inf.ufpr.br/bmuller/CI320/7/planes.xsd.
xsd: schema. É o elemeneto raiz, que contém váriosatributos:http://www.w3schools.com/schema/el_schema.asp.
xmlns:xsd Namespace. De�ne tags básicas. É o únicoobrigatório.
targetNamespace Opcional. Um namespace que é umaespecialização do primeiro.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Geração de um arquivo XML
Geração de um arquivo XML
Para este exemplo, considere o arquivohttp://www.inf.ufpr.br/bmuller/CI320/7/planes1.xml,com schemahttp://www.inf.ufpr.br/bmuller/CI320/7/planes.xsd.
� ,
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Tipos de dados
Tipos de dados
Apresenta 44 tipos de dados divididos em várias categorias(http://www.w3.org/TR/xmlschema11-2/#built-in-datatypes).
Primitivos: http://www.w3.org/TR/xmlschema11-2/#built-in-primitive-datatypes
Derivados: http://www.w3.org/TR/xmlschema11-2/#string-derived-types.
Escopo de declarações:local: é um descendente de algum �lho de Schema.global: é um descendente direto de Schema.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Tipos de dados Simples
Tipos de dados Simples
De�nidos no tag element.Especificação de um tipo simples<xsd:element name="engine" type="xsd:string" />
Uso deste tipo simples<engine> seis cilindros </engine>
Especificação de um tipo simples com default<xsd:element name="engine" type="xsd:string"
default = "seis cilindros" />
Especificação de um tipo simples com valor cte<xsd:element name="engine" type="xsd:string"
fixed = "seis cilindros" />
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Tipos de�nidos pelo usuário
Tipos de�nidos pelo usuário
São restrições aos tipos já criados, chamados facets.
implementados com xsd:simpleType.Especificação de um tipo simples<xsd:simpleType name="firstName">
<xsd:restriction base="xsd:string"><xsd:maxLength value = "10" />
</xsd:restriction></xsd:simpleType>
Outrosexemplos de restriçõeshttp://www.w3schools.com/schema/el_restriction.asp
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Tipos de dados Complexos
Tipos de dados Complexos
É comum que um documento XML incluam elementosaninhados.Existem várias categorias de aninhamento, mas aqui seráabordado somente elementos element-only.Implementados com xsd:ComplexType.tag sequence indica um grupo ordenado de elementos.
Especificação de um tipo Complexo<xsd:complexType name="sports_car">
<xsd:sequence><xsd:element name="make" type="xsd:string" /><xsd:element name="model" type="xsd:string" /><xsd:element name="engine" type="xsd:string" /><xsd:element name="year" type="xsd:string" />
</xsd:sequence></xsd:complexType>
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Exemplo:
Exemplo:
Exemplo:http:
//www.inf.ufpr.br/bmuller/CI320/7/planes1.xml, comschemahttp://www.inf.ufpr.br/bmuller/CI320/7/planes.xsd.
Validação
Existem vários (é só procurar).
http://www.corefiling.com/opensource/
schemaValidate.html
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Visualização
Visualização
Existem três formas de formatar a visualização de umdocumento XML.
Navegador: http://www.inf.ufpr.br/bmuller/CI320/7/planes2.xml.CSS:http://www.inf.ufpr.br/bmuller/CI320/7/planes.xml.XSLT: http://www.inf.ufpr.br/bmuller/CI320/7/xslplane.xml
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
XSLT
XSLT
É uma linguagem de programação que é capaz de formatar umarquivo XML.
construções como xsl:for-each select=�XML user>"
outras construções http://www.w3schools.com/xsl/
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Ajax
Existia antes de 2005, mas sem muito uso prático.
Google Maps, Gmail foram os �catalisadores� do uso.Como funciona:
Web tradicional: ao clicar em uma url, o navegador bloqueia ainteração com o usuário (naquela página) e envia a requisiçãode uma nova.Ajax: (Asynchronous JavaScript and XML)permite comunicação assíncrona com o servidor, que poderesponder com algum conteúdo. Um exemplo simples é umtrecho HTML que deve ser incluído num innerHTML.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Como funciona
considere o códigohttp://www.w3schools.com/ajax/ajax_example.asp.
Ao clicar no botão, a função loadXMLDoc() é disparada.
Esta função contém toda a interação que JS faz com o servidore ao �nal, copia o documento obtido no innerHTML no myDiv.O processo de interação com o servidor pode ser dividido emtrês partes:
Request PhaseResponse DocumentReceiver Phase
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Request Phase - XMLHttpRequest()
Request Phase - XMLHttpRequest()
variavel=new XMLHttpRequest();
Cria o objeto responsável pela comunicação (digamosxmlhttp);Este objeto contém vários métodos, dentre os quaisdestacamos:
abrir conexão com o servidor open;enviar requisição ao servidor send ;veri�car estágio (state) da execução no servidor;veeri�car o estado status da resposta;.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Request Phase - open
Request Phase - open
Criado o objeto, o próximo passo conectá-lo ao servidorxmlhttp.open(<método>,<url>, <Assinc>);
Método: GET/POST; Veja análise em http://www.
w3schools.com/ajax/ajax_xmlhttprequest_send.asp
url: o arquivo no servidor.Assinc: indica se é para ser assíncrono (true) ou síncrono(false).
A última parte da request phase é enviar a requisição:xmlhttp.send(string);
O parâmetro só é usado em requisições com POST.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Response Document
Response Document
A geração do documento a ser respondido ocorre no servidor.
Pode ser via um web server (uma página estática), ou geradodinamicamente por um aplicativo (por exemplo PHP, Java,Rails, etc).
Do lado do cliente, esta reposta é recebida pelo métodoresponseText ou responseXML.
Porém, antes de receber a resposta, é necessário veri�car seela está �pronta� (Receiver Phase)
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Receiver Phase
Receiver Phase
Esta fase é composta por código que analisa se a resposta àsolicitação está disponível e pronta.
As linhas de código que implementam esta fase normalmentesão:
xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200)
{document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}
}
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Receiver Phase - onreadystatechange
Receiver Phase - onreadystatechange
O cliente aguarda a resposta do servidor.Esta resposta é determinada pela mudança da propriedadereadyState.onreadystatechange é uma propriedade à qual se associauma função que deve ser disparada quando o readyState
mudar. Valores válidos:0 request not initialized1 server connection established2 request received3 processing request4 request �nished and response is ready
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Receiver Phase - Status
Receiver Phase - Status
A propriedade status indica se a página foi encontrada (200)ou não (400).agora já é possível entender o código:
xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200)
{document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}
}
O quarto trabalho tratará um documento XML como se fossea resposta de um BD a uma requisição.Exemplo semelhante:
http://www.w3schools.com/ajax/cd_catalog.xml
http://www.w3schools.com/ajax/tryit.asp?filename=
tryajax_xml2Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Json
Json
JSON: JavaScript Object Notation.Assim como XML, é uma linguagem de anotação deinformações.A principal vantagem sobre XML é que o arquivo é maisconciso (menor).legibilidade:http://www.inf.ufpr.br/bmuller/CI320/7/alunos.xml
http:
//www.inf.ufpr.br/bmuller/CI320/7/alunos.json.conversores online (XML <=> Json).Como o tutorial da w3schools é melhor do que o que eupoderia fazer, �assistam� a aula:http://www.w3schools.com/json/.O trabalho 4 pode ser feito com xml ou json como entrada.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Jquery
É uma biblioteca que simpli�ca a programação em javascript.
Instalação: Baixar o jquery http://jquery.com/download/
Incluir o script no docto JS desejado(<script src="jquery-<versão>.js�</script>)
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Sintaxe
Sintaxe
A sintexe indica o elemento HTML desejado e a ação a serefetuada naquele elemento. $(selector).action().
$ indica para usar a biblioteca Jquery.selector procure elemento selector no docto HTML.
http://www.w3schools.com/jquery/jquery_
ref_selectors.asp
action ação a ser feita naquele elemento.http://www.w3schools.com/jquery/jquery_
ref_events.aspexemplos:
$(this).hide() - hides the current element.$("p").hide() - hides all <p> elements.$(".test").hide() - hides all elements with class="test".$("#test").hide() - hides the element with id="test".
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Para evitar que jquery inicie a execução antes de carregar odocto, é necessário indicar explicitamente:
\$(document).ready(function(){jQuery methods go here...
});
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Jquery + Ajax
Jquery + Ajax
Uma grande vantagem de Jquery é a �clareza� do código Ajax:http://www.w3schools.com/jquery/tryit.asp?
filename=tryjquery_ajax_load
O Trabalho 4 pode ser feito com Jquery+Ajax. Para tal, vejaos métodos load, get, post.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery
XML Ajax Jquery
Exemplos:
Exemplos:
Exemplos de uso:http://www.w3schools.com/jquery/tryit.asp?
filename=tryjquery_hide_p
a melhor maneira de aprender é através de exemplos: http://www.w3schools.com/jquery/jquery_examples.aspEu destaco as animações.
jQuery SlidejQuery AnimatejQuery Stop Animations
Com o descrito até aqui, descubra como funciona minhapágina pessoal.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 7 - XML, AJAX, JQuery