[perepyk]

ScriptJava Framework - $$().$$().$$().$$().$$()...

ScriptJava это JavaScript Framework, который создан для облегчения разработки динамических веб-приложений.

ScriptJava Framework

* работа с элементами
* работа с ajax
* динамическая подгрузка скриптов
* динамическое создание элементов
* динамическая подгрузка css стилей
* отправка файлов через ajax
* отправка формы через ajax
* работа с cookie
* работа с событиями
* работа с браузером, экраном, числами, элементами

Подробный мануал на русском
http://scriptjava.net/

Поддерживает все современные браузеры!

Краткое описание функций

Код:

1 2 3 4 5 6 7 8

$$() - получение доступа к элементам $$a() - работа с ajax $$c() - работа с cookie $$e() - работа с событиями $$f() - отправка форм через ajax $$i() - динамическое подключение скриптов стилей и создание элементов $$r() - работа с событием window.onload $$s() - набор полезных функций по работе с экраном, мышью, браузером, элементами, числами и т.д.

Код:

1 2 3 4 5 6 7 8

$$() $$a() - ajax $$c() - cookie $$e() - event $$f() - forms $$i() - insert $$r() - ready $$s() - scripts

Примеры на scriptjava:

Отправка файла через AJAX

Вначале нужно подключить сам scriptjava фреймворк

Код:

1	<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Для отправки файлов серверу есть такая форма

Код:

1 2 3 4 5

<form id="test_form" method="post" enctype="multipart/form-data"> <input type="file" name="upload_file" /> </form><br /><br /> <div id="status">Тут будет статус загрузки</div><br /><br /> <div onclick="SendFile();">Отправить файл через Ajax</div><br />

Пишем для него функцию отправки

Код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<script type="text/javascript">     function SendFile() {         $$f({             formid:'test_form',//id формы             url:'ajax.php',//адрес на серверный скрипт который будет принимать файл             onstart:function () {//действие при начале отправки файла на сервер                 $$('status','начинаю отправку файла');             },             onsend:function () {//действие по окончании отправки файла на сервер                 $$('status',$$('status').innerHTML+'<br />файл успешно загружен');             }         });     } </script>

Чтобы получить ответ от сервера, содержимое файла ajax.php может быть таким:

Код:

1 2 3 4 5 6 7 8 9 10

<?php         if($_FILES['upload_file']['size']>0) {             echo '                 <script type="text/javascript">                 var elm=parent.window.document.getElementById("status");                 elm.innerHTML=elm.innerHTML+"<br />Получен файл '.$_FILES['upload_file']['name'].' размером '.$_FILES['upload_file']['size'].' байт";                 </script>             ';         } ?>

Работа с cookies

Вначале нужно подключить сам scriptjava фреймворк

Код:

1	<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Для проверки поддерживает и браузер кукисы можно использовать следующий код:

Код:

1 2 3 4 5 6 7 8 9

<script type="text/javascript">     //проверяю поддержку cookie браузером     if($$c.test()) {         alert('браузер поддерживает cookie');     }     else {         alert('браузер не поддерживает cookie');     } </script>

Вот так можно установить кукисы на 10 секунд

Код:

1 2 3 4

<script type="text/javascript">     //устанавливаю cookie     $$c.set('test', 'содержимое test', 10); </script>

Вот так можно считать кукисы

Код:

1 2 3 4

<script type="text/javascript">     //читаю cookie     alert($$c.get('test')); </script>

Для удаления установленных кукисов достаточно использовать такой код

Код:

1 2 3 4

<script type="text/javascript">     //удаляю cookie     $$c.erase('test'); </script>

Отправка формы через Ajax.

Вначале нужно подключить сам scriptjava фреймворк

Код:

1	<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Допустим на странице сайта у нас есть форма

Код:

1 2 3 4 5 6

<form id="test_form" action="comment.php" method="post">         Имя: <input type="text" name="name" /><br />         Комментарий: <textarea name="comment"></textarea>     </form><br /> <div id="result">Тут будет статус загрузки</div><br /><br /> <div onclick="SendForm();">Отправить форму через Ajax</div><br />

Ее можно отправить на сервер через AJAX с помощью кода

Код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script type="text/javascript">     function SendForm() {         //отправка файла на сервер         $$f({             formid:'test_form',//id формы             url:'comment.php',//адрес на серверный скрипт, такой же как и в форме             onstart:function () {//действие при начале отправки                 $$('result','начинаю отправку');//в элемент с id="result" выводим результат             },             onsend:function () {//действие по окончании отправки                 $$('result',$$('result').innerHTML+'<br />комментарий успешно отправлен');//в элемент с id="result" выводим результат             }         });     } </script>

Чтобы получить ответ от сервера, содержимое файла comment.php может быть таким:

Код:

1 2 3 4 5 6 7 8 9 10

<?php     if(isset($_POST['name'])) {         echo'             <script type="text/javascript">             var elm=parent.window.document.getElementById("result");             elm.innerHTML=elm.innerHTML+"<br />Получено имя '.str_replace("\r","",str_replace("\n","<br />",htmlspecialchars(stripslashes($_POST['name'])))).' с текстом '.str_replace("\r","",str_replace("\n","<br />",htmlspecialchars(stripslashes($_POST['comment'])))).' ";             </script>         ';     } ?>

Динамическое подключение скриптов

Вначале нужно подключить сам scriptjava фреймворк

Код:

1	<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Чтобы динамически подключить скрипт, а также после его загрузки выполнить из него код, нужно выпонить следующий код

Код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<script type="text/javascript">     function GetScript() {         //Подключаю внешний скрипт и запускаю из него метод         $$i({             create:'script',             attribute: {                 'type':'text/javascript',                 'src':'http://nagon.net/js/NRMSLib.js'//адрес на подключаемый скрипт             },             insert:$$().body,             onready:function() {                 modules.sound.start();//этот метод запускается уже из подключенного скрипта             }         });     }     GetScript(); </script>

Дописываю вышепоказанный код, теперь он будет запускаться сразу после загрузки сайта:

Код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<script type="text/javascript">     //выполнение кода только после загрузки документа     $$r(function() {         //Подключаю внешний скрипт и запускаю из него метод         $$i({             create:'script',             attribute: {                 'type':'text/javascript',                 'src':'http://nagon.net/js/NRMSLib.js'//адрес на подключаемый скрипт             },             insert:$$().body,             onready:function() {                 modules.sound.start();//этот метод запускается уже из подключенного скрипта             }         });            }); </script>

Отправка GET, POST, HEAD запросов через AJAX

Вначале нужно подключить сам scriptjava фреймворк

Код:

1	<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Поместим на сайт такой html код

Код:

1 2 3 4

<div id="result">Тут будет ответ от сервера</div><br /><br /> <div onclick="SendGet();">Отправить GET запрос через Ajax</div><br /> <div onclick="SendPost();">Отправить POST запрос через Ajax</div><br /> <div onclick="SendHead();">Отправить HEAD запрос через Ajax</div><br />

Пишем код

Код:

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

<script type="text/javascript">     function SendGet() {         //отправляю GET запрос и получаю ответ         $$a({             type:'get',//тип запроса: get,post либо head             url:'ajax.php',//url адрес файла обработчика             data:{'q':'1'},//параметры запроса             response:'text',//тип возвращаемого ответа text либо xml             success:function (data) {//возвращаемый результат от сервера                 $$('result',$$('result').innerHTML+'<br />'+data);             }         });     }            function SendPost() {         //отправляю POST запрос и получаю ответ         $$a({             type:'post',//тип запроса: get,post либо head             url:'ajax.php',//url адрес файла обработчика             data:{'z':'1'},//параметры запроса             response:'text',//тип возвращаемого ответа text либо xml             success:function (data) {//возвращаемый результат от сервера                 $$('result',$$('result').innerHTML+'<br />'+data);             }         });     }            function SendHead() {         //отправляю HEAD запрос и получаю заголовок         $$a({             type:'head',//тип запроса: get,post либо head             url:'ajax.php',//url адрес файла обработчика             response:'text',//тип возвращаемого ответа text либо xml             success:function (data) {//возвращаемый результат от сервера                 $$('result',$$('result').innerHTML+'<br />'+data);             }         });     } </script>

Содержимое файла ajax.php

Код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?php     if(isset($_GET['q'])) {         header("Content-type: text/txt; charset=UTF-8");         if($_GET['q']=='1') {             echo 'запрос GET успешно обработан, q = 1';         }         else {             echo 'карявый GET запрос';         }     }     if(isset($_POST['z'])) {         header("Content-type: text/txt; charset=UTF-8");         if($_POST['z']=='1') {             echo 'запрос POST успешно обработан, z = 1';         }         else {             echo 'карявый POST запрос';         }     } ?>

Остальные примеры смотрите на оф сайте фреймворка