AJAX - praktisks piemērs

28.09.2008. 21:28:38 sagatavoja Deniss Fedotovs (deni2s)

Neliels 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

<!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;

  1. Tātad atverot pārlūkā HTML dokumentu piemers.html, ielādēsies arī javascript kods, kas atrodas failā ajax.js.
  2. 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.
  3. Pēc tam, kad informācija tiek saņemta, darbība tiek nodota javascript f-jai apstradam_info.
  4. F-ja apstadajam_info izdzēš visu elemeta ar id="place" saturu un ievieto tajā saņemto info.
  5. Pēc tam f-ja apstradajam_info nogaida 1 sekundi un palaiž f-ju get_info - viss atkal atkārtojas no otrā soļa.
Atliek tikai sagatavot failu, kurā būs teksta informācija, kuru ar AJAX palīdzību pieprasīs, lai ievietotu HTML dokumentā. Mēs to darīsim iekš PHP, lai izmantotu PHP f-jas faila kešošanas novēršanai.

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:

AJAX piemēra ekrānšāviņš

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!

14 komentāri Komentēšana pieejama visiem.
nemec-terminators (asdf@asdf.lv) komentēja 28.09.2008. 23:52:08 (ip:87.246.137.144)
Komentāra reitings: 0

// vienkārši neaiztieciet to, bet atstājiet, kā ir.
wtf?
ja tu raksti no nulles, tad arī paskaidro kas tur notiek. Bet ja nē, tad priekš kam rakstīt no nulles? Labāk paņem gatavu kodu un parādi kā tas darbojas
http://mootools.net/docs/Request/Request

Ingus (i) komentēja 29.09.2008. 00:21:11 (ip:78.84.229.244)
Komentāra reitings: 0

Mums ir 5 AJAX saites, katra no kurām izpildās nezināmu laiku. Daža ilgāk, daža ātrāk. Lietotājs ienāk lapā un saklikšķina saites nejaušā secībā, pirms rezultāti ir paspējuši ielādēties.

Tāds triviāls jautājums - vai lietotājs ieraudzīs to informāciju, kuru viņš ir pieprasījis pēdējo vai arī tomēr var gadīties, ka parādās kaut kas no iepriekš saklikšķinātajiem? Man ir aizdomas, ka ar šādu risinājumu nav nekāda garantija, ka parādīsies tā informācija, kas ir pieprasīta pēdējā, attiecīgi lietotājam var rasties sajūta, ka kaut kas gļuko :)

deni2s komentēja 29.09.2008. 00:26:45
Komentāra reitings: 0

Ingus(), domāju, ka šo problēmu jārisina saknē - nav jādod lietotājam 5 AJAX saites. Jeb arī pēc noklikšķināšanas uz vienas, noņemt iespēju klikšķināt uz pārējām, kamēr nav izpildījies pirmais pieprasījums.

Domāju, ka tevis minētā situācija varētu būt diezgan reti atrodama "dabā", jo parasti jau katra ajax saite atbild par savu vietu HTML dokumentā, nevis vairākas par vienu un to pašu.

Ingus komentēja 29.09.2008. 01:03:22 (ip:78.84.229.244)
Komentāra reitings: 0.999

Nemaz jau tik reta nav, teiksim iedomājies AJAX bāzētus tabus, kas saturu ielādē vienā <div id="content"></div> elementā :)

deni2s komentēja 29.09.2008. 01:12:37
Komentāra reitings: 0

Jebkurā gadījumā to var atrisināt aizliedzot uztvert jebkurus notikumus (klikšķināšanu uz citiem tabiem), kamēr nav ielādējusies iepriekš pieprasītā informācija.

Vai nav loģiskāk pēc lapas ielādes pagaidīt pāris sekundes (lai nav tā, ka viss sabremzējas lietotājam) un tad ar AJAX ielādēt pārējo tabu saturu citos divos ar dažādiem id, kurus, pie klikšķināšanas uz tabiem, attiecīgi parāda un pārējos noslēpj? Kkas līdzīgs ir izdarīts http://web.hc.lv tur kur tās aktuālās ziņas mainās. Pirmā nāk iekš HTML, un pārējās 2 tiek pielādētas klāt ar AJAX.

Ingus komentēja 29.09.2008. 01:18:59 (ip:78.84.229.244)
Komentāra reitings: 0.999

Nu te var uzreiz strīdēties par to, cik lietderīgi ir vilkt saturu, kuru lietotājs neizmantos. Gan no serveru slodzes viedokļa, gan tīkla noslodzes.

Patiesībā jau risinājums problēmai, kuru es tev te uzdevu ir pavisam vienkāršs. Jāpieglabā viens papildus mainīgais, kurš pieprasījums ir pēdējais un pie datu attēlošans vienkārši jāignorē visi dati, kas ienāk vēlāk kā atbilde uz citiem pieprasījumiem.

Qued (qued@inbox.lv) komentēja 29.09.2008. 03:18:24 (ip:78.84.118.160)
Komentāra reitings: 0.999

Lai piedod autors, ka nelasīju visās detaļās, bet man viens ieteikums / pieredze. Es arī kādreiz mēģināju rakstīt savas Ajax funkcijas, tomēr atradu šo pasākumu par gana čakarīgu. Tomēr pār mani nāca apgaismība un es sāku pētīt Javascript freimworkus. Šobrīd esmu palicis pie JQuery un iesaku arī citiem - tur Ajax ir šausmīgi vienkārša un dabiska lieta, kā arī ir lērums citu ērtu un efektīvu js ekspluatēšanas iespēju. Tā lieta ietaupa milzumu laika un ļauj koncentrēties uz rezultātu, nevis procesu rezultāta sasniegšanai.

deni2s komentēja 29.09.2008. 04:29:39
Komentāra reitings: 0

Qued, tā jau ir gaumes lieta :) Man patīk gan process, gan tas, ka varu justies drošs par sevis rakstīto kodu - ka zinu visos sīkumos, kā tas strādā un ko tas dara vai nedara. Ka esmu pārliecināts, ka tas ir pietiekami optimizēts, efektīvs un aizņem ļoti maz un ka tajā nav nekā lieka. Un ka jebkurā mirklī man nesagādās problēmas samainīt jebko.

javascript mainās diezgan maz, bet tie freimworki gan attīstās ļoti strauji, grūti viņiem visiem izsekot līdzi. Manas vajadzības pagaidām apmierina apmēram šāds manis rakstīts javascript frameworks: http://web.hc.lv/kods/javascript-ajax/raksti/javascript-framework-lai-samazinatu-koda-garumu/

Bet es neapstrīdu tavu viedokli. Vienkārši katram savs :) Tas ir tāpat kā var paņemt wordpress instalāciju un var uzkodēt savu CMS, lai izveidotu portālu. Katram būs savi plusi un mīnusi.

Qued komentēja 29.09.2008. 12:27:38 (ip:78.84.118.160)
Komentāra reitings: 0

deni2s, bet tu kādreiz esi pamēģinājis kādu javascript freimvorku? Es tieši tāpat kādreiz domāju - optimizācija, drošība utt. - bet no otras puses skats uz to ir pavisam citāds. Tas freimvorks 98% gadījumu lieliski darbojas visos pārlūkos, ir gana ātrs un papildus ielādējamais fails sver vien nieka pāris desmitus kb.

kaaposc komentēja 29.09.2008. 13:32:11 (ip:159.148.238.253)
Komentāra reitings: 0

Qued, par freimworku lietderību piekrītu - vienkārša un dabiska lieta, bet man gan liekas, ka "dabiskāks" ir PrototypeJS freimworks, nevis jQuery, jo šiem abiem nedaudz atšķiras implementācija. PrototypeJS extendo DOM objektu ar vajadzīgām (un nevajadzīgām ;) ) lietām, bet jQuery izveido abstraktu JS objektu, kuram kā galveno konteineri piesaista DOM vienību. Protams, te var diskutēt, kurš no variantiem (dabiskais vai nedabiskais) ir efektīvāks.

deni2s komentēja 29.09.2008. 13:33:43
Komentāra reitings: 0

Reāli neesmu izmantojis. Parasti palasu dokumentāciju un apsīkst vēlme apgūt tos frameworkus. Man šķiet, ka pašlaik viss iekš www.hc.lv izmantotais javascript daudzums aizņem pāris desmitus kb kopā. (Ja neskaita vienu skriptu no Yahoo, kas cenšas uzminēt laukā sāktos rakstītos vārdus.)

asdfa (fasdf) komentēja 05.11.2008. 14:30:33 (ip:80.233.212.83)
Komentāra reitings: 0

asdf asdf asdf

vārds (e-pasta adrese) komentēja 08.06.2009. 21:47:50 (ip:83.99.146.170)
Komentāra reitings: 0

Komentārs

LelandBon (laelebeidiorg@mail.ru) komentēja 15.08.2017. 15:42:19 (ip:146.185.223.114)
Komentāra reitings: 0

301 Moved Permanently
<a href=https://www.viagrapascherfr.com/>Show more...</a>

Komentāra pievienošana

Ar * atzīmētie lauciņi ir jāaizpilda obligāti.





[ uz rakstu sarakstu ]

Reklāma
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.

[Valid RSS] Valid XHTML 1.0! Valid CSS!

RSS 2.0 ziņu barotne (news feed)  Twitter

reģistrēties