Descriere: Exemplu de incarcare a continutului unei pagini prin AJAX
Download:
Autor: Anonim
Sursa (Link-ul oficial): Propria parere: Folositor.
Tutorialul:
În exemplul următor veţi vedea cum puteţi încărca conţinutul unei pagini prin intermediul AJAX. Pentru început stabilim un tabel cu 2 coloane, una pentru meniul lateral şi a doua coloană în care se va afişa conţinutul paginii.
Cod: Selectaţi tot
<table width="100%" border="0" cellspacing="3" cellpadding="0"><br />
<tr><br />
<td width="20%" valign="top">Meniu</td><br />
<td width="80%" valign="top">Continutul paginii: </td><br />
</tr><br />
<tr><br />
<td valign="top"><a href="pagina_1.php" id="cerere_pagina_1"
onClick="afiseaza_pagina('pagina_1.php'); return false">Pagina 1</a><br><br />
<a href="pagina_2.php" id="cerere_pagina_2"
onClick="afiseazaPagina('pagina_2.php'); return false">Pagina 2</a><br><br />
<a href="pagina_3.php" id="cerere_pagina_3"
onClick="afiseazaPagina('pagina_3.php'); return false">Pagina 3</a> </td><br />
<td valign="top"><span id="locul_de_afisare"> </span></td><br />
</tr><br />
</table> Pe coloana 2 avem un tag html în care se va afişa pagina cerută. Observaţi că am specificat un id la tagul respectiv, de care o să vorbim mai jos.
În continuare, sunt funcţiile JavaScript care prelucrează cererile şi returnează rezultatul:
Cod: Selectaţi tot
<script language="javascript" type="text/javascript">
var xmlHttp
function afiseaza_pagina(str) {
if (str.length==0) {
document.getElementById("locul_de_afisare").innerHTML=""
return
}
xmlHttp=incarca_obiectul_XMLHTTP()
if (xmlHttp==null) {
alert ("Browserul nu suporta cererile prin AJAX ")
return
}
var url="pagina.php"
url=url+"?pag="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=starea_incarcarii
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function starea_incarcarii() {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
document.getElementById("locul_de_afisare").innerHTML=xmlHttp.responseText
}
}
function incarca_obiectul_XMLHTTP() {
var cerere_http=null;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
cerere_http = new XMLHttpRequest();
if (cerere_http.overrideMimeType) {
cerere_http.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE
try {
cerere_http = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
cerere_http = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!cerere_http) {
alert('Nu se poate initializa obiectul XMLHTTP');
return false;
}
else {
return cerere_http;
}
}
</script> Funcţia JavaScript afiseaza_pagina() se execută de fiecare dată cănd se dă click pe un link. Dacă se cere o pagină str.length > 0 funcţia face următoarele:
- Defineşte adresa url pentru fişierul cu acces la server (pagina.php)
- Adaugă un parametru (pag) care conţine numele paginii cerute si care este trimis prin GET către pagina.php
- Adaugă un număr aleator pentru a preveni serverul să utilizeze fişierele din cache (ca să încarce la fiecare cerere pagina nouă)
- Crează un obiect XMLHTTP, şi specifică obiectului să execute funcţia numită starea_incarcarii în timp ce schimbarea este în curs
- Deschide obiectul XMLHTTP cu url-ul specificat.
- Trimite o cerere HTTP către server.
Dacă funcţia este apelată fără parametru, atunci ea va şterge conţinutul paginii corespunzător id-ului id="locul_de_afisare".
Funcţia starea_incarcarii() se execută de fiecare dată când starea obiectului XMLHTTP se schimbă. Cănd schimbarea atinge nivelul 4 (sau nivelul "complete" - încărcare completă) conţinutul lui locul_de_afisare este umplut cu textul primit de la server.
Funcţia incarca_obiectul_XMLHTTP() încearcă să rezolve problema încărcării obiectului XMPHTTP pentru diferite tipuri de browsere pentru a putea trimite şi primi date în mod asincron specific tehnologiei AJAX. Rezultatul îl puteţi vedea mai jos precum şi conţinutul întregului script. Pagina existentă pe server conţine următorul cod:
Cod: Selectaţi tot
<?php
// pagina existenta pe server pagina.php
if (isset($_GET['pag'])) {
$pagina = $_GET['pag'];
echo $pagina;
if (is_file($pagina)) {
include($pagina);
}
else {
echo '<br />A fost ceruta pagina '.$pagina.' dar nu exista pe server.';
}
}
else {
echo '<br />Alegeti o pagina';
}
?> Cod: Selectaţi tot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemplu de ?ncărcare a paginii cu AJAX</title>
<script language="javascript" type="text/javascript">
var xmlHttp
function afiseaza_pagina(str) {
if (str.length==0) {
document.getElementById("locul_de_afisare").innerHTML=""
return
}
xmlHttp=incarca_obiectul_XMLHTTP()
if (xmlHttp==null) {
alert ("Browserul nu suporta cererile prin AJAX ")
return
}
var url="pagina.php"
url=url+"?pag="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=starea_incarcarii
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function starea_incarcarii() {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
document.getElementById("locul_de_afisare").innerHTML=xmlHttp.responseText
}
}
function incarca_obiectul_XMLHTTP() {
var cerere_http=null;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
cerere_http=new XMLHttpRequest();
if (cerere_http.overrideMimeType) {
cerere_http.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE
try {
cerere_http=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
cerere_http=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!cerere_http) {
alert('Nu se poate initializa obiectul XMLHTTP');
return false;
}
else {
return cerere_http;
}
}
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="3" cellpadding="0">
<tr>
<td width="20%" valign="top">Meniu</td>
<td width="80%" valign="top">Conţinutul paginii: </td>
</tr>
<tr>
<td valign="top">
<a href="pagina_1.php" id="cerere_pagina_1"
onclick="afiseaza_pagina('pagina_1.php'); return false">Pagina 1</a><br />
<a href="pagina_2.php" id="cerere_pagina_2"
onclick="afiseaza_pagina('pagina_2.php'); return false">Pagina 2</a><br />
<a href="pagina_3.php" id="cerere_pagina_3"
onclick="afiseaza_pagina('pagina_3.php'); return false">Pagina 3</a>
</td>
<td valign="top">
<span id="locul_de_afisare"><?php include("pagina.php"); ?></span>
</td>
</tr>
</table>
</body>
</html>