Примеры

преобразование ссылок в AJAX «на лету»простой пример <h4><a href=»filter/index.html»>простой пример</a></h4> <div id=»example1″></div> <script> SRAX.Filter.add({url:’/filter/’, id:’example1′}) </script>Изменение адреса запроса <h4><a href=»burda/index.html»>изменение адреса запроса</a></h4> <div id=»example2″></div> <script> SRAX.Filter.add({url:’/burda/’, id:’example2′, urlChanger:function(url, owner){ return url.replace(‘burda’, ‘filter’); }}) </script>пример мульти-фильтра <h4><a href=»url1.html»>пример</a>   <a href=»url2.html»>мульти</a>   <a href=»url3.html»>фильтра</a></h4> <div id=»example3″></div> <script> SRAX.Filter.add({url:[‘url1.html’, ‘url2.html’, ‘url3.html’], id:’example3′, changer:function(url, owner){ return ‘filter/index.html’; }}) […]

~70% всего кода библиотеки — это реализация работы hax. Эта функция выполняет все сложные операции по обработке разных вариантов HTML кода. Можно сказать hax — это полноценное ядро анализа и обработки HTML документов. Она автоматически выделяет и применяет стили и жабаскрипты, сама регламентирует их последовательность загрузки, метод загрузки ручной (через dax) или автоматический (отдавая процесс […]

dax({url:’myurl’, id:’save-data’, form:’myform’, method:’post’, cb:function(resp, cbo){alert(resp.text || resp.xml)}})данные всех полей (input, textarea, select, …) с формы у которой id=’myform’ будут автоматически собраны и отправлены на url=myurl методом postid — определяет внутренний идентификатор потока, предназначен для разделения потоков запроса к серверу, в один и тот же момент времени не может существовать два потока (запроса) с одинаковыми […]

Функция которая вызывается сразу при готовности DOM. Такая функция существует во всех современных жабаскриптовых библиотеках.SRAX.onReady(function(){alert(1)})function mytest(){document.body.appendChild(document.cereateElement(‘div’)).innerHTML = ‘New Div’;}SRAX.onReady(mytest)

<div id=«my-div»></div><script>id(‘my-div’).innerHTML = ‘test1’;//или SRAX.get(‘my-div’).innerHTML = ‘test2’;</script>

JSON (JavaScript Object Notation) — это формат данных, удобный для обработки интерпретатором JavaScript.Cледующий файл выбирает все данные из базы MYSQL, преобразует их в json-формат и отправляет AJAX — обработчику. Обращение к нему с GET-параметрами:id=номер_записиtbl=имя_таблицыjson.php<?phpheader(«Content-Type: application/x-suggestions+json; charset=windows-1251»);//header(‘Content-type: application/json; charset=utf-8’);// подключение в БД MySQLrequire_once($_SERVER[‘DOCUMENT_ROOT’].’/config.php’);$query = mysql_query(‘SELECT * FROM ‘.addslashes($_GET[‘tbl’]).’ WHERE id=’.intval($_GET[‘id’]).’ LIMIT 1′);if($data = mysql_fetch_assoc($query))echo php2json($data);exit;// рекурсивная функция формирования json-последовательности.function php2json($obj){if(count($obj) == 0) return ‘[]’;$is_obj = isset($obj[count($obj) — 1]) ? false : true;$str = $is_obj ? ‘{‘ : ‘[‘;foreach ($obj AS $key  => $value) {   $str .= $is_obj ? «‘» . addcslashes($key, «\n\r\t’\\/») . «‘» . ‘:’ : »;    if (is_array($value))   $str .= php2json($value);   elseif (is_null($value))    $str .= ‘null’;   elseif (is_bool($value))    $str .= $value ? ‘true’ : ‘false’;   elseif (is_numeric($value)) $str .= $value;   else                        $str .= «‘» . addcslashes($value, «\n\r\t’\\/») . «‘»;   $str .= ‘,’;   }return substr_replace($str, $is_obj ? ‘}’ : ‘]’, -1);}?>Общий блок работы AJAX с поддержкой JSON.js.jsfunction ajaxLoad(obj,url,defMessage,post,callback){  var ajaxObj;  if (defMessage) document.getElementById(obj).innerHTML=defMessage;  if(window.XMLHttpRequest){      ajaxObj = new XMLHttpRequest();  } else if(window.ActiveXObject){      ajaxObj […]

filemanager.php<?phpsession_start();// определяем временную директорию, куда грузятся файлы на сервер$tmp_dir = »;if (!isset($_SESSION[‘upload_tmp_dir’])){    $tmp_dir_ok = false;    $tmp_dir = ini_get(‘upload_tmp_dir’);    $tmp_dir_ok = true;    // если директива upload_tmp_dir не задана в php.ini, то    if (!is_dir($tmp_dir) || $tmp_dir==»)    {        // искуссвенным путем определяем временную директорию в системе        $tmp_dir = dirname(tempnam(‘127631782631827’, ‘foo’));        if (!is_dir($tmp_dir))        {            echo «<script>alert(‘Не удается определить временную директорию системы.’);</script>»;            $tmp_dir_ok = false;        }    }    // сохраняем значение временной директории в сессии     if ($tmp_dir_ok)    {        $_SESSION[‘upload_tmp_dir’] = $tmp_dir;    }}?><html><head><meta http-equiv=»Pragma» content=»no-cache»><meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″><script language=»JavaScript»><!—var start_date = null;var start_time = null;                  // время, прошедшее в миллисекундахvar time_limit = 30;                    // тайм-лимит в секундах для опроса сервераvar r = false;                          // XMLHttpRequest-objectvar secs_elapsed = 0;                   // время прошедшее с момента загрузкиvar uploaded = false;                   // флаг загрузкиfunction uploadFile(){    if (document.forms[0].upload_file.value!=»)    {        document.getElementById(‘progressMess’).innerHTML = ‘Подождите ответа сервера…’;        document.forms[0].btnupload.disabled = true;        start_date = new Date();        start_time = start_date.getTime();        uploaded = false;        document.getElementById(‘progressProcents’).style.width = ‘0%’;        setTimeout(«document.forms[0].submit()», 1000);        request();    }    else    {   alert(‘Не выбран файл!’);        return false;    }}/** * Выполняет асинхронный запрос к серверу */function request(){    var n = new Date();    var current_time = n.getTime();    secs_elapsed = Math.round((current_time-start_time)/1000);    iSecs = secs_elapsed%60;    document.getElementById(‘progressTime’).innerHTML = ’00:’+ (iSecs>9 ? iSecs : ‘0’+iSecs);    if (secs_elapsed>=time_limit)    {        document.getElementById(‘progressMess’).innerHTML = ‘Время ожидания истекло…’;        document.forms[0].btnupload.disabled = false;        return false;    }    r = false;    try {        r = new XMLHttpRequest();    }    catch(trymicrosoft)    {        try {            r = new ActiveXObject(«Msxml2.XMLHTTP»);        }        catch (othermicrosoft)        {            try {                r = new ActiveXObject(«Microsoft.XMLHTTP»);            }            catch(failed) { r = false; }        }    }    if (!r)    {        alert(«Error initializing XMLHttpRequest! Your browser does not support XMLHttpRequest object.»);        window.close();        return false;    }    r.open(‘GET’, ‘whileuploading.php’, true);    r.onreadystatechange = progressUpdate;    r.send(null);}/** * Проверяет состояние запроса и обновляет содержимое страницы. */function progressUpdate(){    if (r.readyState==4)    {        if (r.status==200)        {            /*  параметры возвращаются в формате                current_human_filesize|current_filesize|total_filesize            */            var response = r.responseText;            var t = response.split(‘|’);            if (t[0]!=’undefined’) uploaded = true;            document.getElementById(‘progressBytes’).innerHTML = response;            /*if (t[1]>0 && t[2]>0)            {                runProgressBar(Math.round(t[1]/t[2]*100));            }*/            if (uploaded && t[0]==’undefined’)      // загрузка уже выполнена            {                document.getElementById(‘progressMess’).innerHTML = ‘Загрузка завершена…’;                document.forms[0].btnupload.disabled = false;                return;            }            setTimeout(‘request()’, 1000);        }        else if (r.status == 404)            alert(«Error: request URL does not exist»);        else            alert(«Error: status code is » + r.status);    }}//—></script></head><body leftmargin=»0″ topmargin=»0″ rightmargin=»0″ bottommargin=»0″ marginwidth=»1″ marginheight=»1″><iframe name=»upload_frame» src=»upload.php» width=»1″ height=»1″ style=»border: 0;»></iframe><form method=»post» action=»upload.php» enctype=»multipart/form-data» target=»upload_frame»><table border=»0″ cellpadding=»2″ cellspacing=»1″ width=»60%» style=»margin: 10px; border: 1px solid black;»><tr>    <td colspan=»4″><input type=»file» name=»upload_file» class=»input»></td></tr><tr>    <td width=»12%»><b>Загружено</b>:</td>    <td width=»16%» nowrap><span id=»progressBytes» style=»color: blue; font-size: 13px»>undefined</span></td>    <td width=»10%» nowrap><span id=»progressProcents»>0</span> %</td>    <td width=»62%»><span id=»progressMess»> </span></td></tr><tr>    <td><b>Время</b>:</td>    <td colspan=»3″><span id=»progressTime»>00:00</span> сек.</td></tr><tr>    <td colspan=»4″><input type=»button» name=»btnupload» value=»Загрузить» onClick=»uploadFile();»></td></tr></table></form></body></html>?> 

Отравить файл на сервер с использованием стандартных AJAX-приемов у Вас не получится. Однако, не стоит отчаиваться, есть очень простой и крсивый выход.Мы используем невидимый фрейм, в который отправляем результат работы скрипта. Чтобы не потерять результат работы мы его делаем видимым в момент отправки.<form target=»upload_frame» enctype=»multipart/form-data»            onsubmit=»document.getElementById(‘upload_frame’).style.display=’block’;»> <input type=»file» name=»upload_file» /><br /> <input type=»submit» /></form><!— Это […]

Создайте новый файл index.php со следующим содержанием:<head><script language=»javascript» src=»ajax_framework.js»></script></head><body><div id=»myText»>This is my text to modify with edit in place</div><script>new Ajax.InPlaceEditor($(‘myText’), ‘javascript:saveText(«myText»)’, {ajaxOptions: {method: ‘get’}});</script></body>DIV с ID myText содержит текст, который вы будете изменять. Вы также можете использовать и другие теги, текст которых будете изменять, например <span>, <h1>. ajax_framework.js/* XMLHTTPRequest Enable */function createObject() {var request_type;var browser = navigator.appName;if(browser == «Microsoft Internet […]

Этот пример демонтрирует нестандартный подход к AJAX- технологии. Мы будем изменять страницу с помощью javascript, котрой будем динамически загружать с сервера после ввода URL.sm.php<?php// сообщаю, что это будет javascript   header(«Content-Type: application/x-javascript»);   // по $_GET[‘url’] ищу сайт в базе и заполняю массив $row[]   echo ‘apid=document.getElementById(\’otvet\’);’.»\r\n»;   echo «apid.innerHTML='».($row[‘platno’]==0?’Бесплатно’:’Платно’).»‘\r\n».    «apid.style.color=’red’\r\n»;   echo ‘document.form.url.value=»‘.$row[‘site’].'»;’.»\r\n»;?>