Programação Web Aula 7 - XML, AJAX, JQuery · 1 XML De nições Sintaxe Exemplo ... Programação...

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:



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.



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.



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.



http://www.w3schools.com/xml/xml_validator.asp

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>



XML Ajax Jquery

Dilemas

Dilemas

Como a sintaxe de um documento XML é de�nida pelousuário, isto pode levar a alguns dilemas:

<patient name = "Ermenegildo da Costa">...</patient>

<patient>

<name> Ermenegildo da Costa </name>...</patient>

<patient>

<name><first> Ermenegildo </first><middle> da </middle><last> Costa </last>

</name></patient>

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.



http://en.wikipedia.org/wiki/List_of_XML_markup_languages

http://en.wikipedia.org/wiki/List_of_XML_markup_languages

http://www.w3schools.com/xml/xml_dtd.asp

http://www.w3schools.com/xml/xml_schema.asp

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;



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.



http://www.w3.org/2001/XMLSchema.xsd

http://www.w3schools.com/Schema/schema_howto.asp

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.



http://www.inf.ufpr.br/bmuller/CI320/7/planes1.xml

http://www.inf.ufpr.br/bmuller/CI320/7/planes.xsd

http://www.w3schools.com/schema/el_schema.asp

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.

� ,





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.



http://www.w3.org/TR/xmlschema11-2/#built-in-datatypes

http://www.w3.org/TR/xmlschema11-2/#built-in-datatypes

http://www.w3.org/TR/xmlschema11-2/#built-in-primitive-datatypes

http://www.w3.org/TR/xmlschema11-2/#built-in-primitive-datatypes

http://www.w3.org/TR/xmlschema11-2/#string-derived-types

http://www.w3.org/TR/xmlschema11-2/#string-derived-types

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" />



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



http://www.w3schools.com/schema/el_restriction.asp

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>



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






http://www.corefiling.com/opensource/schemaValidate.html

http://www.corefiling.com/opensource/schemaValidate.html

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





http://www.inf.ufpr.br/bmuller/CI320/7/planes.xml

http://www.inf.ufpr.br/bmuller/CI320/7/xslplane.xml

http://www.inf.ufpr.br/bmuller/CI320/7/xslplane.xml

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/



http://www.w3schools.com/xsl/

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.



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



http://www.w3schools.com/ajax/ajax_example.asp

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;.



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.



http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

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)



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;}

}



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



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


http://www.w3schools.com/ajax/cd_catalog.xml

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_xml2

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_xml2

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.



http://www.inf.ufpr.br/bmuller/CI320/7/alunos.xml

http://www.inf.ufpr.br/bmuller/CI320/7/alunos.json

http://www.inf.ufpr.br/bmuller/CI320/7/alunos.json

http://www.w3schools.com/json/

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>)



http://jquery.com/download/

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".



http://www.w3schools.com/jquery/jquery_ref_selectors.asp

http://www.w3schools.com/jquery/jquery_ref_selectors.asp

http://www.w3schools.com/jquery/jquery_ref_events.asp

http://www.w3schools.com/jquery/jquery_ref_events.asp

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...

});



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.



http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_load

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_load

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.



http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_p

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_p

http://www.w3schools.com/jquery/jquery_examples.asp

http://www.w3schools.com/jquery/jquery_examples.asp

Programação Web Aula 7 - XML, AJAX, JQuery · 1 XML De nições Sintaxe Exemplo ... Programação...

Documents

Transcript of Programação Web Aula 7 - XML, AJAX, JQuery · 1 XML De nições Sintaxe Exemplo ... Programação...