O documento descreve funções utilitárias do jQuery para realizar requisições Ajax de forma assíncrona sem recarregar a página, como $.ajax(), $.ajaxSetup(), $.load(), $.get(), $.post() e $.serialize(). Também explica como transformar dados de formulário em string ou objeto para envio por Ajax.
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.
3. $.ajax( settings ) async cache complete data dataType error success timeout type url Inicia uma solicitação Ajax usando as opções passadas
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”); } });
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){...});
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(){});
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 ==
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="text" name="a" value="1" id="a" /></div> <div>< input type="text" name="b" value="2" id="b" /></div> <div>< input type="hidden" name="c" value="3" id="c" /></div> <div> < textarea name="d" rows="8" cols="40">4</textarea> </div> <div> < select name="e"> <option value="5" selected="selected">5</option> <option value="6">6</option> <option value="7">7</option> </select> </div> </form> a=1&b=2&c=3&d=4&e=5
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} ]
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)
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.