преобразование ссылок в 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»;?>