Meio Código

Não sei se o leitor conhece um add-on (ou plugin) do Firefox chamado Firebug. Essa ferramenta é de fundamental importância para o desenvolvimento de sites usando CSS e Javascript, não vou entrar em detalhes. Onde quero chegar é que o Firebug possui um add-on ( isso mesmo um add-on de um add-on ) chamado YSlow, ele ajuda bastante o desenvolvedor a achar onde o site está lento. Ele se baseia em 14 regras, por ordem de importância, para dar notas ao site. Dependendo de como ele estiver em cada uma das regras ele receberá a respectiva nota para a regra. Falarei sobre algumas das regras que esse programa apresenta e como obter uma melhor nota em cada uma delas.

Regra número 1: Fazer o minimo de requisições HTTP possível

Como eu falei acima as regras estão em ordem de importância, ou seja essa é a principal delas. Para diminuir as requisições HTTP do seu site o que pode ser feito é diminuir o número de arquivos externos, como por exemplo, arquivos Javascript, CSS, imagens, etc. No caso o ideal seria que o site tivesse no máximo um arquivo CSS e um Javascript. Já no caso das imagens o que pode ser feito é salvar várias imagens em apenas uma e usando a propriedade background-position do CSS você acessaria cada uma dessas imagens.

exemplo

Regra número 2: Usar mais de um sub-domínio

Você pode criar subdomínios e colocar os arquivos externos de seu site neles. Por exemplo se você tem o domínio meiocodigo.com você pode colocar seus arquivos CSS e javascript num subdomínio a.meiocodigo.com e botar arquivos flash, flv e vídeos por exemplo num subdomínio b.meiocodigo.com. Isso melhora a velocidade do site por que ao fazer isso você acessa mais de um servidor de uma vez, e dessa forma eles têm como enviar seus pedidos mais rapidamente. Para entrar em mais detalhes sobre os benefícios visite este site.

Regra número 3: Adicionar data de expiração no cabeçalho

A data de expiração que pode vir no cabeçalho de arquivos HTTP serve para informar ao browser a data em que ele deve ser desprezado, ou seja se colocarmos uma data futura no cabeçalho o browser será capaz de armazenar em cache o arquivo até a data que você determinar. Existem várias formas de fazer isso. Uma delas é adicionando a meta tag abaixo dentro da tag head de uma página de seu site:

<meta http-equiv=“expires” content=“Tue, 18 Dec 2007 02:18:46 GMT” />

Uma outra que eu particularmente prefiro e acho mais robusta, apesar de que somente serve para servidores Apache ( mas deve ter formas semelhantes para outros servidores ) é acrescentar a seguinte regra ao seu httpd.conf ou .htaccess:

<FilesMatch ".(jpg|jpeg|png|gif)$">
Header set Expires "Tue, 18 Dec 2007 02:18:46 GMT”
</FilesMatch>

Dessa forma eu estou dizendo que apenas os arquivos de imagem do meu site terão data de expiração futura. Você pode usar essa forma para adicionar datas de expiração diferentes para diferentes grupos de arquivos. Por exemplo não é muito interessante colocar uma data muito futura no caso de arquivos .html ou .php, que são arquivos que estão em constante atualização.

mais sobre cache

Regra número 4: Compactar arquivos externos com GZip

Essa é uma das principais regras para quem costuma usar bibliotecas javascript (JQuery, Mootools, etc) com frequência, mas também pode ser usado com qualquer arquivo. A motivo de informação sobre os benefícios da compactação GZip darei um exemplo de uma usando a biblioteca JQuery que tem em torno de 77kb em sua forma normal. Se for usado o compactador de javascript do Yahoo! ele passa a ter em torno de 46kb, e se for usada a compactação GZip em cima desse arquivo a biblioteca fica com incríveis 15kb! É um ganho de 513,33%!

Para compactar seus arquivos usando GZip deve-se ter o mod_deflate instalado no Apache ( a maioria dos hosts possui ) e pode-se usar a seguinte regra em seu httpd.conf ou .htaccess:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/x-javascript text/css text/javascript
</IfModule>

Neste caso estou compactando apenas os arquivos Javascript e CSS, mas claro que pode-se adicionar outros tipos de arquivos. Para mais tipos de arquivos você pode olhar o arquivo mime.type que se encontra na pasta raiz do Apache.

Regra número 5: Colocar arquivos CSS no cabeçalho do arquivo

Foi constatado que as páginas de um site carregam com maior velocidade se os estilos forem colocados na tag head dos arquivos. Isso acontece por que a renderização da página é feita progressivamente, ao contrário do que acontece quando você coloca CSS no final de um arquivo. Um outro fator é o visual, quando um usuário abre uma página e ela vai “visualmente abrindo” ele sabe que a página está chegando em seu browser e ele vai esperar calmamente (até um certo limite, é claro), mas se você colocar o CSS na parte de baixo do site ele será a última coisa a ser lida pelo browser e o usuário terá a sensação que o site não está carregando até que seja finalmente lido o CSS e ele veja o site completo. Além de que existem bugs de renderização no IE, quando se coloca CSS na parte de baixo do site ( em cima ou em baixo, sempre existirão bugs de renderização no IE :S ).

Regra número 6: Colocar scripts no final do arquivo

Os browsers lêem o código fonte dos sites de cima para baixo, e quando lê uma inclusão de um arquivo Javascript, por exemplo, ele tem que baixar todo o arquivo, ler seu conteúdo e interpretar o código, para somente depois continuar com a leitura do resto do site. Por isso quando existem arquivos muito pesados na parte de cima de um site o usuário pode ficar um tempo considerável sem ter nenhuma resposta visual do site, por que o browser está lendo e interpretando linhas de script. Por isso, deve-se evitar ao máximo colocar scripts na parte de cima dos sites. Uma das soluções é incluir um arquivo, usando qualquer linguagem server-side, somente com scripts no final da página, antes do fim da tag body.

Regra número 7: Evitar expressões no CSS

As expressões de CSS são suportadas apenas pelo Internet Explorer e devem ser evitadas por que são executadas toda vez que um evento acontece no site ( toda vez que o mouse mexe, ou damos um click por exemplo) , podendo acarretar em lentidão no computador do usuário. A regra é só usar expressões em casos em que já se tentou de tudo e não se obteve sucesso. Para quem não sabe o que são expressões de CSS ai vai um exemplo de linha de código para uma expressão desse tipo, pesadíssima por sinal:

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Regra número 8: Colocar Javascript e CSS em arquivos externos

Quanto maior os arquivos de Javascript e CSS e quanto maior a quantidade de páginas usando o mesmo conteúdo dos arquivos mais importante é essa regra. O que acontece é que esses arquivos externos são guardados em cache quando possuem data de expiração futura ( regra 3 ) e quando um usuário visita mais de uma página de seu site acaba tendo acesso muito mais rápidos às páginas por possuir os arquivos em cache.

Regra número 9: Reduzir o número pesquisas em DNS

Essa regra vai um pouco contra a regra número dois mas a idéia é não ter um número muito grande de nomes de domínios numa mesma página de um site. Como a requisição a um servidor DNS para saber qual o IP associado a aquele nome demanda um certo tempo isso pode comprometer o desempenho do site. O ideal então é ter entre 2 e 4 nomes de domínios diferentes no mesmo site. Se for menos vai contra a regra número 2 e se for mais vai contra esta regra.

Regra número 10: Comprimir os arquivos Javascript

Existem algoritmos opensource na internet que comprimem scripts Javascript. Eles são especialmente úteis para trechos de código fixos, onde se sabe que não ocorrerão alterações ( o código após a compressão fica difícil de compreender ) como por exemplo no caso de se usar uma biblioteca Javascript. Algumas já fornecem seus códigos comprimidos usando esse tipo de algoritmo. Os mais famosos e eficientes são o YUI-Compressor criado pela Yahoo! e o packer criado por Edwards Packer. Cada um tem sua vantagem, o da Yahoo! tem uma taxa de compressão muito boa e não usa nenhum tipo de script mirabolante para comprimir o arquivo, já o packer tem uma taxa de compressão excelente porém usa um script que faz uso da função eval do javascript (muito conhecida por ser pesada) para a compressão do arquivo e por isso pode comprometer o desempenho do site quando o arquivo comprimido está sendo interpretado pelo browser. Meu preferido, e acredito que de muita gente, é o YUI-Compressor, que além de não comprometer o desempenho do site ainda tem uma taxa de compressão muito boa e pode chegar até a ser melhor do que a do packer se em cima desse arquivo for usada a compressão GZIP, que foi apresentada na regra número 4. Mais informações sobre o benefício do YUI-Compressor com GZIP neste link.

Regra número 11: Evite redirecionamentos

Bom achei essa regra um pouco boba, afinal só se faz redirecionamento em sites quando é realmente necessário. Simplesmente evite-os.

Regra número 12: Remover scripts duplicados

Sem comentários.

Regra número 13: Configurar ETags

As ETags são etiquetas compostas por inode-tamanho-timestamp no caso do Apache 1.3 e 2.x e servem para identificar unicamente um arquivo e isso pode causar um pequeno delay se seus arquivos estiverem hospedados em diversos hosts diferentes. Para remover as ETags de seus arquivos você pode colocar as seguintes linhas em seu arquivo httpd.conf ou .htaccess:

Header unset ETag
FileETag None

Para mais informações sobre ETags visite este site.

Regra número 14: Fazer cache de Ajax

Quando uma aplicação tiver um arquivo Ajax com conteúdo estático o ideal seria usar a regra 3 nesses arquivos. Dependendo da quantidade de arquivos deste tipo seu site pode ficar bastante rápido e intuitivo.

Espero que tenham gostado pessoal, postem por favor! Próximo post estou pensando em adicionar mais uma funcionalidade a biblioteca ajax que já apresentei anteriormente.

Editado:

Pessoal, para a melhor solução para este tipo de problema vejam a regra número 4 deste post.
Se quizer entender mais sobre GZip continue lendo.

Fim da edição.

GZip é uma compactação feita pelo servidor web antes de enviar os arquivos para o browser, mas para que isso ocorra com sucesso deve-se mudar o cabeçalho dos arquivos para indicar que o arquivo aceita esse tipo de compactação, para que o servidor compacte este arquivo e quando esse arquivo chegar no browser, este descompacte-o, tornando-o um arquivo normal como todos os outros novamente.

A motivo de informação sobre os benefícios da compactação GZip darei um exemplo de uma biblioteca muito famosa, a JQuery, que tem em torno de 77kb em sua forma normal. Se for usado o compactador de javascript do Yahoo! ele passa a ter em torno de 46kb, e se for usada a compactação GZip em cima desse arquivo a biblioteca fica com incríveis 15kb!

Vinha a um tempo pensando em uma forma inteligente de compactar arquivos “.js” e “.css” usando GZip. Li vários artigos no Yahoo! e em fórums diversos e não encontrei nada falando a respeito, e quando falavam não era de forma clara, tanto é que só fui ver uma forma inteligente de se fazer isso a uns minutos atrás, quando achei algo a respeito no site do Joomla. É uma extensão que modifica o cabeçalho dos arquivos que são incluídos nas páginas desse sistema. Vendo a extensão eu pude ver o quão simples é modificar o cabeçalho de arquivos .css e .js de forma inteligente. Antes havia pensado em modificar a extensão dos arquivos para “.php” e fazer essas modificações (trabalho de corno), vi que funcionou mas não era viável em um projeto grande.

Bom, falei demais já. Vamos para o código da solução:

  /**
* @author Fábio Miranda Costa  
* Usado para compactar arquivos JS e CSS, acrescenta-os ao cache do browser
* e faz algumas melhorias adicionais. 
*/
$file = $_GET[”file”];
$ext = substr($file,strrpos($file, “.”)+1,strlen($file));
ob_start (”ob_gzhandler”);
if($ext==”js”) $ext=”javascript”;
header( “Content-type: text/”.$ext.”; charset: iso-8859-1“);//não se esqueça de mudar para o charset que você usa
header( “Content-Encoding: gzip,deflate”);
header( “Expires: “.gmdate(”D, d M Y H:i:s”, time() + (24 * 60 * 60)) . ” GMT”);//adiciona 1 dia ao tempo de expiração
header( “ETag: “);//a idéia é apagar o conteúdo da Etag, ver post http://www.meiocodigo.com/2007/12/21/melhorando-o-tempo-de-carregamento-de-um-site/
header( “Cache-Control: must-revalidate, proxy-revalidate” );
include($file);
ob_flush();

Fiz esse código o mais compacto possível, já que será usado em todos os includes de css e js do site.
Não vou explicar muito como funciona, apenas como usá-lo, que é o que importa.
Para usar é muito fácil, apenas crie um arquivos incluindo o código acima, no meu exemplo o arquivo é “file_inc.php”, e coloque no cabeçalho do seu site os includes de arquivos css e javascript seguindo os exemplos abaixo:

para javascript:

<script src="incs/file_inc.php?file=funcs.js" type="text/javascript"></script>

No atributo “src” coloque o caminho para o arquivo “file_inc.php” depois passe a variável “file” usando GET, ou seja adicione o texto “?file=” logo após o nome do arquivo, como pode-se ver no exemplo e depois coloque o endereço do arquivo “.js” que você quer incluir em seu site. Lembrando que esse endereço será sempre relativo ao arquivos file_inc.php, ou seja, se o “file_inc.php” estiver na pasta “inc/includer/” e o arquivo que você quer incluir está na pasta “inc/js/” o “src” do include ficará “inc/includer/file_inc.php?file=../js/funcs.js”.

para css:

<link href="incs/file_inc.php?file=styles.css" rel="stylesheet" type="text/css" />

Com o css é a mesma coisa, o que muda é apenas o óbvio, ou seja, a tag será “link” e o atributo usado passará a ser “href”.

Um problema muito comum para quem usa flash combinado com html e css, apenas para destacar alguns detalhes, é o fato de o flash cobrir o conteúdo da página por padrão. Eu particularmente enfrentei este problema várias vezes ao tentar colocar um menu drop-down que ao ser visualizado deveria cobrir o flash. Mas o menu ficava sempre escondido atrás do flash.

Para solucionar o caso eu utilizei os seguintes conceitos:

• A propriedade z-index do CSS;
• posicionamento do CSS;
• As tags object e embed;
• e o atributo wmode do vídeo.

O z-index pelo que eu tenho percerbido e lido em diversos lugares só funciona em elementos html que estejam “posicionados”, ou seja, tenham o atributo position com o valor absolute, relative ou fixed.

Portanto, colocaremos o video flash dentro de uma div e aplicaremos o seguinte css a ela:

div#flash_div{
position: relative;
z-index: 0;
}

E devemos fazer o mesmo para os objetos que queremos que sobreponham o flash.

Como existem muitas divergências na renderização entre os browsers, é necessário fazer duas chamadas ao vídeo: uma por meio da tag object(a qual é aceita pelo Internet Explorer) e por meio da tag embed(aceita pelo firefox). Ambas as tags terão os mesmos atributos. E dentre eles deve-se setar o wmode do object e do embed para transparent:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="214" height="229" id="monitor" align="">
<param name="movie" value="images/monitor.swf">
<param name="quality" value="high">
<param name=”wmode” value=”transparent”>
<embed wmode=”transparent” src=”images/monitor.swf” quality=”high” bgcolor=”#FFFFFF” width=”214″ height=”229″ name=”monitor” align=”" type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer”></embed>
</object>

Eu resolvi meu problema assim. Com apenas uma ressalva: essa solução não funciona para usuário do Linux, e não tenho conhecimento de nenhuma outra solução. Espero ter ajudado.

Bem… Começarei os posts sobre AJAX com esse “esqueleto” de uma biblioteca, orientada a objeto, para aplicações em AJAX.
O código abaixo deve ser colocado em um arquivo “max_ajax.js” ou outro nome de sua escolha. Mas no final desse comentário eu anexei os 3 arquivos citados aqui neste post.

/**
 * @author Fábio Miranda Costa - www.meiocodigo.com
 * @version 0.26
 * Pequena biblioteca para uso geral em Ajax.
 * bugs conhecidos: Não conversa muito bem com tabelas.
 * Testado com IE 6 e firefox 2.
 * Qualquer dúvida mande e-mail para meiocodigo@gmail.com ou simplesmente comente.
 */

if(typeof window.max === "undefined") var max = new Object();

Esse inicio apenas verifica a existência do objeto max antes de criá-lo para ser possível acrescentar mais de uma das bibliotecas max.
Aos poucos eu irei postando outras bibliotecas que eu fiz para não ficar com muito conteúdo em um só post.

Métodos

Construtor

/**
 * Construtor da classe max.Ajax
 *
 * @param {String} url - a url do arquivo que receberá a chamada ajax
 * @param {Object} options - um objeto que conterá as possíveis opções, entre elas estão:
 * update (opcional) - um id de um nó DOM que receberá a resposta do servidor.
 * onComplete (opcional) - função que será executada logo após o servidor ter respondido ao pedido.
 *
 */
max.Ajax = function(url,options){

Este é o método construtor da classe max.Ajax. Como ele podemos inicializar as variáveis usadas internamente em um objeto desta classe.
Se você quizer aprender alguma coisa sobre Javascript e orientação a objeto vá para o site www.w3schools.com que é um site excelente para iniciantes, aprendi muita coisa lá no inicio.

Bem voltando ao código inicialmente temos a declaração do construtor como sendo uma função que faz as seguintes coisas:

this.xmlHttp = this.createXMLHttp();//criação do objeto que tratará da nossa requisição ao servidor

Cria um XMLHttpObject para fazer as requisições assincronamente ao servidor.

this.url = url;

Inicializa a variável url pertencente a classe com o primeiro valor passado por parâmetro na inicialização do objeto. Este valor deve ser a url para o arquivo que deve ser enviada a requisição Ajax.

this.update = options.update || null;//se não for definida um id para fazer o update, this.update = null, caso contrário this.update = options.update

Inicializa a variável update pertencente a classe com o valor de options.update se esta for declarada ou inicializa ela com null se não tiver sido declarada. Este valor deve ser o id de algum nó DOM no seu HTML, este nó receberá o conteúdo que foi retornado pelo arquivo que recebeu a requisição Ajax. (complicado? :S)

this.onComplete = options.onComplete || function(){};//se tiver sido definida uma função para ser executado ao final da requisição então this.onComplete = options.onComplete senão this.onComplete = null;
};

Inicializa a variável onComplete pertencente a classe com o valor de option.onComplete, que deve ser sempre uma função. A função que for passada por parâmetro nesse caso será executada logo após a requisição Ajax ser finalizada.

Requisição Ajax por GET

max.Ajax.prototype = Object({
	/**
	 * Método para enviar pedido get.
	 */
	get:
		function(){

Este é o método de envio de uma requisição Ajax usando GET.

var thisObj = this;//fazendo referência a este objeto

Inicializamos a variável thisObj com o valor “this”.
Você deve estar pensando: “que babaca… pra que isso?”. Calma eu vou explicar depois por que inicializei essa variável dessa forma.

this.xmlHttp.onreadystatechange = function(){thisObj.updateFunc();};//esta linha define qual será a função que será executada quando nosso objeto xmlHttp tiver seu estado modificado, no caso updateFunc()

Aqui nós definimos um método ( “updateFunc()” ) que será executado toda vez que o estado do nosso XMLHttpObject mudar. Existem no máximo 5 possíveis valores para o estado, dependendo do browser.

• Estado 0 - A requisição assíncrona com o servidor não foi iniciada
• Estado 1 - A requisição foi inicializada
• Estado 2 - A requisição foi enviada
• Estado 3 - A requisição está sendo processsada
• Estado 4 - A requisição foi completada, com sucesso ou não.

Agora vem a explicação do por que inicializar a variável thisObj com “this”. Se eu tivesse feito essa mesma linha dessa forma:

this.xmlHttp.onreadystatechange = function(){this.updateFunc();};

vocês acham que funcionaria?
A resposta é não, por que o “this” neste caso está se referindo ao “this.xmlHttp” por estar dentro de seu escopo, por isso eu fiz uma atribuição ao max.Ajax (var thisObj = this;) e usei ele dentro do escopo do “this.xmlHttp”.

this.url += (this.url.indexOf("?") === -1)?"?":"&";
this.url += "ridwes="+Math.random();//adicionando uma variável randomica ao nosso get para que resolva um problema de cache que acredito que só aconteça no IE, chamei de ridwes por que acredito que ninguem teria uma variavel com esse nome, mas se for o caso...modifique hehe

Essas duas linhas acrescentam uma variável “ridwes” à nossa requisição. Esse nome eu escolhi arbitrariamente achando que ninguem escolheria tal nome para uma variável mas se você tiver escolhido então modifique o nome de sua variável ou modifique o código.
O objetivo de adicionar essa variável com valor randômico é de evitar problemas de cache que acontecem freqüentemente no IE.

this.xmlHttp.open("get",this.url,true);//define que o método usado para a nossa requisição será o 'get', a url do arquivo que receberá a requisição e o true indica que a chamada será assincrona.

Aqui temos, como o nome diz, a abertura de uma conexão com o servidor. O primeiro parâmetro da função open é o método utilizado para a comunicação (”get” ou “post”), o segundo é a url para o arquivo que receberá a chamada do browser, podem ser incluidas variáveis juntamente com ela, e o terceiro é um valor booleano que indica se a chamada será assíncrona (true) ou síncrona (false).

this.xmlHttp.send(null);//finalmente envia nosso pedido
},

E finalmente enviamos a chamada ao servidor, passando null como parametro. Veremos futuramente que se tivessemos usando o método “post” as variáveis seriam passadas por parâmetro ao invez do null.

Update nó DOM

	/**
	 * Método executado toda vez que o xmlHttp mudar de estado.
	 */
	updateFunc:
		function(){

Esta função, como já foi visto neste mesmo post, é executada no evento “readystatechange” do nosso objeto xmlHttp.

if (this.xmlHttp.readyState==4 || this.xmlHttp.readyState=="complete"){//verifica se o estado do xmlHttp é de completo, ou seja se a resposta do servidor já está "em mãos"
	if (this.xmlHttp.status == 200){//verifica se o estatus do objeto é de sucesso, caso contrario o ideal seria mostrar um erro, mostrarei isso no futuro
		if (this.update){
			document.getElementById(this.update).innerHTML = this.xmlHttp.responseText;//joga o texto de resposta do servidor dentro do nó DOM especificado na opção update, se ela existir
		}
		this.onComplete(this.xmlHttp.responseText,this.xmlHttp.responseXML);//executa a função ao final da chamada ajax, também chamada de callback
	}
}
},

Resolvi comentar todas essas linhas juntas porque são muitos “ifs”, um dentro do outro, pode acabar confundindo alguem.
A primeira linha é uma condição que verifica se a propriedade “readyState” do objeto xmlHttp está em seu estado final, ou seja, que a requisição ao servidor já retornou.
A segunda linha verifica se a propriedade estatus, do mesmo objeto xmlHttp, indica sucesso (o número 200 quer dizer que o servidor não retornou nenhuma mensagem de erro, no futuro veremos outros números e o que cada um deles representa).
A terceira linha verifica se foi passado por parâmetro algum id ao se criar um objeto max.Ajax, se tiver passado, na quarta linha o nó DOM com esse id receberá o responseText, ou seja, o texto de resposta do arquivo que chamamos em nossa requisição Ajax.
E finalmente na sexta linha temos a execução do método que foi passado por parâmetro no onComplete.
Se você não estiver entendendo muito bem veja o exemplo logo no final desse post que irá esclarecer melhor como essa biblioteca funciona.

Criação de objeto XMLHttp

	/**
	 * Copiado na cara de pau, peguei de um artigo no Wrox.
	 * Método usado para a criação do objeto XMLHttp, peça chave para o ajax.
	 * Não explicarei em detalhes.
	 */
	createXMLHttp:
		function(){
			if(typeof XMLHttpRequest != "undefined")//entra em todos os navegadores menos o IE
		        return new XMLHttpRequest();
			else if (window.ActiveXObject) {//no caso do IE
		      var aVersions = [ "MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
		      //por cima, o que ela faz é verificar qual a versão mais recente do xmlHttp Object suportada pelo navegador e retorna o objeto
			  for (var i = 0; i < aVersions.length; i++) {
		        try{
		            var oXmlHttp = new ActiveXObject(aVersions[i]);
		            return oXmlHttp;
		        }catch (oError){}
		      }
		    }
			throw new Error("Objeto XMLHttp não pode ser criado.");
		}
});

Não falarei dessa função em detalhes, apenas coloquei alguns comentários aí no código. Mas basicamente essa função cria o objeto xmlHttp.

O código já está com comentários nas linhas mais importantes.
Criei um arquivo para testar a biblioteca com todas as opções possíveis.
Você pode copiar este texto em um arquivo HTML qualquer ou simplesmente baixar os arquivos anexados ao post.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="max_ajax_ref_blog.js" ></script>
<script type="text/javascript">
function testeAjax(thisObj){

var url = "teste.php";//criando uma string cujo valor corresponde à url do arquivo que receberá a requisição Ajax
url += "?valor_teste="+thisObj.innerHTML;//adicionando a variável "valor_teste" à url

var maxAjaxObj = new max.Ajax(url,{update:"teste",onComplete:
function(texto,xml){
alert("O innerHTML é:"+texto);
}
});//aqui estamos criando um objeto max.Ajax passando ao construtor como parâmetros uma url e um objeto com uma propriedade "update"
//cujo valor é o id "teste" indicando que o nó com id="teste" receberá o texto de resposta do servidor, depois temos o onComplete
//que é uma função e será executada logo após a resposta com sucesso do servidor
maxAjaxObj.get();//execução do método get para a nossa chamada Ajax.
}
window.onload = function(){//as função que estão dentro desse escopo só são executadas após todo o carregamento do site
document.getElementById("link_teste").onclick = function(){
		testeAjax(this);
		return false;
	};//aqui nós estamos dizendo que o nó com id="link_teste" escutará esta função no evento "onclick"
}

</script>
</head>

<body>
<a id="link_teste" href="#">Texto para testar :D</a>
<div id="teste"></div>
</body>
</html>

O que esse código faz é enviar um pedido para o arquivo “teste.php” passando por get as variáveis ridwes com valor randomico (explicado no código) e a variável valor_teste que terá como valor a string “Texto para testar :D”.

meu arquivo teste.php ficou:

<?php
echo $_GET["valor_teste"];
?>

ou seja a resposta do servidor será exatamente o valor da variável “valor_teste” que é “Texto para testar :D”.

Traduzindo tudo, quando clicamos no link a requisição ao servidor é enviada quando o browser recebe a resposta da requisição um alerta é mostrado com o texto: “O innerHTML é: Texto para testar :D” e a div de id “teste” receberá também o mesmo texto de reposta do servidor (”Texto para testar :D”) por que eu coloquei como uma de minhas opções update:”teste”.

Espero ter sido claro =/

Qualquer dúvida comente por favor!!

Arquivos:

• max_ajax.zip