ajax - ufscfrank.siqueira/ine5612/seminario2010.2/ajax.pdf · ajax eduardo camilo inacio felipe...
TRANSCRIPT
AJAX
Eduardo Camilo InacioFelipe Gonçalves BotelhoPedro Henrique Rocha UgioniVinicius da Silveira Segalin
UFSC – Novembro, 2010Sistemas de InformaçãoINE5612 – DSO II
Introdução
Internet: rede para troca de documentos (HTML)
Sistema de requisição/resposta síncrono
Aplicações Web totalmente no lado servidor
AJAX – Asynchronous Javascript + XML
Javascript: pequenos tratamentos no lado cliente
Exposição e interação dinâmica usando o DOM
Intercâmbio e manipulação de dados usando XML e XSLT
Recuperação assíncrona de dados usando o objeto XMLHttpRequest e XMLHttpResponse
JavaScript fazendo a junção entre os elementos
Javascript
Linguagem de programação .
Realizar ações dentro do âmbito de uma página web.
Lado do cliente, porque é o navegador que suporta a carga de processamento.
É a linguagem de programação do lado do cliente mais utilizada.
Javascript
Evolução da linguagem: DOM, CSS, XHR
.aspecto1 {border: 1px solid #CCC;padding: 10px 5px 6px 5px;background-color: #E4E4E4;color: #666;}.aspecto2{background-color:#F1D59E;border: #F2BE84 5px solid;color: #666;font-family: “Lucida Sans Unicode”, Verdana, Arial, Georgia;font-size: 12px;width:200px;padding:10px;}
elemento.className = “aspecto1″;
Javascript
Evolução da linguagem: DOM, CSS, XHR
XMLHttpRequest(XHR)
API disponível em linguagens de script para navegadores web
É utilizada para enviar requisições HTTP ou HTTPS diretamente para um servidor web
Carrega os dados de resposta do servidor diretamente de volta ao script.
Os dados podem ser recebidos do servidor como texto XML ou como texto puro.
Dados da resposta podem ser usados diretalmente para alterar o DOM do documento atual ativo na janela do navegador sem carregar um novo documento de página.
Os dados de resposta podem também ser avaliados pelo script do lado cliente.
JSON --> objeto de dados
Javascript
Desenvolvimento de Frameworks: JQuery, Prototype, Mootools, ExtJs
$("#header") id="header“
$("h3") todos <h3>
$("div#content .photo") class="photo“ <div id="content">
$("ul li:first") primeiro<li> do<ul>
jQuery é um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais.Seu lema é: "Escrever menos e fazer mais".
Javascript
Vantagens e desvantagens
Amplamente disseminada
Qualquer computador que tenha um navegador moderno
Roda em diferentes navegadores, sobre diferentes sistemas operacionais
Javascript
Vantagens e desvantagens
falta de padronização;
ambiente de programação pouco amigável (não é fácil depurar programas em JavaScript)
Aplicações
Google, Gmail, GoogleMaps
Microsoft: Hotmail
Sites de comércio eletrônico
Aplicações Web diversas
Exemplovar xmlhttp = null;
function pegaConteudo() {try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {
try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) { xmlhttp = false;
} }
if (!xmlhttp && typeof XMLHttpRequest != 'undefined' ) { try {
xmlhttp = new XMLHttpRequest(); } catch (e) {
xmlhttp = false ; }
}...
Exemplo – continuação...
…
if (xmlhttp) {xmlhttp.onreadystatechange = processadorMudancaEstado;xmlhttp.open("GET", "/dados.html");xmlhttp.setRequestHeader('Content-Type','text/xml');xmlhttp.setRequestHeader('encoding','ISO-8859-1');xmlhttp.send(null);
}}
Exemplo – continuação...
function processadorMudancaEstado () {if ( xmlhttp.readyState == 4) { // Completo
if ( xmlhttp.status == 200) { // resposta do servidor OK document.getElementById ( "div_conteudo"). innerHTML = xmlhttp.responseText ;
} else { alert( "Problema: " + xmlhttp.statusText );
} }
}