This document discusses Ajax with jQuery. It introduces Ajax and its features like page reloads. It then covers making simple and jQuery Ajax requests, both asynchronously and synchronously. Examples of Ajax login and synchronous execution are provided with download links. References to books on jQuery and Ajax with jQuery are given at the end.

1. Conciex 2012 – Ajax com jQuery
CONCIEX 2012
Ajax com jQuery

2. Conciex 2012 – Ajax com jQuery
Introdução
 Javascript e XML Assíncronos;
 Requisições ao Servidor feita pelo Javascript através do
XML desenvolvido por Jessé James Garret utilizando
XMLHttpRequest e XMLHttpResponse;

3. Conciex 2012 – Ajax com jQuery
Características
 Sem “Reload” de página;
 O sistema web se comporta como sistema Desktop
conforme propõe a web 2.0;
 A interação do usuário com o sistema é flexível e contínua;

4. Conciex 2012 – Ajax com jQuery
Requisição Simples

5. Conciex 2012 – Ajax com jQuery
Requisição AJAX

6. Conciex 2012 – Ajax com jQuery
Ajax Sem jQuery
Inicia o AJAX -> loadXMLDoc("arquivo.php");
function loadXMLDoc(url){
req = null; function processReqChange(){
if (window.XMLHttpRequest) { if (req.readyState == 4) {
req = new XMLHttpRequest(); if (req.status == 200) {
req.onreadystatechange = processReqChange; //código de retorno do ajax
req.open("GET", url, true); } else {
req.send(null); (“Erro:n" + req.statusText);
} }
if (req) { }
req.onreadystatechange = processReqChange; }
req.open("GET", url, true);
req.send();
}
}

7. Conciex 2012 – Ajax com jQuery
Ajax com jQuery - $.post() e $.get()
 Importa a biblioteca jQuery:
 <script type=„text/javascript‟ src = „jquery.js‟></script>
 Utiliza a função do jQuery:
 Para requisição via POST:
 $.post(„arquivo.php‟, {parametro1 : valor1, parametro2 :
valor2}, function(data){ código de retorno });
 Para requisição via GET:
 $.get(„arquivo.php‟, {parametro1 : valor1, parametro2 :
valor2}, function(data){ código de retorno });

8. Conciex 2012 – Ajax com jQuery
Em tempo de execução
O javascript executa a função $.POST() de forma
assíncrona, ou seja, a aplicação não espera o retorno da
função para executar as demais linhas de comando.
Para uma execução síncrona, ou seja, o javascript aguardar a
resposta da função para executar as demais linhas de
comando, basta usar a função $.AJAX().

9. Conciex 2012 – Ajax com jQuery
Ajax com jQuery – $.ajax()
 Importa a biblioteca jQuery:
 <script type=„text/javascript‟ src = „jquery.js‟></script>
 Utiliza a função do jQuery:
 $.ajax({
async: false, // execução da função
type: 'post', // método da requisição
data: 'campo='+campo, // parâmetro
url:„arquivo.php',
success: function(data){
// código de resposta da requisição
}
})

10. Conciex 2012 – Ajax com jQuery
Exemplos
 Login via AJAX - Link
 Download dos arquivos:
http://www.yuricosta.com/conciex2012/login.rar
 Execução Síncrono do AJAX – Link
 Download dos arquivos:
http://www.yuricosta.com/conciex2012/ajaxsinc.rar

11. Conciex 2012 – Ajax com jQuery
Referências
 jQuery
 Autor: Maurício Samy Silva
 http://www.livroajaxjquery.com.br/
 Ajax com jQuery
 Autor: Maurício Samy Silva
 http://www.livroajaxjquery.com.br/

12. Conciex 2012 – Ajax com jQuery
OBRIGADO!
Yuri Costa
Home: http://www.yuricosta.com
(31) 8573-4585
contato@yuricosta.com