05 mar 2014
(Parte 6) Requisição AJAX utilizando a função $.getScript()
Olá pessoal, hoje será postado explicações da última função da série de artigos que venho publicando sobre requisições AJAX com jQuery, a função que será explicada hoje será $.getScript().Essa função utiliza o método HTTP GET para enviar as requisições e aceita como retorno especificamente um arquivo JavaScript. Podemos requisitar arquivos em servidores remotos, se o mesmo estiver disponível, plugins, dados em arquivos JavaScript e etc.
Alguns posts sobre AJAX que podem interessar:
Sintaxe básica: $.getScript(url[,success(data, textStatus, jqXHR)])
url: Essa chave recebe uma string com a URL para onde será enviada a requisição, essa chave é obrigatória.
Exemplo:
Exemplo:
|
1 2 3 |
$.getScript({ "cadastro/arquivo.js" }) |
success: Seu valor é uma função que será executada quando a requisição for completada com sucesso. Essa função aceita 3 argumentos, sendo o primeiro os dados retornados pela requisição, segundo uma string contendo o status e terceiro um objeto XMLHttpRequest, função opcional.
Exemplo:
Exemplo:
|
1 2 3 |
$.getScript({ function(data, textStatus, jqXHR){...} }) |
Requisitando CEP com $.getScript()
O exemplo desse artigo tem como objetivo consultar CEPs em um servidor através da requisição $.getScript(), o retorno da requisição será um arquivo JavaScript. Esse tipo de funcionalidade é muito utilizado em sites de comércio eletrônico, onde o usuário preenche o CEP e automaticamente são preenchidos os campos Rua, Bairro, Cidade e Estado.
Vamos utilizar a consulta online do site http://www.republicavirtual.com.br/, eles disponibilizam o retorno em vários formatos, mas para nosso exemplo vamos precisar do retorno em JavaScript. Para consultar basta enviar uma url com cep e o formato desejado para retorno, posteriormente tratar os dados que foram retornados. Abaixo segue o exemplo de retorno em JavaScript disponibilizado pelo próprio site:
Nosso exemplo será bem simples, serão construídos uma página index.php e uma folha de estilo CSS. Essa página index.php vai disparar a requisição e tratar os dados de retorno, observem que verifico o valor do elemento resultado, se for igual a 1 significa que existem dados para aquele CEP, senão um alert() é disparado com a mensagem “CEP não encontrado!”. Segue abaixo os scripts:
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Consulta CEP - $.getScript()</title> <link rel="stylesheet" type="text/css" href="css/estilo.css"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Evento click do botão 'Consultar' $('#botao').click(function(){ // Verifica se foi informado um valor no campo CEP if($.trim($("#cep").val()) != ""){ // Prepara e atribui a URL para variável var url = "http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#cep").val(); // Chama a função $.getScript() $.getScript(url, function(){ if(resultadoCEP["resultado"] == 1){ $("#rua").val(unescape(resultadoCEP["logradouro"])); $("#bairro").val(unescape(resultadoCEP["bairro"])); $("#cidade").val(unescape(resultadoCEP["cidade"])); $("#uf").val(unescape(resultadoCEP["uf"])); }else{ alert("CEP não encontrado!"); } } ); } }); }); </script> </head> <body> <div id="conteudo"> <h3>Requisição AJAX utilizando a função $.getScript()</h3> <hr> <fieldset> <label>CEP:</label> <input type="text" id="cep" placeholder="Informe o CEP" size="10"/> <label>Rua:</label> <input type="text" id="rua" placeholder="Informe a Rua" size="30"/> <label>Número:</label> <input type="text" id="numero" placeholder="Informe o Número" size="10"/> <label>Bairro:</label> <input type="text" id="bairro" placeholder="Informe o Bairro" size="20"/> <label>Cidade:</label> <input type="text" id="cidade" placeholder="Informe a Cidade" size="20"/> <label>UF:</label> <input type="text" id="uf" placeholder="Informe o Estado" size="10"/> <input type="button" id="botao" value="Consultar"/> </fieldset> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Consulta CEP - $.getScript()</title> <link rel="stylesheet" type="text/css" href="css/estilo.css"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Evento click do botão 'Consultar' $('#botao').click(function(){ // Verifica se foi informado um valor no campo CEP if($.trim($("#cep").val()) != ""){ // Prepara e atribui a URL para variável var url = "http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#cep").val(); // Chama a função $.getScript() $.getScript(url, function(){ if(resultadoCEP["resultado"] == 1){ $("#rua").val(unescape(resultadoCEP["logradouro"])); $("#bairro").val(unescape(resultadoCEP["bairro"])); $("#cidade").val(unescape(resultadoCEP["cidade"])); $("#uf").val(unescape(resultadoCEP["uf"])); }else{ alert("CEP não encontrado!"); } } ); } }); }); </script> </head> <body> <div id="conteudo"> <h3>Requisição AJAX utilizando a função $.getScript()</h3> <hr> <fieldset> <label>CEP:</label> <input type="text" id="cep" placeholder="Informe o CEP" size="10"/> <label>Rua:</label> <input type="text" id="rua" placeholder="Informe a Rua" size="30"/> <label>Número:</label> <input type="text" id="numero" placeholder="Informe o Número" size="10"/> <label>Bairro:</label> <input type="text" id="bairro" placeholder="Informe o Bairro" size="20"/> <label>Cidade:</label> <input type="text" id="cidade" placeholder="Informe a Cidade" size="20"/> <label>UF:</label> <input type="text" id="uf" placeholder="Informe o Estado" size="10"/> <input type="button" id="botao" value="Consultar"/> </fieldset> </div> </body> </html><script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="mce-no/type"></script><script type="mce-text/javascript">// <![CDATA[ $(document).ready(function(){ // Evento click do botão 'Consultar' $('#botao').click(function(){ // Verifica se foi informado um valor no campo CEP if($.trim($("#cep").val()) != ""){ // Prepara e atribui a URL para variável var url = "http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#cep").val(); // Chama a função $.getScript() $.getScript(url, function(){ if(resultadoCEP["resultado"] == 1){ $("#rua").val(unescape(resultadoCEP["logradouro"])); $("#bairro").val(unescape(resultadoCEP["bairro"])); $("#cidade").val(unescape(resultadoCEP["cidade"])); $("#uf").val(unescape(resultadoCEP["uf"])); }else{ alert("CEP não encontrado!"); } } ); } }); }); // ]]></script> |
estilo.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
body{ padding: 20px; margin: ; font-family: Verdana; background-color: #ccc; } #conteudo{ background: white; margin: auto; width: 900px; min-height: 300px; border-radius: 10px; border: 1px solid #5a5353; padding: 10px; } fieldset{ border: 5px solid #5a5353; border-radius: 10px; padding: 10px; width: 450px; margin: auto; } label{ line-height: 30px; text-align: left; width: 50px; padding-right: 30px; padding-bottom: 15px; } label, input{ display: block; float: left; } h3{ text-align: center; } br { clear: left; } |
Vamos ao teste, inicialmente a página sem consulta:
Agora foi informado o CEP do exemplo exibido no site república virtual e pressionado o botão Consultar:
Abaixo segue mensagem de um CEP digitado aleatoriamente “4444”:
Bom pessoal, nesse artigo demonstrei um exemplo prática para utilização da função $.getScript() em requisições AJAX, é claro que essa função pode atender a diversas necessidades. É sempre bom salientar que as funções $.get(), $.post(), $.getJSON e $.getScript() possuem um efeito colateral em seu uso, se o arquivo requisitado não estiver disponível a requisição possivelmente não será encerrada, já na função $.ajax() existe uma verificação de erros o que impede esse tipo de problema.
Chegamos ao fim dessa série de 6 artigos sobre requisições AJAX com jQuery, espero que seja de utilidade as informações demonstradas e claro que existem muito mais informação do que foi postado nesses artigos. Deixo como indicação de leitura da documentação jQuery para AJAX, na minha opinião não existe material mais completo que esse.
Até a próxima …
