Funções Utilitárias para trabalhar com Ajax - Ajax é uma sigla para Asynchronous JavaScript and XML - Basicamente é um mét...
$.ajax( settings  ) async cache complete data dataType error success timeout type url Inicia uma solicitação Ajax usando a...
$.ajax({ url: url, dataType:  'JSON' , cache:  false ,   async:  false , data: {nome : “Red”, cidade: “Caucaia ”} , succes...
$.ajaxSetup(properties) Estabelece um conjunto de propriedades passadas como os padroes para  chamadas Ajax subsequentes. ...
$.load(url, parameters, callback) Carrega a resposta da requisição no elemento coincidente $('#result').load( 'arquivo-htm...
$.get (url, parameters, callback) Executa uma requisição GET para a URL informada.   $.post (url, parameters, callback) Ex...
a=1&b=2&c=3&d=4&e=5 $.serialize() Transforma os dados do formulário em uma string de requisição <form> <div>< input  type=...
[   { name : 'campo1', value : 123 },   { name : 'campo2', value : 'olá mundo!' }   ]   Transforma os dados do formulário ...
Funções Globais Ajax São funções que permitem associar eventos do Ajax  nos elementos coincidentes $().ajaxStart(callback)...
Obrigado!
Próximos SlideShares
Carregando em…5
×

Apresentação j query6

1.041 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.041
No SlideShare
0
A partir de incorporações
0
Número de incorporações
211
Ações
Compartilhamentos
0
Downloads
16
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Async: padrao true Cache: padrao true – se for false força a página a não fazer cache. Complete: funcao chamada na finalizacao da requisicao. Data: passar o parametros a serem processados na solicitacao. DataType: Tipo de dado que é esperado como retorno pela resposta (xml, json, html, text) Error: funcao chamada se a requisicao falhar Success: funcao chamada quando a requisicao obtiver sucesso Timeout: para definir o tempo limite da requisicao Type: tipo da requisicao (GET ou POST). Se omitido é GET Url a url da solicitacao ajax:
  • Serve para estabelecer um conjunto padrao de propriedades para as chamadas ajax subsequentes. Se alguma solicitacao ajax subsequente definir alguma opção que já estiver sido definida na funcao ajaxSetup, para essa requisicao em particular vale a propriedade definida na funcao ajax. Pode-se colocar o ajax setup em qualquer ponto da página, mas comumente é colocada dentro da funcao ready da página.
  • A requisição padrão para tráfego de dados é GET, contudo caso sejam passados parâmetros adicionais a requisição torna-se POST.
  • São chamados métodos ajax de conveniencia São encapsulamentos do metodo ajax Vem com algumas opções pre-selecionadas do ajax
  • Serve para serializar os dados do formulário Serializa em forma de String
  • Devolve um objeto no formato chave/valor
  • Start – quando a chamada ajax é iniciada Send – Na hora que a requisicao estiver sendo mandada ao serivdor Success – depois que a solicitacao foi devolvida do servidor com código de sucesso Error – codigo de erro Complete – depois que a solicitacao foi devolvida do servidor e que as funcoes de sucesso e erro forem invocadas Stop – é executada depois que todo o processamento ajax está completo.
  • Apresentação j query6

    1. 2. Funções Utilitárias para trabalhar com Ajax - Ajax é uma sigla para Asynchronous JavaScript and XML - Basicamente é um método ou conjunto de métodos para comunicação com o servidor sem a necessidade de recarregamento da página.
    2. 3. $.ajax( settings ) async cache complete data dataType error success timeout type url Inicia uma solicitação Ajax usando as opções passadas
    3. 4. $.ajax({ url: url, dataType: 'JSON' , cache: false , async: false , data: {nome : “Red”, cidade: “Caucaia ”} , success: function (obterDados) { if (obterDados.achou == “true”){ alert(“Cidadão procurado, traz o saco 02”); }else{ alert(“Cidadão de bem, pode liberar”); } }, error: function () { alert(“Não foi possível localizar este possível meliante”); } });
    4. 5. $.ajaxSetup(properties) Estabelece um conjunto de propriedades passadas como os padroes para chamadas Ajax subsequentes. $.ajaxSetup({ type: 'POST' , timeout: 5000, dataType: 'JSON' }); $.ajax({ data: parametros } , function (resposta){...} ); $.ajax({ type: 'POST' , timeout: 5000, dataType: 'JSON' data: parametros }, function (resposta){...});
    5. 6. $.load(url, parameters, callback) Carrega a resposta da requisição no elemento coincidente $('#result').load( 'arquivo-html.html'); $('#result').load('arquivo-html.html #fragmentoHTML'); $('#result').load('arquivo.jsp', { 'cidades[]': ['Caucaia', 'São Bernardo'] }); $('#result').load('arquivo.json', callback(){});
    6. 7. $.get (url, parameters, callback) Executa uma requisição GET para a URL informada. $.post (url, parameters, callback) Executa uma requisição POST na URL informada. $.getJSON(url, parameters, callback) Executa uma requisição GET com expectativa de retorno de um JSON. $.getJSON(url, function (retorno){...}); $.ajax({ url: url, dataType: 'json', data: data, success: function (retorno){...}); }); Métodos Ajax de conveniência ==
    7. 8. a=1&b=2&c=3&d=4&e=5 $.serialize() Transforma os dados do formulário em uma string de requisição <form> <div>< input type=&quot;text&quot; name=&quot;a&quot; value=&quot;1&quot; id=&quot;a&quot; /></div> <div>< input type=&quot;text&quot; name=&quot;b&quot; value=&quot;2&quot; id=&quot;b&quot; /></div> <div>< input type=&quot;hidden&quot; name=&quot;c&quot; value=&quot;3&quot; id=&quot;c&quot; /></div> <div> < textarea name=&quot;d&quot; rows=&quot;8&quot; cols=&quot;40&quot;>4</textarea> </div> <div> < select name=&quot;e&quot;> <option value=&quot;5&quot; selected=&quot;selected&quot;>5</option> <option value=&quot;6&quot;>6</option> <option value=&quot;7&quot;>7</option> </select> </div> </form> a=1&b=2&c=3&d=4&e=5
    8. 9. [ { name : 'campo1', value : 123 }, { name : 'campo2', value : 'olá mundo!' } ] Transforma os dados do formulário em um objeto array chave/valor $.serializeArray() [ {name: a , value: 1}, {name: b , value: 2}, {name: c , value: 3}, {name: d , value: 4}, {name: e , value: 5} ]
    9. 10. Funções Globais Ajax São funções que permitem associar eventos do Ajax nos elementos coincidentes $().ajaxStart(callback) $().ajaxSend(callback) $().ajaxSuccess(callback) $().ajaxError(callback) $().ajaxComplete(callback) $().ajaxStop(callback)
    10. 11. Obrigado!

    ×