AJAX - praktisks piemērs
Deniss Fedotovs (deni2s), 28.09.2008., 18:28Neliels piemērs, lai nodemonstrētu, kā darbojas AJAX.
Daudzi zin, kas ir AJAX, bet ne visi zin, kā to reāli izmantot. Šeit tiks parādīts neliels praktisks AJAX piemērs, kuru nedaudz modificējot, var izmantot saviem mērķiem. Šajā piemērā AJAX regulāri pieprasīs datus no servera, lai attēlotu tos HTML lapā.
Tātad pirmkārt mums vajag HTML dokumentu, kurā atradīsies javascript, kas regulāri ņems datus no servera un attēlos tos HTML dokumentā:
piemers.html
Pats javascript kods, kurš saturēs AJAX, atradīsies atsevišķā failā:
ajax.js
get_info.php
Saglabājam to visu uz webservera ar PHP atbalstu vienā direktorijā (ja gribat glabāt dažādās, tad jums ir jānorāda attiecīgi ceļi, uz pārējiem failiem kodā) un atveram pārlūkā HTML dokumentu
Domāju, ka nav grūti pielāgot šo piemēru savām vajadzībām, lai atjaunotu informāciju HTML dokumentā to nepārlādējot. Tikai jāatceras, ka AJAX var pieprasīt informāciju tikai no uz tā paša domēna esoša faila.
Pārbaudīt darbībā šo AJAX piemēru var te, bet lejupielādēt ZIP failā te: AJAX_piemers.zip
Vēl kāda piezīme saistībā ar lietojamību:
Labs stils būtu pie javascript ielādes un pirms AJAX pieprasījuma izpildes parādīt, ka lietotājam jāuzgaida, kamēr tiek veikts AJAX pieprasījums, jo reizēm tas var aizņemt kādu laiku, atkarībā no servera ātruma un interneta savienojuma kvalitātes. Lai to izdarītu, faila
Un rindiņu:
jānomaina pret:
Tagad, kad ielādēsies HTML dokuments
Ja kādam ir ieteikumi koda uzlabošanai vai kādas piezīmes par šo AJAX piemēru, laipni aicināti tos izteikt komentāros!
Tātad pirmkārt mums vajag HTML dokumentu, kurā atradīsies javascript, kas regulāri ņems datus no servera un attēlos tos HTML dokumentā:
piemers.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="lv" lang="lv">
<head>
<title>AJAX piemērs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- te tiks ielādēts javascript, kas nodarbosies ar AJAX lietām -->
<script src="ajax.js" type="text/javascript"></script>
</head>
<body>
<h1>AJAX piemērs</h1>
<!-- šī elementa saturs būs tas, kas mainīsies -->
<p id="place">šim ir jāmainās</p>
</body>
</html>
Pats javascript kods, kurš saturēs AJAX, atradīsies atsevišķā failā:
ajax.js
// Šī ir galvenā AJAX f-ja, kas ir diezgan sarežģīta, tāpēc
// vienkārši neaiztieciet to, bet atstājiet, kā ir.
function getHTTPObject(){
var xmlhttp;
/*@cc_on
@if (@_jscript_version >=5)
try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")}
catch(e){
try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")}
catch(E){xmlhttp=false}}
@else
xmlhttp=false;
@end @*/
if(!xmlhttp && typeof XMLHttpRequest!='undefined')
try{xmlhttp=new XMLHttpRequest()}
catch(e){xmlhttp=false}
return xmlhttp}
// sasaistam mainīgo httpInfo ar austāk esošo AJAX f-ju
var httpInfo=getHTTPObject();
// f-a, kas palaižās sākumā un mēģina
// dabūt info no faila get_info.php
function get_info()
{
if(httpInfo.readyState==4 || httpInfo.readyState==0)
{
// Norādam, ka info saņemsim no faila get_info.php ar GET pieprasījumu.
// ?rand=... ir nepieciešams, lai pieprasot atkārtoti info, tā netiktu ņemta
// no pārlūka cache.
// Izmantojot GET parametrus var arī nosūtīt nepieciešamo informāciju uz serveri
// ja vien tā nav pārāk liela. Pretējā gadījumā jāizmanto POST metode,
// kura šeit nav apskatīta.
httpInfo.open('GET','get_info.php?rand='+Math.floor(Math.random()*1000000),true);
httpInfo.onreadystatechange = function()
{
if(httpInfo.readyState==4)
{
//f-ja, kas palaižas, kad tiek saņemts kāds info
apstradajam_info()
}
};
// nosūta pieprasījumu
httpInfo.send(null)
}
}
// f-ja, kas apstrādā saņemto info
function apstradajam_info()
{
var place=document.getElementById('place');
//padzēšam visu HTML elementa ar id="place" saturu
while(place.childNodes[0])place.removeChild(place.firstChild);
//pievienojam HTML dokumentā dabūto saņemto info
place.appendChild(document.createTextNode(httpInfo.responseText));
//Pēc 100msec (1 sekunde) atkal palaižam f-ju get_info
setTimeout('get_info();',1000)
}
// rindiņa, kas pie HTML dokumenta ielādes palaiž f-ju get_info
window.onload = get_info;
- Tātad atverot pārlūkā HTML dokumentu
piemers.html, ielādēsies arī javascript kods, kas atrodas failāajax.js. - Pēc ielādes tiks palaista javascript f-ja
get_info, kas izmantojot AJAX pieprasīs teksta informāciju, kas atrodas failāget_info.php. - Pēc tam, kad informācija tiek saņemta, darbība tiek nodota javascript f-jai
apstradam_info. - F-ja apstadajam_info izdzēš visu elemeta ar
id="place"saturu un ievieto tajā saņemto info. - Pēc tam f-ja
apstradajam_infonogaida 1 sekundi un palaiž f-juget_info- viss atkal atkārtojas no otrā soļa.
get_info.php
<?php
// Sīs rindiņas nepieciešamas, lai novērstu faila kešošanu
// pirms šīm rindiņām nedrīkst būt neviens simbols, kas nosūtās
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")."GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
//norādam, ka saturs tipu un kodējumu
header("Content-Type: text/html; charset=utf-8");
// Šeit nosūtam info. Piemēram, cik sekundes ir pagājušas kopš 1970.gada 1.janvāra.
// Tik pat labi mēs varam attēlot citu informāciju, piemēram, no SQL datubāzes.
echo('Kopš 1970.gada 1.janvāra ir pagājušas '.time().'sekundes.');
?>
Saglabājam to visu uz webservera ar PHP atbalstu vienā direktorijā (ja gribat glabāt dažādās, tad jums ir jānorāda attiecīgi ceļi, uz pārējiem failiem kodā) un atveram pārlūkā HTML dokumentu
piemers.html. Ja viss ir pareizi izdarīts, tad tam vajadzētu izskatīties apmēram šādi ar cipariņiem, kas mainās:Domāju, ka nav grūti pielāgot šo piemēru savām vajadzībām, lai atjaunotu informāciju HTML dokumentā to nepārlādējot. Tikai jāatceras, ka AJAX var pieprasīt informāciju tikai no uz tā paša domēna esoša faila.
Pārbaudīt darbībā šo AJAX piemēru var te, bet lejupielādēt ZIP failā te: AJAX_piemers.zip
Vēl kāda piezīme saistībā ar lietojamību:
Labs stils būtu pie javascript ielādes un pirms AJAX pieprasījuma izpildes parādīt, ka lietotājam jāuzgaida, kamēr tiek veikts AJAX pieprasījums, jo reizēm tas var aizņemt kādu laiku, atkarībā no servera ātruma un interneta savienojuma kvalitātes. Lai to izdarītu, faila
ajax.js kodā jāpievieno sekojošu funkciju:function loading()
{
var place=document.getElementById('place');
//padzēšam visu HTML elementa ar id="place" saturu
while(place.childNodes[0])place.removeChild(place.firstChild);
//pievienojam tekstu, ka notiek indormācijas ielāde
place.appendChild(document.createTextNode('Uzgaidiet, notiek informācijas ielāde...'));
//palaižam f-ju get_info, kas pieprasa informāciju
get_info();
}
Un rindiņu:
window.onload = get_info;
jānomaina pret:
window.onload = loading;
Tagad, kad ielādēsies HTML dokuments
piemers.html pārlūkā, tas ielādes javascript funkcijas, kuras no sākuma parādīs tekstu "Uzgaidiet, notiek informācijas ielāde..." (vai neparādīs, ja pārlūks neatbalsts javascript) un tad tiks sāks informācijas ielādi no faila get_info.php. Un tikai tad, kad tiks saņemta informācija, tā aizstās tekstu "Uzgaidiet, notiek informācijas ielāde...". Protams, ja interneta ātrums ir liels un serveris nebremzē ar get_info.php faila izpildi, tad teksts "Uzgaidiet, notiek informācijas ielāde..." pazudīs acumirklī, bet, ja notiek kāda aizķeršanās, tad šis teksts varētu vismaz mazliet nomierināt kādu pārsteidzīgu lietotāju.Ja kādam ir ieteikumi koda uzlabošanai vai kādas piezīmes par šo AJAX piemēru, laipni aicināti tos izteikt komentāros!
Par web.hc.lv
web.hc.lv ir vortāls, kurā tiek aplūkoti mājaslapu veidošanas un mārketinga aspekti, no idejas līdz gandarījumam.
Reklāma