Programação para a Internet II PHP AJAX. Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt

Tamanho: px

Começar a partir da página:

Download "Programação para a Internet II 2.13. PHP AJAX. Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt"

Neusa Cipriano da Costa
8 Há anos
Visualizações:

1 Programação para a Internet II PHP AJAX Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt

2 Ajax não é uma tecnologia! É um conceito! Consiste no uso do objecto XMLHttpRequest que se encontra implementado nos browsers. Consiste em poder fazer chamadas de servidor através de JavaScript. É extremamente útil quando se pretende carregar apenas partes de uma página, validar formulários sem abandonar a página, etc. Envolve sempre a programação do lado do cliente (JavaScript) e do lado do servidor (PHP, por exemplo). (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para a Internet II 2

É extremamente útil quando se pretende carregar apenas partes de uma página, validar formulários sem abandonar a página, etc.

3 Exemplo cliente (JavaScript) No lado do cliente, começa-se por criar uma instância do objecto XMLHttpRequest (http). O seguinte pedaço de código, garante compatibilidade entre a maior parte dos browsers. var http = false; if (window.xmlhttprequest) { http = new window.xmlhttprequest; else { try { http = new ActiveXObject("MSXML2.XMLHTTP.3.0"); catch(ex) { http = false; if (!http && typeof XMLHttpRequest!= 'undefined') { http = new XMLHttpRequest(); //For Mozilla, Opera Browsers (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para a Internet II 3

xmlhttprequest; else { try { http = new ActiveXObject("MSXML2.XMLHTTP.3.0"); catch(ex) { http = false; if (!http && typeof XMLHttpRequest!

4 Exemplo cliente (JavaScript) (pedido via GET) Deverá prosseguir-se com a criação da função que irá tratar o pedido ao servidor. Caso se pretender fazer o pedido via GET, é necessário criar a string de pedido (endereço + parâmetros e valores ) E indica-se o nome da função que irá tratar a resposta do servidor (handletextgetresponse) function gettextrequest() { // inserir aqui o código específico var nome = document.getelementbyid("nome").value; var url = "get_txt.php?nome="; http.open("get", url + encodeuricomponent(nome), true); // -- http.onreadystatechange = handletextgetresponse; http.send(null); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para a Internet II 4

$(handletextgetresponse) function gettextrequest() { // inserir aqui o código específico var nome = document.getelementbyid("nome").value; var url = "get_txt.php?nome="; http.$

5 Exemplo cliente (JavaScript) (pedido via POST) Deverá prosseguir-se com a criação da função que irá tratar o pedido ao servidor. Caso se pretender fazer o pedido via POST, é necessário criar a string de parâmetros e valores. Os parâmetros e respectivos valores não serão enviados no endereço como acontece com pedidos via GET. E indica-se o nome da função que irá tratar a resposta do servidor (handletextpostresponse) (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para a Internet II 5

Os parâmetros e respectivos valores não serão enviados no endereço como acontece com pedidos via GET.

6 Exemplo cliente (JavaScript) (pedido via POST) (cont.) function textpostrequest(obj) { // inserir aqui o código específico var url = 'post_txt.php'; var poststr = "nome=" + encodeuri(document.getelementbyid("nome").value ); // -- if (http.overridemimetype) http.overridemimetype('text/xml'); http.open('post', url, true); http.setrequestheader("content-type", "application/x-www-form-urlencoded"); http.setrequestheader("content-length", poststr.length); http.setrequestheader("connection", "close"); http.onreadystatechange = handletextpostresponse; http.send(poststr); (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para a Internet II 6

open('post', url, true); http.setrequestheader("content-type", "application/x-www-form-urlencoded"); http.setrequestheader("content-length", poststr.length); http.

7 Exemplo cliente Prossegue-se com a criação da função que irá tratar a resposta do servidor Aqui dependerá muito da situação particular e do que se pretender fazer com a resposta, mas geralmente o tratamento da resposta consiste em colocar valores em caixas de formulário através da propriedade value, ou em outros elementos de HTML (div, td, span, p, etc.) através da propriedade innerhtml. (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para a Internet II 7

caixas de formulário através da propriedade value, ou em outros elementos de HTML (div, td, span, p, etc.

8 Exemplo cliente (cont.) function handletextgetresponse() { if(http.readystate==4){ if(http.status==200){ var result = http.responsetext; // inserir aqui o código específico if (result=='error') document.getelementbyid('result').innerhtml = "Preencha o formulário"; else{ document.getelementbyid('nom').value = result; document.getelementbyid('result').innerhtml =""; // -- (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para a Internet II 8

innerhtml = "Preencha o formulário"; else{ document.getelementbyid('nom').value = result; document.getelementbyid('result').

9 Exemplo cliente Para tudo funcionar, é necessário existir algo chamar a função que faz o pedido ao servidor. Esse pedido é geralmente feito através de reposta a eventos (onclick, onchange, etc.)... </head> <body> <form name="exemplo" method="post"> nome:<input type="text" size="10" name="nome" id="nome" /> <input type="text" size="20" name="nom" id="nom" /> <input type="button" value="go" onclick="javascript:gettextrequest();"/> <span name="result" id="result"></span> </form> </body> </html> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para a Internet II 9

.. </head> <body> <form name="exemplo" method="post"> nome:<input type="text" size="10" name="nome" id="nome" /> <input type="text" size="20" name="nom"

10 Exemplo servidor (PHP) Para terminar, falta fazer o código do lado do servidor (neste caso, o servidor é implementado em PHP, mas poderia ser usada outra qualquer linguagem). Tratamentos de pedidos via GET <?php if (strlen($_get['nome'])>0) print($_get['nome']. " é um nome bonito "); else print("erro");?> Tratamentos de pedidos via POST <?php if (strlen($_post['nome'])>0) print($_post['nome']. " é um nome bonito "); else print("erro");?> Convém referir que a resposta do servidor deverá ser feita sempre através de echo ou print. (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para a Internet II 10

> Tratamentos de pedidos via POST <?php if (strlen($_post['nome'])>0) print($_post['nome']. " é um nome bonito "); else print("erro");?

11 Conclusão Convém referir que ainda não se viu onde entra o X de XML em AJAX. O X de Ajax reporta-se ao facto de a resposta do servidor dever ir na forma de XML, no entanto, por uma questão de facilidade tal poderá não ocorrer Caso a resposta fosse enviada na forma de XML, seria necessário adaptar a função de tratamento da resposta no cliente a este facto. Exemplo de resposta em XML: <?php if (strlen($_get['nome'])>0){ header('content-type: text/xml'); echo "<?xml version=\"1.0\" standalone=\"yes\"><pessoa><nome>". $_GET['nome'])>."</nome></pessoa>"; else{ print("erro");?> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para a Internet II 11

$php if (strlen($_get['nome'])>0){ header('content-type: text/xml'); echo "<?xml version=\"1.0\" standalone=\"yes\"><pessoa><nome>". $_GET['nome'])>.$

Documentos relacionados

PROGRAMAÇÃO PARA INTERNET. Fonte: Raul Paradeda

PROGRAMAÇÃO PARA INTERNET. Fonte: Raul Paradeda PROGRAMAÇÃO PARA INTERNET Introdução à AJAX Fonte: Raul Paradeda INTRODUÇÃO Para entender o que é o AJAX é necessário ter o prévio conhecimento de: HTML / XHTML; Javascript; CSS; XML. INTRODUÇÃO Ao pesquisar