Kā veidot dinamiskas web lappuses: AJAX

Moderators: Vecākie lietotāji

User avatar
foxsk8
Moderators
Atbildes: 5070
Pievienojies: 22 Feb 2007, 12:33
Reputācija: 0
Atrodas: Liepāja, www.notepad.lv

Kā veidot dinamiskas web lappuses: AJAX

Post no foxsk8 » 09 Feb 2008, 15:26

[imgl]https://notepad.lv/bildes/atteli/200 ... 700268.jpg[/imgl]Š ajā rakstā lasītāji varēs nedaudz iepazīties ar dinamisko web lapu veidošanu. Apskatīšu veidu, kā ērti un vienkārši savas web lapas padarīt dinamiskākas un arī lietotājiem ērtākas, jo bieži web lapu noformēšanā parādas iframe, frame kodējums, kas jau sen ir izgājis no modes. Ar dinamisku lappušu palīdzību Jūsu lietotājiem nerastos sajūta, ka visu laiku kaut kas tiek ielādēts, ka mājaslapa burtiski karas vai lēni strādā ik reizi, kad Jums vajadzētu atjaunot kādu informāciju (refresh).

Ir vairāki veidi, kā web lapu padarīt dinamisku. Viens no modernākajiem variantiem ir lietot AJAX piedāvātās tehnoloģijas, kur kods (jeb skripts) pieprasa informāciju no servera un pēc tam to parāda lapā lietotājiem saprotamā veidā. Ar AJAX veidotās web lapas ir labāk pārskatāmas, vieglāk uzbūvētas struktūras ziņā. Tagad visu informāciju vairs nav nepieciešams glabāt vienā failā, bet to var izvietot arī citur, un ar Ajax palīdzību nolasīt un salikt kopā. Š āds moduļu struktūras veids palīdz ērti pārvaldīt web lapas failus, jo labojamo informāciju vairs nevajadzētu meklēt vienā lielā "rullī", bet katram informācijas blokam būtu savs neatkarīgs fails.

Apskatīšu vienu no visvienkāršākajiem viediem, kā web lapu padarīt dzīvāku.

AJAX tabs, jeb vienkāršā valodā - dinamiskie lauki, jeb tabulas.

AJAX tabs ir veidots balstoties uz AJAX tehnoloģijām, kuras jau pieminēju. Š is kods, jeb scripts ir veidots ļoti vienkārši, lai esošajiem un potenciālajiem lietotājiem nerastos problēmas ar darbības izprašanu. Ar šo scriptu Jūs variet DIV ielādēt informāciju no cita faila, variet mainīt paša scripta vizuālos uzstādījumus (CSS)

Zemāk ir fragments no AJAX mājaslapas, kurā parādīts neliels demo panelis:

http://www.dynamicdrive.com/dynamicinde ... bscontent/

Kā redzam Tab1; Tab2 ; Tab3; Tab4 satur noteiktu informāciju par failu, kurš būtu jāielādē konkrētajā vietā.

Kā jau minēju AJAX TABS ir samērā viegls, tāpēc ķeršos pie nākošās metodes.

Lejupielādējam nākošo piemēru šeit:

http://www.dynamicdrive.com/dynamicinde ... ontent.zip

Prototype JS

Prototype JS ir Ajax karkass (framework), jeb tautā sauktais rāmis. Ar Prototype JS palīdzību Jūs variet iegūt līdzīgu efektu kā ar AJAX tabs, taču šeit ir neliela atšķirība. Lieta ir tāda, ka Prototype JS piedāvā vairākas uz AJAX tehnoloģijām balstītas iespējas. Š oreiz es apskatīšu tikai divas no tām un tas būtu:
1. Ajax.Updater, jeb atjaunošana, parādīšana un otra-
2. Ajax.PeriodicalUpdater, jeb automātiskā atjaunošana, noteiktā laika intervālā informācija tiek atjaunota un ielādēta DIV'ā.

AJAX.Updater

Ajax.Updater Jūs variet ērti izmantot tādos gadījumos, ja Jums vajag jau esošā lapā iekļaut kādu citu failu. Parasti php to sauc par include, bet ir reizes, kad include neder, tad var izlīdzēties ar Ajax.Updater. Ar Ajax.Updater informācija tiek pieprasīta no faila un parādīta noteiktā DIV'ā, netiek veikta otreizēja atjaunošana.

Piemērs:


<html>
<head>
<title>Ajax Piemers</title>
<script></script>

</head>
<body>
<script>
new Ajax.Updater('div_aile', 'iekl.html',
{
method: 'get',

});
</script>

<div></div>
</body>
</html>

Ajax.PeriodicalUpdater

Ajax.PeriodicalUpdater veic atkārtotu informācijas atjaunošanu noteiktā laika intervālā. Ja vēlamies izmantot šo iespēju, tad parasti ieteicams intervālu uzlikt ap minūti-divām, tas viss ir atkarīgs no tā, kāda Jums ir vajadzība. Ja vajag atjaunot online lietotāju sarakstu, tad pilnīgi pietiek ar minūti, bet ja piem. jaunākos foruma komentārus - tad šo laiku var būt lietderīgi arī samazināt.
Jāpiebilst, ka ar Ajax.PeriodicalUpdater ir jābūt uzmanīgiem. Ja gribēsiet atjaunot ik pārdesmit sekundes informāciju no kāda palielāka faila, tad web lapa var sākt raustīties, būs tāda sajūta, ka viss dators paliek ļoti lēns. Iemesls ir tāds, ka ar Ajax.PeriodicalUpdater tiek pieprasīta visa faila atjaunošana teiksim, reizi 10 sekundēs. Kas notiks, ja fails būs ļoti liels? Interneta pārlūks nespēs to laicīgi "sagremot". Bet ja sistēmu uztaisa gudrāku, lai tā pieprasa vairākus ierakstus no datubāzes, tad problēmām nevajadzētu būt. Š o atsevišķo ierakstu jeb moduļu izmērs būtu vien pāris KB vai pat mazāk.

Piemērs:


<html>
<head>
<title>Ajax Piemers ar PeriodicalUpdater </title>
<script></script>

</head>
<body>
<script>
new Ajax.PeriodicalUpdater('div_aile', '/some_url', // div_aile bloks kurā ielādēs /some_url

failu
{
method: 'get',
insertion: Insertion.Top,
frequency: 1, // intervāls sekundēs
decay: 2 // intervāla dubultošana
});
</script>

<div></div>
</body>
</html>

Sīkāk par šiem paņēmieniem lasām mājaslapā: http://www.prototypejs.org/

Š is bija tikai neliels ieskats, kā web lapu padarīt dinamiskāku. Ir vēl ļoti daudz paņēmienu bez šiem. Tagad vismaz būs jāaizmirst par tādām novecojušām lietām, kā meta refresh. Protams, vienmēr arī jāizvērtē konkrēto vajadzību. Jāatceras, ka AJAX nav brīnumlīdzeklis. Ir gadījumi, kad šīs tehnoloģijas nav lietojamas.

User avatar
danka
Reģistrēts lietotājs
Atbildes: 24
Pievienojies: 27 Feb 2007, 18:39
Reputācija: 0
Atrodas: Mārketings

Post no danka » 09 Feb 2008, 17:25

Izmantojot šo jāatceras, ka kādi 40% cilvēki, kuri apskatīs šo lapu no sava darba, izmantojot darba datoru to neredzēs, jo vel jo projām daudziem ir bloķēts js
Neko nevar skaidri zināt....
...........atliek vienīgi minēt

User avatar
azazul
Vecākais lietotājs
Atbildes: 706
Pievienojies: 24 Mar 2007, 18:18
Reputācija: 0

Post no azazul » 09 Feb 2008, 18:50

Nē.
Tā gluži nav patiesība.
Ir nevis bloķēts AJAX vai JS , bet gan ActiveX, kas vienmēr ir izcēlies ar caurumainību.
Un iekš IE6 (vo tiešām nezināšu par IE7), XHR ojekts atridas iekš ActiveX kontrolēm.

Tā kaut kā.
[font=9]"Begging for a line drawn in the sand to separate the prophets from the men" - Rishloo[/font]

User avatar
danka
Reģistrēts lietotājs
Atbildes: 24
Pievienojies: 27 Feb 2007, 18:39
Reputācija: 0
Atrodas: Mārketings

Post no danka » 09 Feb 2008, 20:00

Ir gan bloķēts js, arī activex ir ;)
Neko nevar skaidri zināt....
...........atliek vienīgi minēt

Mad182
Reģistrēts lietotājs
Atbildes: 903
Pievienojies: 14 Mar 2007, 15:16
Reputācija: 0
Atrodas: Latvija

Post no Mad182 » 09 Feb 2008, 20:01

danka, no kurienes tāda statistika? Man šķiet, ka 40% būtu mazliet pārspīlēti, bet jā, principā jau visam, kas darbojas ar ajax (vai javascript) būtu jābūt alternatīvai priekš tiem, kam ir apgrieztas iespējas/vecāki prlūki.

User avatar
msh
Reģistrēts lietotājs
Atbildes: 3460
Pievienojies: 06 Apr 2007, 12:21
Reputācija: 0
Atrodas: Latvija

Post no msh » 09 Feb 2008, 20:07

Mazgājamā līdzekļa nosaukumu nozaguši... Image
PAKAĻROKS - Fusion A4-5000/ASROCK QC5000-ITX/WIFI/8 GB DDR3 1333/FSP200 50GSV-5K/ST2000VM003-1CT164 2 TB Seagate Pipeline HD/vecs mazs IBM keiss/winxp x64/2 ventilatori

Creep
Reģistrēts lietotājs
Atbildes: 1138
Pievienojies: 09 Feb 2008, 20:06
Reputācija: 0

Post no Creep » 09 Feb 2008, 20:08

un autor nevareetu paskaidrot ko jaadara ja shito erroru met?:
error: uncaught exception: [Exception... "Component returned failure code: 0x804b000f [nsIXMLHttpRequest.setRequestHeader]" nsresult: "0x804b000f (<unknown>)" location: "JS frame :: https://emp.kneedraggers.com/test/devel ... step2-2.js :: populate_bike_makes :: line 173" data: no]

visu ko es esmu taisiijis peec vairaakiem klikshkiem shitaadus errorus met...

User avatar
azazul
Vecākais lietotājs
Atbildes: 706
Pievienojies: 24 Mar 2007, 18:18
Reputācija: 0

Post no azazul » 09 Feb 2008, 21:52

Creep.
Es saprotu ka tas oranžais bumbulis pie logo var būt maldinoš, bet šis portāls nesaucas http://kristāla.bumba.lv
Bez ejoša linka nekādi brīnumi nenotiks.

Anyway. Manas tarot kārtis saka, ka vaina ir konfliktējošos moduļos, kas abi izmanto XHR.
[font=9]"Begging for a line drawn in the sand to separate the prophets from the men" - Rishloo[/font]

Creep
Reģistrēts lietotājs
Atbildes: 1138
Pievienojies: 09 Feb 2008, 20:06
Reputācija: 0

Post no Creep » 09 Feb 2008, 22:24

nee to vienk es izraku no neta jo vienkaarshi sen neesu ar ajax neemies jo atmetu un tagad nav saglabaajushies koda gabali. atceros kad ar post sendoju infu tad lielaako dalu reizes taa bija (reizeem ja novaacu loading rindinu nost shis pazuda bet nevienmeer). karoche kaa es ielieku funkcijaa ko vairaak kaa standarta rindinas tad uzreiz metas shis errors (reizeem pat bez nekaadiem papildus suudiem...)

User avatar
azazul
Vecākais lietotājs
Atbildes: 706
Pievienojies: 24 Mar 2007, 18:18
Reputācija: 0

Post no azazul » 09 Feb 2008, 23:23

P.S.

Neliela pielilde par prototypeJS libu.
Iesaku to tomēr apiet. Vismaz līdz restrukturizācijai.

Tam libam ir pārāk daudz problēmu:
  • nav iekapsulēta
    tiek palašinātas esošās klases .. piem Object.getElementsByClassName
    nav modulārs
Iesaku labāk mēģināt MooTools vai jQuery.
[font=9]"Begging for a line drawn in the sand to separate the prophets from the men" - Rishloo[/font]

Pievienot atbildi

Return to “Raksti”