Scriptjava Framework - $$().$$().$$().&#

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем perepyk, 5 фев 2012.

  1. perepyk

    perepyk New Member

    Регистрация:
    5 фев 2012
    Сообщения:
    2
    Симпатии:
    0
    ScriptJava Framework

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

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

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

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

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

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

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

    Код (Text):
    <script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
    Для отправки файлов серверу есть такая форма

    Код (Text):
    <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 />
    Пишем для него функцию отправки

    Код (Text):
    <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 может быть таким:

    Код (Text):
    <?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 фреймворк

    Код (Text):
    <script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
    Для проверки поддерживает и браузер кукисы можно использовать следующий код:

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

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

    Код (Text):
    <script type="text/javascript">
    //читаю cookie
    alert($$c.get('test'));
    </script>
    Для удаления установленных кукисов достаточно использовать такой код

    Код (Text):
    <script type="text/javascript">
    //удаляю cookie
    $$c.erase('test');
    </script>
    Отправка формы через Ajax.

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

    Код (Text):
    <script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
    Допустим на странице сайта у нас есть форма

    Код (Text):
    <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 с помощью кода

    Код (Text):
    <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 может быть таким:

    Код (Text):
    <?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 фреймворк

    Код (Text):
    <script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
    Чтобы динамически подключить скрипт, а также после его загрузки выполнить из него код, нужно выпонить следующий код

    Код (Text):
    <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>
    Дописываю вышепоказанный код, теперь он будет запускаться сразу после загрузки сайта:

    Код (Text):
    <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 фреймворк

    Код (Text):
    <script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
    Поместим на сайт такой html код

    Код (Text):
    <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 />
    Пишем код

    Код (Text):
    <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

    Код (Text):
    <?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 запрос';
    }
    }
    ?>

    Остальные примеры смотрите на оф сайте фреймворка
     
Загрузка...

Поделиться этой страницей