Kā veidot dinamiskas web lappuses: AJAX

[Foxsk8]

[imgl]https://notepad.lv/bildes/atteli/20080209154700268.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:

https://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

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:

https://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabscontent.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:

Quote:

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:

Quote:

Sīkāk par šiem paņēmieniem lasām mājaslapā: https://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.

[danka]

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

[azazul]

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

[danka]

Ir gan bloķēts js, arī activex ir 😉

[Mad182]

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.

[msh]

Mazgājamā līdzekļa nosaukumu nozaguši… [img]https://www.audi-style.lv/forum/images/smiles/icon_haha.gif[/img]

[Creep]

un autor nevareetu paskaidrot ko jaadara ja shito erroru met?:

error: uncaught exception: [Exception… “Component returned failure code: 0x804b000f [nsIXMLHttpRequest.setRequestHeader]” nsresult: “0x804b000f ()” location: “JS frame :: https://emp.kneedraggers.com/test/development/international/email_step2-2.js :: populate_bike_makes :: line 173″ data: no]

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

[azazul]

Creep.

Es saprotu ka tas oranžais bumbulis pie logo var būt maldinoš, bet šis portāls nesaucas https://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.

[Creep]

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…)

[azazul]

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:

[Autors]

Ieraksti