Quando passei ajax para meus alunos todos ficaram espantados pois a página almentava, aparecia loading..., em fim fora eles varios me pedirão para postar um artigo sobre, e segue a baixo ^^
caso sua página sejá em php inicie assim:
<?php header("Content-Type: text/html; charset=ISO-8859-1",true) ?>
ou
<?php header("Content-Type: charset=UTF-8) ?>
começando pra valer:
<html>
<head>
<title> teste </title>
<script type="text/javascript">
function ajaxInit() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined' ) {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false ;
}
}
return xmlhttp;
}
function url_encode(str) {
var hex_chars = "0123456789ABCDEF";
var noEncode = /^([a-zA-Z0-9\_\-\.])$/;
var n, strCode, hex1, hex2, strEncode = "";
for(n = 0; n < str.length; n++) {
if (noEncode.test(str.charAt(n))) {
strEncode += str.charAt(n);
} else {
strCode = str.charCodeAt(n);
hex1 = hex_chars.charAt(Math.floor(strCode / 16));
hex2 = hex_chars.charAt(strCode % 16);
strEncode += "%" + (hex1 + hex2);
}
}
return strEncode;
}
// url_decode version 1.0
function url_decode(str) {
var n, strCode, strDecode = "";
for (n = 0; n < str.length; n++) {
if (str.charAt(n) == "%") {
strCode = str.charAt(n + 1) + str.charAt(n + 2);
strDecode += String.fromCharCode(parseInt(strCode, 16));
n += 2;
} else {
strDecode += str.charAt(n);
}
}
return strDecode;
}
function getSecoes(pagina,layer) {
document.getElementById(layer).innerHTML = "Carregando";
ajax = ajaxInit();
//aqui estão as propriedade que puxão sua página//
ajax.open("GET",pagina+".html", true);
ajax.onreadystatechange = function() {
if(ajax.readyState == 4 && ajax.status == 200) {
var resultado = ajax.responseText;
resultado=resultado.replace(/\+/g," ");
resultado = unescape(resultado);
document.getElementById(layer).innerHTML = url_decode(resultado);
}
}
ajax.send(null);
}
</script>
<-- aqui estão as propriedades do div ou seja largura e altura e posição ->
<style type="text/css">
#resultado{
position:relative;
float:left;
overflow:auto;
width:500px;
}
</style>
</head>
<body>
<a href="#" onclick="getSecoes('pagina','resultado')"> clique aqui </a>
<div id="resultado">
</div>
</body>
</html>
// pagina.html isso é só para teste tá
// na pagina.htm somente o conteudo, pois sera inserida dentro da pagina principal por ajax
para iniciar carregando a pagina no div,
mude o <body> para <body onload="getSecoes('pagina','camada')">