Ajax + PHP

Ajax - Introdução

Conceituando e começando a usar Ajax

Bom vamos falar um pouco sobre Ajax. O Ajax significa Monousuário JavaScript and XML. Ajax trata-se basicamente do uso de uma função JavaScript chamada XMLHttpRequest() que interrage com informações retornadas pelo servidor em tempo real.
Ajax a princípio não é uma nova tecnologia ou uma nova linguagem de programação, mas sim, o uso sistemático de algumas tecnologias já existentes para proporcionar maior interatividade aos usuários em páginas WEB. Ajax foi um nome criado em 2005 por Jesse James Garret para o objeto XMLHttpRequest, um componente criado pela Microsoft juntamente com o Internet Explorer 5 como um ActiveX e mais tarde suportado pelos demais dos browsers como um objeto nativo do JavaScript.
É como uma classe com seus métodos e propriedades os quais vamos usar para fazer a interatividade da página em tempo real com outro objeto que possa ser acessado pelo servidor, por exemplo outra página, um script ou mesmo um banco de dados.
Em primeiro lugar, temos de verificar a compatibilidade do browser que visita a página, isto porque há browsers que não suportam Ajax (muito antigos, raro acontecer), mas principalmente porque podem usar diferentes métodos para interpretar o Ajax; O Internet Explorer usa um objeto ActiveX enquanto os restantes usam o objeto XMLHttpRequest, integrado no javascript. É por isto importante detectar qual o browser e carregar os parâmetros conforme.
E aqui está como se faz:

Vantagens e Desvantagens do uso do Ajax
Vantagens
· Menor uso de banda, tornando a navegação muito mais rápida;
· Resposta mais rápida ao solicitar informação;
· Maior interatividade e usabilidade como usuário com menor consumo de recursos.
Desvantagens
· Falta de links permanentes, impossibilitando o usuário salvar um artigo nos favoritos, ou
compartilhar um link para algum conteúdo;
· Botão voltar não funciona ou redireciona a página para um lugar que você não queria;
· Incompatibilidade entre browsers;
· Segurança, quando são feitos muitos processos do lado cliente e não no servidor, há
possibilidades de serem deixadas brechas de segurança, por conta do programador.

Exemplo de Ajax + PHP:

Arquivo: teste.html

<html>
<head>
<title>Ajax + PHP</title>
</head>

<script language="javascript">
var loadingCreateElement=true;
function createXMLHttpRequest() {
 	var bc;
	if(window.XMLHttpRequest) {
		try {
			bc = new XMLHttpRequest();
		} catch(e) {
			bc = false;
		}
	} else if(window.ActiveXObject) {
		try {
			bc = new ActiveXObject("Microsoft.XMLHTTP");
	   } catch(e) {
	   		bc = false;
	   }
	}
	return bc;
}

var req = createXMLHttpRequest();

function sendRequest(id,item) {
	req.open('get', 'base.php?id=' + id +'&item=' + item);
	req.onreadystatechange = handleResponse;
	req.send(null);
}

function handleResponse() {
	if(req.readyState == 4){
		var response = req.responseText;
		if(response.indexOf('<ajaxbase758/>') != -1) {
	 		update1 = response.substring(0, response.indexOf('<ajaxbase758/>'));

update2 = response.substring(response.indexOf('<ajaxbase758/>')+'<ajaxbase758/>'.length, response.length);

			document.getElementById(update1).innerHTML = update2;
		}
	 }
}
</script>
<body>
	<a href="javascript:sendRequest('ajaxbox', '1');">Exibir o ítem 1</a><br/>
	<a href="javascript:sendRequest('ajaxbox', '2');">Exibir o ítem 2</a><br/>
	<div id="ajaxbox"></div>
</body>
</html>

Arquivo: base.php

<?php
   $id = $_GET['id'];
   $item = $_GET['item'];
   if($item == 1) {
   $frase = "Texto qualquer da <font color='red'><b>primeira frase</b></font>";
   } else if($item == 2){
   $frase = "Texto qualquer da <font color='red'><b>segunda frase</b></font>";
   }
   echo $id."<ajaxbase758/>".$frase;
?>

Resultado: