Requisitando uma página em ajax

A finalidade deste exemplo é mostra para os iniciantes em ajax como é simples efetuar uma requisição usando o ajax.

A primeira coisa a fazer é verificar se o browser do cliente suporta o ajax e instânciar o objeto.

var ajax;
try {
  // Verifica se o Firefox, Opera 8.0+, Safari suporta o ajax
  ajax = new XMLHttpRequest();
} catch (e) {
  // Verifica se o Internet Explorer suporta o ajax
  try {
    ajax = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      ajax = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      alert("Seu browser não dar suporte ao AJAX!");
      return false;
    }
  }
}

Agora vamos processar nosso ajax, observe que neste exemplo estamos tratando o readyState 4, que seguinifica que a requisição foi bem sucedida.

// Processa requisição ajax
ajax.onreadystatechange = function() {
  if(ajax.readyState == 4) {
    document.getElementById('campoResposta').innerHTML = ajax.responseText;
  }
}
ajax.open('POST', 'time.php', true);
ajax.send(null);

Neste exemplo o ajax requisita uma página que contém uma função date(‘H:i:s’)
time.php

date('H:i:s')

Agora juntamos as partes do objeto ajax em uma função para efetuarmos a requisição.

function ajaxSend() {
  var ajax;
  try {
    // Firefox, Opera 8.0+, Safari
    ajax = new XMLHttpRequest();
  } catch (e) {
      // Internet Explorer
      try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
          alert("Seu browser não dar suporte ao AJAX!");
          return false;
        }
      }
  }

  // Processa requisição ajax
  ajax.onreadystatechange=function() {
    if(ajax.readyState == 4) {
      document.getElementById('time').innerHTML = 'Time: ' + ajax.responseText;
    }
  }
  ajax.open('POST', 'time.php', true);
  ajax.send(null);
}