picoAjax LogopicoAjax A simple way to JavaScript/Ajax

Małe jest piękne

picoAjax - to niewielka (ok. 60 KB), prosta i szybka biblioteka JavaScript ułatwiająca korzystanie z możliwości oferowanych przez technologię AJAX. Ponadto biblioteka zawiera ponad 150 wyspecjalizowanych funkcji przydatnych w tworzeniu aplikacji internetowych i dynamicznych stron WWW. Widżety picoAjax składają się z kodu JavaScript, HTML i CSS, który można łatwo modyfikować.

Istota technologii AJAX polega na tym, że za pomocą kodu JavaScript można wywołać zdalny serwer, a następnie przetworzyć uzyskane wyniki bez konieczności ponownego ładowania całej strony.
Aplikacja AJAX sprawia wrażenie, że działa w całości na maszynie użytkownika ponieważ dane są pobierane częściowo i w razie potrzeby, a nie jak to ma miejsce w przypadku tradycyjnych aplikacji WWW, gdzie strona jest odświeżana w całości.


Schemat działania witryny opartej o AJAX

Początki AJAX sięgają roku 1996 gdy Microsoft przedstawił swoją technologię Remote Scripting.
Na AJAX po raz pierwszy zwrócono uwagę, gdy Google zaprezentował swoje nowatorskie serwisy (Google Suggest, Google Maps, GMail). Nazwę AJAX wprowadził Jesse James Garrett w swoim artykule ''Ajax: A New Approch to Web Applications'' na początku 2005r.


Wymagania

Właściwości

Dodatkowa funkcjonalność

Lista dostępnych picoFunkcji [ » ] ...

picoAjax HTML DOM

picoAjax - > JavaScript
picoId() - > document.body/document.getElementById()
picoQS() - > document.querySelector()
picoQSA() - > document.querySelectorAll()
picoDOM() - > document.addEventListener("DOMContentLoaded", function(){})
picoTag() - > document.getElementsByTagName()
picoNewTag() - > .document.createElement()
picoAddTag() - > .appendChild()
picoDelTag() - > .remove/.parentNode.removeChild()
picoTxt() - > .innerHTML
picoEvent() - > .addEventListener()
picoReEvent() - > .removeEventListener()
picoPrevent() - > .preventDefault()
picoSetClass() - > .className
picoGetClass() - > .getElementsByClassName()
picoDelClass() - > document.getElementById().className = ""
picoSet() - > .setAttribute()
picoGet() - > .getAttribute()
picoDel() - > .removeAttribute()
picoCSS() - > .style.
picoB() - > .style.border
picoC() - > .style.color
picoF() - > .style.fontFamily
picoH() - > .style.height
picoT() - > .title
picoW() - > .style.width
picoFS() - > .style.fontSize
picoTS() - > .style.textShadow
picoBS() - > .style.boxShadow
picoBC() - > .style.backgroundColor
picoTA() - > .style.textAlign
picoBR() - > .style.borderRadius
picoCur() - > .style.cursor
picoClone() - > .cloneNode()
picoO() - > .style.opacity
picoShow/Hide/Toggle() - > .style.display
picoTxtTag() - > document.createTextNode()
picoTxtContent() - > .textContent
.add - > .add
picoInsert(after/before) - > .insertBefore

Instalacja

W sekcji HEAD strony
<script async src="picoAjax.mini.js"></script>
lub
<script type="text/javascript" src="picoAjax.mini.js"></script>
lub
<script type="text/javascript" src="picoAjax.js"></script>

Przykłady użycia

Przykład 1.
W sekcji BODY

<button onclick="picoLoad ('skrypt.js')">Ładuj plik - *.js</button>

Przykład 2.
W sekcji BODY

<button onclick="picoLoad ('arkusz.css')">Ładuj plik - *.css</button>

Przykład 3.
W sekcji BODY

<button onclick="picoLoad ('plik.jpg','divID','klasaCSS' [,efekt])">Ładuj plik - jpg</button>

divID - identyfikator warstwy (div)
klasaCSS - klasa arkusza stylów CSS
1- efekt fade
2- efekt shake

<div id="divID"></div>

Przykład 4.
W sekcji BODY

<button onclick="picoLoad ('skrypt.php','elID','klasaCSS')">Ładuj plik - PHP</button>

<div id="elID"></div>

Przykład 5.
W sekcji BODY

<button onclick="picoDivToggle ('elID','klasaCSS')">Pokaż/Ukryj</button>

<div id="elID" style="display:none"></div>

Przykład 6.
W sekcji HEAD

<script type="text/javascript">
function Loguj () {
var polaForm= [];
polaForm[0]='login';
polaForm[1]='haslo';
picoForm ('login.php', 'elID', 'klasaCSS', polaForm, true);
}
</script>

W sekcji BODY

<div id="elID"></div>
Login: <input type="text" id='login' />
Hasło: <input type="password" id='haslo' />
<button onclick="Loguj()">Loguj...</button>

Skrypt - login.php

<?php
$x=$_POST['login'];
$y=$_POST['haslo'];

if ($x=='admin' and $y=='123') {
echo 'Zalogowano.';
}
else {
echo 'Zły login lub hasło.';
}
?>

Wskazówki

Weryfikacja poprawności danych w polach formularza:

picoForm ('skrypt.php', 'elID', 'klasaCSS', polaForm, true);

elID - identyfikator elementu
polaForm - tablica pól formularza
true - pola formularza są sprawdzane przez JavaScript

Sprawdzanie adresu e-mail:
<input rel="mail" type="text" id="mail" />

Sprawdzanie numeru NIP :
<input rel="nip" type="text" id="nip" />

Sprawdzanie numeru PESEL:
<input rel="pesel" type="text" id="pesel" />

Sprawdzanie numeru REGON:
<input rel="regon" type="text" id="regon" />

Sprawdzanie numeru telefonu:
<input rel='tel' type="text" id="tel" />

Pole nie jest wymagane:
<input rel='no' type="text" id="tel" />

Przykład 7.
W sekcji HEAD
<script src="picoAjax.mini.js"> </script>

<script>
picoDOM( function() {
var b = picoTag('button',0);
picoTxt(b,'Akcja');

picoSet(b,'title', 'Wczytaj zdjęcie...');
picoC(b,'red'); // lub picoCSS(b, 'color', 'red');
picoEvent(b, 'click', akcja);

function akcja() {picoImg('foto.jpg')};
});
</script>

W sekcji BODY
<button></button>

Przykład 8.
W sekcji HEAD
<script src="picoAjax.mini.js"></script>

<script>
// Drag and drop
picoDOM( function() {
picoDrag('demo');
});
</script>

W sekcji BODY
<div id="demo" style="position:absolute; width:100px; height:100px; background:red"></div>


Demo:

Demo 1 | Demo 2 | Demo 3 | Demo 4 | Demo 5  
Demo 6 | Demo 7 | Demo 8 | Demo 9 | Demo 10
Demo 11 | Demo 12 | Demo 13 | Demo 14 | Demo 15
Demo 16 | Demo 17 | Demo 18 | Demo 19 | Demo 20  
Demo 21 | Demo 22 | Demo 23 | Demo 24 | Demo 25
Demo 26 | Demo 27 | Demo 28 | Demo 29 | Demo 30
Demo 31 | Demo 32 | Demo 33 | Demo 34 | Demo 35
Demo 36 | Demo 37 | Demo 38 | Demo 39 | Demo 40
Eksperyment 1 | Eksperyment 2 | Eksperyment 3 | Eksperyment 4

Licencja: picoAjax jest bezpłatny do zastosowań prywatnych jak i komercyjnych - Licencja MIT.

Pobierz picoAjax: picoAjax v7.7 | md5: a26e10d38dba0c5b497d20b9cc0370f3

Jeśli znalazłeś jakieś błędy lub masz pomysł na zmiany proszę o kontakt

Kontakt: admin[@]picoajax[.]tk

Do góry

Copyright © 2017 Robert J. Kurek. Ostatnia aktualizacja:9.03.2017
Valid XHTML 1.0 Transitional Valid CSS!