Ajax com PHP Sem XmlHttpRequest
E ae Familia Imasters, beleza??? Esse post eh pra ensinar a fazer AJAX sem o objeto XmlHttpRequest. O primeiro exemplo eh pra fazer requisições internas e o segundo requisições externas. Espero q gostem!!! Exemplo 01 - Requisição Interna page1.php -> Pagina que será visualizad sem refresh
<?php$html = 'O AJAX foi executado com sucesso sem<br> o auxilio do XmlHttpRequest Object<br><a href=\"index2.htm\">Executar AJAX Requisição Externa</a>'.?>div = document.getElementById('interno'). div.innerHTML = '<?php echo $html.?>'. engine.js -> arquivo que faz a magica // pega a url baseurl = document.location.href. xend = url.lastIndexOf("/") + 1. var base_url = url.substring(0, xend). function ajax_do (url) { // verifica se a url inicia com http if (url.substring(0, 4)!= 'http') { url = base_url + url. } // cria um novo elemento JS var jsel = document.createElement('SCRIPT'). jsel.type = 'text/javascript'. jsel.src = url. // Adiciona o elemento JS (portanto executando a chamada "AJAX) document.body.appendChild (jsel). }
index.htm -> pagina que executa o AJAX Requisição Interna <html> <head> <title>Aprendendo a Usar AJAX sem XmlHttpRequest Object</title> <script type="text/javascript" src="engine.js"></script> </head> <body style="font: 12px Tahoma. color:#003399. font-weight:bold"> <center><input type="button" onclick="ajax_do ('page1.php'). " value="Executar AJAX - Requisição Interna" /></center> <center>O Conteudo aparecerá abaixo dessa linha</center><br><br> <div id="interno" style="font: 12px tahoma. text-align:center. color:#FF0000. font-weight:bold. "><br> </div> </body></html> Exemplo 02 - Requisição Externa Nesse segundo exemplo, foi implementado uma nova funcao no engine.js e um arquivo que verifica e trata o arquivo externo. Segue abaixo. index2.htm -> pagina que executa o AJAX Requisição Externa <html> <head> <title>Aprendendo a Usar AJAX sem XmlHttpRequest Object</title> <script type="text/javascript" src="engine.js"></script> </head> <body style="font: 12px Tahoma. color:#003399. font-weight:bold"> <center><input type="button" onclick="ajax_get ('http://www.imasters.com.br','externo'). " value="Executar AJAX - Requisição Externa" /></center> <center>O Conteudo aparecerá abaixo dessa linha<br><a href="index.htm">Executar AJAX - Requisição Interna</a></center><br><br> <div id="externo" style="font: 12px tahoma. text-align:center. color:#FF0000. font-weight:bold. "><br> </div> </body></html>
engine.js -> arquivo que faz a magica implementado
// funcao utilizada no exemplo anterior// pega a url baseurl = document.location.href. xend = url.lastIndexOf("/") + 1. var base_url = url.substring(0, xend). function ajax_do (url) { // verifica se a url inicia com http if (url.substring(0, 4)!= 'http') { url = base_url + url. } // cria um novo elemento JS var jsel = document.createElement('SCRIPT'). jsel.type = 'text/javascript'. jsel.src = url. // Adiciona o elemento JS (portanto executando a chamada "AJAX) document.body.appendChild (jsel). }// Funcao que faz a requisição do arquivo externo// Pega conteudo externofunction ajax_get (url, el) { // Verifica se o elemento passado eh um objeto ou uma id-string? if (typeof(el) == 'string') { el = document.getElementById(el). } // Valida el if (el == null) { return false. } // verifica se a url inicia com http if (url.substring(0, 4)!= 'http') { url = base_url + url. } // Cria a URL a ser requisitada getfile_url = base_url + 'getfile.php?url=' + escape(url) + '&el=' + escape(el.id). // Ajax em acao ajax_do (getfile_url). return true. }getfile.php -> arquivo que verifica e trata o arquivo externo
<?php// recebe a URL e a divif (!isset($_GET['url'])) { die(). } else { $url = $_GET['url']. }if (!isset($_GET['el'])) { die(). } else { $el = $_GET['el']. }// Verifica se a URL comeca com httpif (substr($url, 0, 4)!= 'http') { // Mensagem de erro echo 'alert(\'Erro de segurança:. URL Incorreta!\'). '. die(). }// Tenta e pega o conteudo$data = @file_get_contents($url). if ($data === false) { // Set error echo 'alert(\'Não foi possivel localizar "'. $url. '"\'). '. die(). }// Escape dos dados$data = str_replace("'", "\'", $data). $data = str_replace('"', "'+String.fromCharCode(34)+'", $data). $data = str_replace ("\r\n", '\n', $data). $data = str_replace ("\r", '\n', $data). $data = str_replace ("\n", '\n', $data).?>el = document.getElementById('<?php echo $el.?>'). el.innerHTML = '<?php echo $data.?>'. Veja o Resultado: [AJAX sem XmlHttpRequest Object](http://www.yeah.infoceara.com/ajax) Discussão (16)
Carregando comentários...