jQuery - Módulo Ajax

Se você não sabe como a jQuery funciona, já falei sobre ela em outros artigos. Não deixe de ler.

Como não poderia deixar de ser, o módulo ajax é extremamente simples e contempla tudo que é necessário para uma requisição assíncrona. Existem diversas funções para fazer o HTTP request, mas a que eu uso normalmente é a $.ajax, que por ser a implementação de mais baixo nível, é a mais flexível.

O melhor modo de mostrá-la é com exemplos:

$.ajax({
  type: "POST",
  url: "index.php",
  data: "id=6",
  success: function(msg){
    alert( msg );
  }
});

Este código faz uma requisição via POST (type) ao arquivo index.php (url), enviando a variável ‘id’ com o valor ‘6’ (data). Ao retornar a página (sucess) é executado um alert. Este é o funcionamento básico do ajax.

O que eu constumo fazer para não ser intrusivo e a página funcionar com ou sem javascript é o seguinte:

1 - Crie o html normalmente.

<a href="index.php&id=6" id="link1">link</a>

2 - Adicione o javascript

$(function () {
  $('#link1').click( function() {
    $.ajax({
      type: "POST",
      url: this.href,
      data: "ajax=1",
      success: function(msg){
        alert( msg );
      }
    });
  });
});

Note que é passado o href do link para a url do ajax e adicionado a variável ajax, que no script em PHP faço os ifs necessários para recarregar a página inteira ou apenas retornar o necessário via ajax.

Lembre-se que o google não lê javascript, portanto faça o site todo em html e depois adicione o javascript. Isso parece difícil no começo, mas depois que pegar o jeito fica muito fácil.