|
|
Регистрация | << Правила форума >> | FAQ | Пользователи | Календарь | Поиск | Сообщения за сегодня | Все разделы прочитаны |
|
Опции темы | Поиск в этой теме | Опции просмотра |
#1
|
|||
|
|||
ScriptJava Framework - примеры использования
ScriptJava Framework - $$().$$().$$().$$().$$()...
ScriptJava это JavaScript Framework, который создан для облегчения разработки динамических веб-приложений. ScriptJava Framework * работа с элементами * работа с ajax * динамическая подгрузка скриптов * динамическое создание элементов * динамическая подгрузка css стилей * отправка файлов через ajax * отправка формы через ajax * работа с cookie * работа с событиями * работа с браузером, экраном, числами, элементами Подробный мануал на русском http://scriptjava.net/ Поддерживает все современные браузеры! Краткое описание функций Код:
$$() - получение доступа к элементам $$a() - работа с ajax $$c() - работа с cookie $$e() - работа с событиями $$f() - отправка форм через ajax $$i() - динамическое подключение скриптов стилей и создание элементов $$r() - работа с событием window.onload $$s() - набор полезных функций по работе с экраном, мышью, браузером, элементами, числами и т.д. Код:
$$() $$a() - ajax $$c() - cookie $$e() - event $$f() - forms $$i() - insert $$r() - ready $$s() - scripts Примеры на scriptjava: Отправка файла через AJAX Вначале нужно подключить сам scriptjava фреймворк Код:
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script> Для отправки файлов серверу есть такая форма Код:
<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 /> Пишем для него функцию отправки Код:
<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 может быть таким: Код:
<?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 фреймворк Код:
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script> Для проверки поддерживает и браузер кукисы можно использовать следующий код: Код:
<script type="text/javascript"> //проверяю поддержку cookie браузером if($$c.test()) { alert('браузер поддерживает cookie'); } else { alert('браузер не поддерживает cookie'); } </script> Вот так можно установить кукисы на 10 секунд Код:
<script type="text/javascript"> //устанавливаю cookie $$c.set('test', 'содержимое test', 10); </script> Вот так можно считать кукисы Код:
<script type="text/javascript"> //читаю cookie alert($$c.get('test')); </script> Для удаления установленных кукисов достаточно использовать такой код Код:
<script type="text/javascript"> //удаляю cookie $$c.erase('test'); </script> Отправка формы через Ajax. Вначале нужно подключить сам scriptjava фреймворк Код:
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script> Допустим на странице сайта у нас есть форма Код:
<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 с помощью кода Код:
<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 может быть таким: Код:
<?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 фреймворк Код:
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script> Чтобы динамически подключить скрипт, а также после его загрузки выполнить из него код, нужно выпонить следующий код Код:
<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> Дописываю вышепоказанный код, теперь он будет запускаться сразу после загрузки сайта: Код:
<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 фреймворк Код:
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script> Поместим на сайт такой html код Код:
<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 /> Пишем код Код:
<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 Код:
<?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 запрос'; } } ?> Остальные примеры смотрите на оф сайте фреймворка |