web.hc.lv - vortāls tīmekļa veidotājiem: Raksti

Autocomplete

Fri, 02 Sep 2011 09:54:27 +0000

Lielākā daļa mājaslapu mūsdienās izmanto jQuery bibliotēku, tāpēc izmantot jQuery UI iekļauto Autocomplete vidžetu sķiet diezgan loģiski.

Problēma tāda, ka jQuery UI Autocomplete vidžeta dokumentācija ir diezgan saraustīta, tāpēc zemāk ir saites uz pilnīgāko informāciju:

Oficiālā pilnīgākā dokumentācija: docs.jquery.com/UI/Autocomplete
http://docs.jquery.com/Plugins/Autocomplete - nav vērts skatīties, jo šeit ir nepilnīga info)
Implementācija praksē: jQuery UI Autocomplete Widget with PHP and MySQL

Svarīgi atcerēties, ka pieprasījums jādod ar GET parametru "term" un rezultāti jāatgriež šādā JSON formatējumā:

[{"label":"Nosaukums","value":"232"},{"label":"Nosaukums cits","value":"63"},{"label":"Vēl kāds nosaukums","value":"asd"}]

document.write atlikšana pēc window.onload

Sat, 27 Feb 2010 23:20:49 +0000

Parasti document.write nav iespējams atlikt pēc window.onload notikuma, taču reizēm tas ir ļoti nepieciešams (piemēram, lai paātrinātu lapas ielādes ātrumu, ielādējot reklāmas vēlāk).

Protams, ka izmantot document.write ir slikts stils (labāk izmantot DOM rīkus), taču ir gadījumi, kad tur neko nevar mainīt, piemēram ievietojot mājaslapā reklāmas baneru sistēmas inectar.lv kodu.

Pats kods, kas jāievieto mājaslapā izskatās šādi:

Savukārt faila http://inectar.lv/kk.php?bb=84&kas=20 saturs mainās, taču vienmēr satur document.write. Piemērs:

document.write("
 


 Skaņu virtuve
 
 
 ");

Reāli šāds kods stipri sabremzē lapas attēlošanu pārlūkā, jo pārlūks neko neattēlo pēc šī koda, kamēr netiek izpildīta document.write komanda, kura ielādē attēlu no inectar.lv. Un parasti šī attēla ielāde ir salīdzinoši ilga. Tāpēc, optimizējot konkrētās mājaslapas ielādes ātrumu, tika meklēts risinājums, lai javascript skripta izpildi atliktu (defer) uz vēlāku laiku, kad pati lapa jau ir pilnībā ielādējusies (un izpildās window.onload notikums). Diemžēl, ja tiek izpildīta document.write komanda pēc window.onload notikuma, tad tā nodzēš visu lapas saturu (iznīcina visu DOM koku).

Viens no risinājumiem būtu faila http://inectar.lv/kk.php?bb=84&kas=20 ielāde uz servera un automātiska faila satura "pātulkošana" izmantojot DOM rīkus. Taču tas būtu pārāk sarežģīti, ņemot vērā, ka faila saturs var mainīties jebkurā mirklī.

Interneta plašumos tika atrasts cits risinājums, kas pārveido pašu document.write funkciju, pirms tā tiek izpildīta. Tagad lapā ievietotais kods izskatās šādi:

Ar šāda skripta palīdzību lapā tiek ierakstīts failā http://inectar.lv/kk.php?bb=84&kas=20 norādītais HTML kods, taču tas netiek attēlots pārlūkā (un netiek ielādēts banera attēls), jo ir atzīmēts kā komentārs. Pēc ielādes tas izskatās šādi:

Pēc tam var ielādēties un attēloties HTML kods, kam būtu jāseko pēc reklāmas banera, taču pašu banera attēlu mēs varam ielādēt un attēlot vēlāk - pēc lapas koda ielādes, padzēšot tagus, kas atzīmē komentāra elementu. To var izdarīt izmantojot notikumu window.onload:

function resolve() {
 document.body.innerHTML = 
  document.body.innerHTML.replace(//g, '$1');
}

window.onload = resolve;

Protams, ka koda ātrdarbības palielināšanai, vajadzētu piešķirt inectar.lv dotajam

`AJAX piemērs`



    
    šim ir jāmainās


  


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_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


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



Neliels javascript framework, lai samazinātu koda garumu
Sat, 11 Aug 2007 15:57:29 +0000
Šajā rakstā ir aprakstītas dažas javascript funkcijas, kas palīdz samazināt un optimizēt javascript koda garumu, īpaši, ja tiek izmantotas AJAX tehnoloģijas.
Šeit aprakstītais javascript framework tiek izmantots arī šīs lapas kodā. To var izmantot javascript koda optimizēšanai gan dažādos statistikas skaitītāju javascript kodos, gan AJAX risinājumos, kur tas dos vislielāko efektu. Raksts ir domāts tiem, kam jau ir priekšzināšanas par javascript un DOM koka izmantošanu.


 
document pielietojums


Sāksim ar šādu rindiņu:

var d=document;


Mainīgais d tagad satur DOM koka elementu document. Tagad pārējā javascript kodā var nomainīt visus document pret d. Piemēram, ja pirms tam bija rakstīts document.getElementById(id), tad tagad to var saīsināt par d.getELementById(id). Uz katru javascript kodā pieminēto document tiek šādā veidā tiek ietaupīti 7 baiti - tātad to atmaksājas darīt, ja document kodā parādās sākot ar 3 reizēm. Varbūt tas nešķiet daudz, bet ja javascript kods ir apjomīgs, tad kopā var kodu samazināt diezgan daudz. Protams, jāņem vērā, ka mainīgo d nedrīkst vairs izmantot citām vajadzībām.



CSS stilu piešķiršana


Ja javascriptā tiek vairākkārt piešķirts kādam elementam kāds CSS stils, tad noderīga varētu būt šāda funkcija:

function stils(el,stils)
	{
	el.setAttribute('style',stils); //Atbalsta visi mūsdienu pārlūki izņemot IE
	el.style.cssText=stils //IE
	}


Kā parametrs tiek padots elements un CSS stils, kuru vēlas piešķirt. Tagad tā vietā, lai katru reizi rakstītu divas rindiņas, lai piešķirtu elementam CSS stilu, pietiek javascript kodā uzrakstīt vienu rindiņu, piemēram, šādu:

stils(el_3,'color:#445');



Elementa izveidošana


Ļoti bieži (īpaši izmantojot AJAX), ir nepieciešams izveidot kādu elementu. Te saīsināt kodu var palīdzēt sekojoša funkcija (izmantojot jau iepriekš aprakstīto elementa document "saīsinājumu":

function ce(el)
	{
	return(d.createElement(el))
	}

Tagad, izmantojot šo funkciju, lai izveidotu (x)HTML elementu  un piešķirtu tā vērtību mainīgajam rindkopa, pietiek ar šādu rindiņu:

rindkopa=ce('p');



Elementa ("bērna") pievienošana DOM kokam


Elementa pievienošanai DOM kokam tiek izmantota sekojoša javascript funkcija:

function ac(el,ch)
	{
	el.appendChild(ch);
	return(el)
	}


Izmantojot šo funkciju, var, piemēram, ievietot xHTML elementā  iepriekš izveidoto elementu , kurš atrodas mainīgajā rindkopa:

var body=d.getElementsByTagName('body');
ac(body[1],rindkopa);

Varbūt sākumā šķiet, ka tas nav pārāk liels ieguvums, taču, izmantojot šeit aprakstītās funkcijas, tagad kā funkciju parametrus norādīt arī citu funkciju rezultātus, iegūstot diezgan lielu koda optimizāciju. Piemēram, šādi:

var body=d.getElementsByTagName('body');
ac(body[1],ac(ce('p'),d.createTextNode('šis ir rindkopas saturs')));

Neoptimizēts javascript kods, lai veiktu šo pašu darbību (ievietotu rindkopu xHTML dokumentā, kurā rakstīts "šis ir rindkopas saturs"), izskatītos šādi:

var body=document.getElementsByTagName('body');
var txt=document.createTextNode('šis ir rindkopas saturs');
var rindkopa=document.createElement('p');
rindkopa.appendChild('txt');
body[0].appendChild('rindkopa');

Ir mazliet garāk, vai ne?

Līdzīgā veidā, veidojot attiecīgas funkcijas ar īsiem nosaukumiem, var saīsināt vēl vairāk javascript kodu, ja tajā ir bieži izmantotas getElementsByTagName() un getElementById() metodes.

Nobeigumā vēl pāris noderīgas funkcijas, kuras var izmantot kodējot kādu uz AJAX bāzētu risinājumu (un ne tikai).



Funkcija, kas izdzēš visus dotā DOM elementa "bērnus" (ieskaitot "mazbērnus", "mazmazbērnus" utt.)



function clearChild(el)
	{
	while(el.childNodes[0])el.removeChild(el.firstChild)
	}



Funkcija, kas veic pretēju darbību escape() (pārvērš dotajā simbolu virknē visus & par &)



function unescapeHTML(str)
	{
	var div = d.ce('div');
	div.innerHTML = str;
	return div.childNodes[0].nodeValue
	}

Pretēja darbība escape() funkcijai ir nepieciešama retāk, taču šī ir, iespējams, pati īsākā javascript funkcija, kas to veic, izmantojot pārlūkprogrammu īpatnības, tāpēc es to ievietoju te, jo nepieciešamības gadījumā šādu funkciju tīmeklī varētu būt diezgan grūti atrast.



Viss javascript framework kods kopā



var d=document;

//CSS stilu piešķiršana
function stils(el,stils)
	{
	el.setAttribute('style',stils); //Atbalsta visi mūsdienu pārlūki izņemot IE
	el.style.cssText=stils //IE
	}

//Elementa izveidošana
function ce(el)
	{
	return(d.createElement(el))
	}

//Elementa pievienošana DOM kokam
function ac(el,ch)
	{
	el.appendChild(ch);
	return(el)
	}

//Visu dotā DOM elementa "bērnu" izdzēšana
function clearChild(el)
	{
	while(el.childNodes[0])el.removeChild(el.firstChild)
	}

//Pretēja darbība escape() (pārvērš visus & par &)
function unescapeHTML(str)
	{
	var div = d.ce('div');
	div.innerHTML = str;
	return div.childNodes[0].nodeValue
	}

Protams, ka tās funkcijas, kas netiek izmantotas kodā, var droši dzēst ārā. Ceru, ka kādam šis raksts noderēs rakstot īsāku javascript kodu!

web.hc.lv - vortāls tīmekļa veidotājiem: Raksti

Autocomplete

Lielākā daļa mājaslapu mūsdienās izmanto jQuery bibliotēku, tāpēc izmantot jQuery UI iekļauto Autocomplete vidžetu sķiet diezgan loģiski.

document.write atlikšana pēc window.onload

Parasti document.write nav iespējams atlikt pēc window.onload notikuma, taču reizēm tas ir ļoti nepieciešams (piemēram, lai paātrinātu lapas ielādes ātrumu, ielādējot reklāmas vēlāk).

`AJAX piemērs`

Neliels javascript framework, lai samazinātu koda garumu

Šajā rakstā ir aprakstītas dažas javascript funkcijas, kas palīdz samazināt un optimizēt javascript koda garumu, īpaši, ja tiek izmantotas AJAX tehnoloģijas.

`document` pielietojums

CSS stilu piešķiršana

Elementa izveidošana

Elementa ("bērna") pievienošana DOM kokam

Funkcija, kas izdzēš visus dotā DOM elementa "bērnus" (ieskaitot "mazbērnus", "mazmazbērnus" utt.)

Funkcija, kas veic pretēju darbību `escape()` (pārvērš dotajā simbolu virknē visus `&` par `&`)

Viss javascript framework kods kopā