JavaScript (Статей: 16)

Однажды после работы от скуки сделал для себя простенькое уведомление о куках для ротора.

Решил сделать максимально просто:
1. Проверка наличия куки: Функция 'checkCookieConsent()' проверяет, установлен ли уже куки с согласием пользователя.
2. Установка куки: Функция 'setCookie()' создает куки с названием 'cookieConsent', значением 'accepted' и сроком действия 365 дней.
3. Отображение уведомления: Если куки с согласием пользователя не найдено, отображается уведомление с кнопкой "Понял!".
4. Скрытие уведомления: После нажатия на кнопку "Понял!" куки устанавливается, и уведомление скрывается.

Т.к. я пользуюсь всего одной темой в файл public/themes/default/views/theme.blade.php в body прописать кусок кода:
<div id="cookie-notice">
{{ __('main.cookie_alert_text') }}<button id="accept-cookies">{{ __('main.cookie_alert_button') }}</button>
</div>

<script>
    // Функция для проверки, есть ли уже куки с согласием пользователя
    function checkCookieConsent() {
        return document.cookie.split('; ').some(row => row.startsWith('cookieConsent='));
    }

    // Функция для установки куки
    function setCookie(name, value, days) {
        const d = new Date();
        d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
        const expires = "expires=" + d.toUTCString();
        document.cookie = name + "=" + value + ";" + expires + ";path=/";
    }

    // Если согласие не получено, показать уведомление
    if (!checkCookieConsent()) {
        document.getElementById('cookie-notice').style.display = 'block';

        // Обработчик для кнопки "Понял!"
        document.getElementById('accept-cookies').addEventListener('click', function() {
            setCookie('cookieConsent', 'accepted', 365);
            document.getElementById('cookie-notice').style.display = 'none';
        });
    }
</script>

Так же не плохо бы прописать стили:
 #cookie-notice {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #333;
	color: white;
	padding: 15px;
	text-align: center;
	font-size: 16px;
	display: none;
	z-index: 9998;
}
#cookie-notice button {
	background-color: #4CAF50;
	color: white;
	border: none;
	padding: 10px 20px;
	margin-left: 20px;
	cursor: pointer;
	z-index: 9999;
}
Ещё в resources/lang/ru/main.php наверно было бы не плохо прописать:
	'cookie_alert_text'			 =>	'Этот сайт использует куки для улучшения пользовательского опыта.',
	'cookie_alert_button'		 =>	'Хорошо',
resources/lang/ua/main.php прописать:
	'cookie_alert_text'			 =>	'Цей сайт використовує куки для покращення досвіду користування',
	'cookie_alert_button'		 =>	'Добре',
resources/lang/en/main.php прописать:
	'cookie_alert_text'			 =>	'This site used cookie to improve user experience.',
	'cookie_alert_button'		 =>	'Ok',
чтоб разговаривать с юзверем на его языке.

В итоге получаем такую плашку по низу сайта с текстом и кнопкой о куках, как будто мы серьёзные люди, и намерения наши не менее серьёзны. Так делать, конечно, не круто, но я в рот любил этот Laravel, потому что ничего я в нём не понимаю. Сори faq

image
Недавно задался вопросом с выводом диалога с затухающим и не активным фоном, вышло в две функции. В body создается div #op c длинной и шириной равной текущему документу, с черным фоном и прозрачностью 0.7, поверх него накладывается наш див с диалогом. При клике вне диалога, срабатывает обратный эффект исчезновение диалога и возврат нормального фона.
Пример
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> 
    <head> 
        <script type="text/javascript" src="/public/js/jquery.min.js"></script> 
        <script type="text/javascript"> 
            function mydialog(id) 
            { 
                $(id).show('slow'); 
                $('<div id="op" style="position: absolute;z-index:100;" onclick="op_close()"></div>').insertBefore('body'); 
                $('#op').css({ 
                    height: $(document).height(), 
                    width:  $(document).width(), 
                    background: 'black' 
                }).fadeTo('slow', '0.7'); 
           } 

           function op_close() 
           { 
               $('#op').fadeOut('slow'); 
               $('#dialog').fadeOut('slow'); 
           } 
        </script> 
    </head> 
        <body> 
           <div id="dialog" style="width: 700px;left: 30%;position: absolute;z-index: 101;display:no ne;" onclick="mydialog(this)"> 
              Содержимое диалога 
           </div> 

        </body> 
</html>
Уже давно понравилась идея на сайте вконтакте.ру, когда вводишь определенное колличество переносов строки, то поле ввода становиться более широкое.

Зайдя на один блог и решив написать свою запись, мне не понравилось что поле ввода очень маленькое для блога (слава богу есть плагин для изменения размера поля ввода вручную)

В общем решил это дело решить на js

<script type="text/javascript">
  function resizeTextarea(event, key)
  {
      if (event.keyCode == 13) {
          if (typeof self.totalEnter != 'number') {
              totalEnter = 1;
          }

          totalEnter++;   
                
          if (totalEnter > 3) {
              key.rows = key.rows + 1;
          }                           
      }
  } 
</script>

Использовать так:
<textarea cols="55" rows="3" name="message" onkeypress="javascript:resizeTextarea(event, this)"></textarea>

Исправно работает на: Opera 11.11, Firefox 4.0.2, Google Chrome 12.0.742.100 и IE 8

З.ы в js не силен, недавно его начал изучать
З.ы.ы Специально для http://7je.ru
Замечательно, когда у посетителя есть возможность заходить на Ваш сайт автоматически при запуске браузера. Необходимо предоставить ему эту возможность... Один клик по ссылке и дело сделано.

Для нашей задачи воспользуемся JavaScript-ом и гипертекстовой ссылкой. <A onclick="strt(this); return false;" href="Ваш URL"> Сделать стартовой </A>

< SCRIPT language=JavaScript>
< !--
function strt(f) 
{
   	 if ( (navigator.appVersion.indexOf('MSIE 5.') !=-1) || 
   (navigator.appVersion.indexOf('MSIE 6.')!=-1)) 
   { 
      f.style.behavior='url(#default#homepage)'; 
      f.setHomePage('Ваш URL'); 
} }
// -->
</SCRIPT>
Просто и быстро осталось только проверить... smile
Примечание: этот скрипт будет работать только в Internet Explorer 5.x и 6.x.
Очевидно, что для других браузеров целесообразно не отображать ссылку.
<SCRIPT language=JavaScript> 
<!--
function strt(f) 
{ 
   f.style.behavior='url(#default#homepage)'; 
   f.setHomePage('http://web-web-web.ru/'); 
}
if ((navigator.appVersion.indexOf('MSIE 5.')!=-1) || (navigator.appVersion.indexOf('MSIE 6.')!=-1)) 
   document.write('<A onclick="strt(this); return false;"href="#"> сделать стартовой</A>'); 
// -->
</SCRIPT>
Фреймы давно являются предметом спора. У них есть сторонники и противники(последних больше). Сначала рассмотрим положительные моменты. Используя фреймы легко создавать навигационные меню, структурировать отображаемую информацию, сократить время загрузки страницы, т.к. общие элементы загружаются только один раз. Теперь посмотрим на недостатки. Такая конструкция сайта не позволяет полноценно использовать META-данные, а также, что не менее важно, возникает проблема адресной строки.
Проблема адресной строки
Рассмотрим проблему адресной строки. Её суть в следующем. При использовании фреймов на сайте используется одна страниц, которая указывает местоположение фреймов.
Приведём пример такой страницы:
<HTML>
 <HEAD> 
   <TITLE> 
   </TITLE> 
  </HEAD> 
 <FRAMESET ROWS="60px,*”>
  <FRAME name=”menu”  SRC="Навигационное меню.html">
  <FRAME name=”main” SRC="Информационная часть.html">
 </FRAMESET>
 <NOFRAMES>
 </NOFRAMES>
</HTML>
После загрузки этой страницы происходит загрузка информации во фреймы. Внутри этих фреймов происходят все переходы пользователя по страницам сайта. В адресной строке всегда отображается только путь к начальной странице, который не изменяется при переходах. Посетитель не знает, где он находится в данный момент.

Если посетитель сразу попадает не на главную страницу сайта (например, из поисковика), то это не приводит к воссозданию общей структуры фреймов. Это является причиной того, что владелец сайта не может указать (например, в рамках рекламной компании) адрес на внутреннюю страницу сайта.

Несмотря на сложность ситуации, эта проблема не является неразрешимой. Тем, кому интересно, предлагаю перейти к обзору решений.Решение проблемы есть

Подумаем над тем, как можно решить проблему адресной строки. Рассмотрим возможные способы решений, их плюсы и минусы.

Ранее бал рассмотрен пример фреймовой структуры. Будем рассматривать различные способы решения этой проблемы именно на нём.

Идея заключается в следующем: при загрузке страницы, содержащей информационную часть, будем проверять окружение страницы и, если требуемая фреймовая структура отсутствует – создадим её при помощи скрипта.

Возможны три случая:

посетитель зашёл на страницу, содержащую фреймовую структуру;
посетитель зашёл на одну из информационных страниц;
посетитель попал на страницу с навигационным меню.
В первом случае после выполнения проверки никаких действий не требуется. Второй и третий практически идентичны, поэтому далее будем рассматривать только второй случай.

И так, посетитель попадает “куда не надо”. В самое начало страницы вставляем скрипт, который будет создавать фреймовую структуру.

Реализация решения возможна как на стороне клиента, так и на стороне сервера. Основной недостаток реализации на стороне клиента очевиден – зависимость от возможностей и настроек клиента. Например, на компьютере пользователя запрещено выполнение скриптов. Второй вариант не будет работать, если на сервере нет поддержки PHP и ASP.

В общем всё ясно, теперь перейдём к реализации решения на стороне клиента.JavaScript-решение.
Для решения поставленной задачи воспользуемся JavaScript-ом. При таком подходе есть ограничение- не все браузеры поддерживают JavaScript, а в ряде случаев пользователи сами отключают скрипты.

Перейдём теперь к делу. Вначале проверяем окружение страницы, а затем, в случае отсутствия требуемой фреймовой структуры, создаём её.

Создадим файл framesunits.js, в котором будет содержаться функция TestFrames. Она будет выполнять все необходимые действия.
function TestFrames(URL)
{
  if (window.name != "main")
  {
    window.name="root";
    document.write("<frameset rows='60px,*'>");
    document.write("<frame name='menu' src='menu.html'>");
    document.write("<frame name='main' src='"+URL+"?'>");
    document.write("</frameset>");
  }
 }
Вначале мы проверяем название окна, в который загружается страница: if (window.name != "main"). Если имя окна и название фрейма не совпадают, значит надо создать фреймовую структуру. Это делается динамически с использованием метода write объекта document.

К каждой странице сайта подключаем файл framesunits.js и вызываем функцию TestFrames. Теперь страницы сайта будут иметь такую структуру:
<html>
<head>
    ...
</head>
<script language="JavaScript" src="framesunits.js">
</script>
<script language="JavaScript">
   TestFrames(document.URL);
</script>
<body>
    ...
</body>
</html
При таком подходе к решению данной задачи исчезает необходимость в файле, содержащем фреймовую структуру. PHP-решение
Для реализации решения проблемы адресной строки на стороне сервера воспользуемся PHP. При таком подходе сайт станет доступным большему числу посетителей.

Проверять окружение страницы будем по другому (не так, как при использовании JavaScript). Загрузку документа во фрейм будем выполнять с параметром frames=yes. При открытии страницы проверяем этот параметр, и в случае необходимости динамически создаём фреймовую структуру. Ниже приведён код, который за это отвечает.
<?php
  $frame=$HTTP_GET_VARS['frame'];
  if ((!isset($frame))||($frame!='yes'))
  {
  ?>
    <frameset rows="60px,*">
      <frame name="menu" src="menu.php">
      <frame name="main" src="index.php?frame=yes">
    </frameset>  
    <noframes>
    </noframes>
  <?php 
 }
?>
Помещаем код в файл frames.php. Теперь необходимо подключить его к каждой странице сайта. Ниже приведён пример такой страницы.
<html>
<head>
  <title>
	frames
  </title>
</head>
<?php
 require('frames.php');
?>
<body>
  	...
</body>
</html>
В данном случае, как и при реализации на стороне клиента нет необходимости отдельно создавать HTML документ, описывающий фреймовую структуру.

Среди тех, кто знает как заставить работать фреймы должным образом, меньше противников фреймов.
Для очистки формы существует специальная кнопка Reset, при нажатии на которую данные формы возвращаются в исходное значение. Если ввести свои данные в форму, а затем нажать на такую кнопку, то все введенные данные вернутся в первоначальное значение, которое было до ввода пользователя. Поэтому с позиции удобства кнопка Reset приносит лишь вред, ведь можно случайно нажать на нее и обнулить результаты ввода. Тем не менее, иногда возникает задача очистки формы посредством JavaScript. Для этого используется метод reset, он применяется следующим образом (пример 1).
Пример 1. Использование метода reset
document.forms["имя формы"].reset() или
document.forms.имя формы.reset(
Рассмотрим следующую задачу, где очистка формы может весьма пригодиться. Для сайта, преимущественно состоящего из статей, полезным добавлением может послужить форма написания пользовательского комментария. Здесь существует два основных подхода.

В первом случае, после ввода текста и нажатия на кнопку Submit, данные отправляются на сервер. Затем текущая страница перезагружается в браузере, появляется опять та же статья, но уже с добавленным комментарием, обычно внизу страницы. Чем больше добавлено комментариев, тем медленнее загружается документ и тем больше времени приходиться ожидать при добавлении нового.

Во втором случае, после отправки формы комментария на сервер, открывается новое окно, в котором запускается программа-обработчик данных и сообщается, что текст добавлен (или не добавлен и почему). Автоматической перезагрузки страницы не происходит, чтобы убедиться, что с комментарием все в порядке, можно сделать это <вручную>. При этом форма самостоятельно не очищается, а это может сбить пользователя с толку. Ведь он будет лишний раз себе ломать голову, получилось у него или нет отправить комментарий на сервер. Вот тут как раз и пригодится очистка формы с помощью JavaScript.

Достоинства и недостатки присущи каждому подходу, здесь мы не будем вдаваться в подробности и разбирать их. Попробуем лучше применить метод reset на практике, используя второй описанный подход для добавления комментария.

Для создания нового окна воспользуемся методом window.open, который позволяет управлять отображением параметров окна. В частности, зададим у него жесткий размер 400 на 300 пикселей, уберем меню, полосы прокрутки и строку состояния. Важно дать новому окну какое-нибудь имя, чтобы иметь возможность выводить текст в данном окне, а не текущем. В примере окно именуется popmsg.

Воспользуемся тем, что тег FORM имеет параметр target, он работает аналогично параметру у фреймов, а именно, загружает результат выполнения серверной программы, указанной в параметре action, в заданное окно или фрейм. Указав значение target=popmsg, мы перенаправляем вывод в новое окно с именем popmsg, созданное при помощи JavaScript.

При отправке формы на сервер генерируется событие onSubmit, на которое мы <навешиваем> свою функцию popupMsg. Эта функция проверяет, все ли данные введены и в случае успеха создает новое окно с именем popmsg, куда загружается результат выполнения серверной программы. После чего форма комментария очищается методом reset (пример 2).
Пример 2. Применение очистки формы
<html>
<body>
<script language="JavaScript">

function popupMsg(f) {

ok = 1
msg = ""

// Вначале проверяем данные на корректность.

if(!f.name.value) { ok = 0; msg = "Имя\n" }
if(!f.text.value) { ok = 0; msg += "Текст комментария" }

if(ok) {

window.open("", "popmsg", "width=400, height=300, status=0, menubar=0, location=0 resizable=0 directories=0 toolbar=0")
f.submit()
f.reset()

} else alert("Не указаны следующие данные:\n" + msg)

}

</script>

<form method=POST action=/cgi-bin/addcomment.cgi target=popmsg name=comment onSubmit="popupMsg(this); return false">

<table width=100% border=0 cellspacing=0 cellpadding=4>
<tr> 
<td align=right valign=top>Имя</td>
<td><input name=name maxlength=50 size=20 type=text></td>
</tr>
<tr> 
<td align=right valign=top>E-mail</td>
<td><input name=email maxlength=50 size=20 type=text></td>
</tr>
<tr> 
<td align=right valign=top>Комментарий</td>
<td><textarea name=text cols=45 rows=10></textarea></td>
</tr>
<tr> 
<td>&nbsp;</td>
<td><input type=submit value="Добавить комментарий"></td>
</tr>
<tr> 
</tr>
</table>
</form>

</body>
</html>
Для удобства, при вызове функции popupMsg используется ключевое слово this, оно позволяет обращаться к форме через аргумент f, указывающий на форму.
Здравствуйте.
Как и моя прошлая статья, эта ориентированна на опытных пользователей и потому содержит только теоретические сведения, реализацию идеи могу предоставить совершенно бесплатно администратору данного сайта и знакомым мне пользователям.
Появление не так давно метода асинхронной передачи данных и запросов небольших порций данных побудило меня к разделению серверной и клиентской части программы дабы запретить перезагрузку статических частей страницы. Для этого я разделил веб-программирование на следующие уровни: разметка, дизайн, клиентское исполнение, протокол "интерфейс-сервер", серверное исполнение, база данных. Все кроме протокола уже давно существует в веб-программировании, потому я поставил задачу написать способ передачи и принятия любых объектов между клиентом и сервером, при чем так, чтобы эти объекты выглядели после передачи именно так, как они выглядели до. Более того, необходима была возможность вызова определенных функций сервера и передача в них аргументов из клиентской части. Мной был написан протокол который позволяет: передавать любые объекты (примитивные типы, объекты любой вложенности, массивы любой вложенности) так, чтобы после передачи они не теряли своих объектных свойства, вызывать серверные функции из клиентской части программы.
Написанный мной протокол использует методы сериализации и десериализации данных на уровне XML, при этом появляется возможность передавать объекты любой сложности без потерь (а в совокупности с огромным выигрышем) в производительности и затратам трафика.
Приведу пример передачи массива от клиента, серверу:
//на клиенте
протокол = new ПротоколИС();
протокол.Данные = new array(1,2,3);
протокол.Адрес = 'server.php';
протокол.сериализовать();
протокол.запрос();
//на сервере
$протокол = new ПротоколИС();
$протокол->Десериализовать();
echo &протокол->Данные[1]; // вернется 2
AJAX. Отправка данных методом POST.

Основное преимущество POST запросов – это их большая безопасность и функциональность по сравнению с GET-запросами. Поэтому метод POST чаще используют для передачи важной информации, а также информации большого объема. В данном уроке мы напишем AJAX приложение для добавления новой информации о клиентах, отправка запроса и получение ответа будет производиться именно методом POST.

Прежде всего советую изучить предыдущий урок, в нём мы рассамтривали GET запросы и написали web-приложение для просмотра информации о клиентах из БД. Структура таблицы осталась прежней:

CREATE TABLE `Customers` (
`CustomerId` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`Name` varchar(255) NOT NULL default '',
`Adress` varchar(255) NOT NULL default '',
`Phone` varchar(255) NOT NULL default '',
`E-mail` varchar(255) NOT NULL default ''
);

Давайте напишем наше "ядро" на PHP. Скрипт будет вносить новую запись в таблицу с клиентами, сохраним его под именем SaveCustomer.php.
<?php

header("Content-Type: text/plain; charset=windows-1251");
        
        /* данные переданные методом POST */
        
        $name   =  $_POST['txtName']; 
        $adress =  $_POST['txtAdress'];
        $phone  =  $_POST['txtPhone'];
        $email  =  $_POST['txtEmail'];
        
        $status = "";
        
        /* всё что нужно для подключения к MySQL серверу. замените на своё. */
    
        $host = "localhost"; 
        $user = "user";
        $pass = "pass";
        $database = "database";
        
        $link = mysql_connect($host,$user,$pass) or die(mysql_error());
        @mysql_select_db($database) or $status = "Невозможно открыть базу данных $database";
        mysql_query("SET NAMES cp1251");
        
        /* фильтруем все спец-символы. защита от SQL Injection */
        
        $name = mysql_real_escape_string($name);
        $adress = mysql_real_escape_string($adress);        
        $phone = mysql_real_escape_string($phone);
        $email = mysql_real_escape_string($email);        
        
        /* Тоже немаловажная часть. Решает все проблемы с кодировкой русских символов.*/
        
        $name = iconv("UTF-8", "WINDOWS-1251", $name);   
        $adress = iconv("UTF-8", "WINDOWS-1251", $adress);   
        $phone = iconv("UTF-8", "WINDOWS-1251", $phone);   
        $email = iconv("UTF-8", "WINDOWS-1251", $email);   
        
        $query = "INSERT INTO `Customers`(`Name`,`Adress`,`Phone`,`E-mail`) VALUES('$name','$adress','$phone','$email')";
        
        if($result = mysql_query($query)) {
            $status = "Добавлен клиент с идентификатором ".mysql_insert_id();
        } else {
            $status = "При добавлении нового клиента произошла ошибка. Информация не была записана.";
        }
        
        mysql_close($link);
        
        echo $status; /* выводим статус исполнения */
?>

Код прост и можно сказать "самодокументируется". Вкраце механизм работы: беруться POST данные, фильтруются на спец-символы, перекодируются в кирилицу из UTF-8, затем пробуем занести их в нашу таблицу. В случае успеха возвращается идентификатор нового клиента, если произошла ошибка, пользователя об этом тоже оповестят.

А теперь наш AJAX-интерфейс (saver.html), коментарии внутри кода.

<html>
<head>
<title>Добавление информации о клиентахtitle>
<meta http-equiv="Content-Type: text/html; charset=windows-1251">

<script language="JavaScript">

function createXMLHttp() {
if(typeof XMLHttpRequest != "undefined") { // для браузеров аля Mozilla

return new XMLHttpRequest();
} else if(window.ActiveXObject) { // для Internet Explorer (all versions)
var aVersions = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",
"MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp",
"Microsoft.XMLHttp"
];
for (var i = 0; i < aVersions.length; i++) {
try { //
var oXmlHttp = new ActiveXObject(aVersions[i]);

return oXmlHttp;
} catch (oError) {

}
}
throw new Error("Невозможно создать объект XMLHttp.");
}
}

/* Очень важная функция, обратите на неё внимание.
Формирует строку запроса "name1=value1&name2=value2&name3...".
Принимает один аргумент - ссылку на форму.
*/

function getRequestBody(oForm) {
var aParams = new Array();
for(var i = 0; i < oForm.elements.length; i++) {
var sParam = encodeURIComponent(oForm.elements[i].name);
sParam += "=";
sParam += encodeURIComponent(oForm.elements[i].value);
aParams.push(sParam);
}
return aParams.join("&");
}


/* В этой ф-ции мы создаём объект XmlHttp, формируем запрос, инициализируем перехватчик состояний
onreadystatechange, и посылаем наш запрос.

Обратите внимание, что во втором аргументе метода open(..) мы передаём
ссылку на oForm.action, это сделано как из соображений безопасности, так и ради
того что-бы сценарий можно-было бы использовать для работы с несколькими страницами.

Так-же, стоит отметить факт отправки дополнительного заголовка: "appilaction/x-www-form-urlencoded"
Большинство языков (в том числе и PHP), требуют этого, для корректного выполнения
синтаксического анализа пришедших данных. Этот момент очень важен.

*/

function sendRequest() {
var oForm = document.forms[0];
var sBody = getRequestBody(oForm);
var oXmlHttp = createXMLHttp();

oXmlHttp.open("POST",oForm.action, true);
oXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

oXmlHttp.onreadystatechange = function() {
if(oXmlHttp.readyState == 4) {
if(oXmlHttp.status == 200) {
saveResult(oXmlHttp.responseText);
} else {
saveResult("Ошибка: " + oXmlHttp.statusText);
}
}
};

oXmlHttp.send(sBody);
}

function saveResult(sText) {
var sElem = document.getElementById("divStatus");
sElem.innerHTML = sText;
}


script>
head>
<body>
<center>
<form method="POST" action="SaveCustomer.php" OnSubmit="sendRequest(); return false">
<pre>
<p>Ввведите сведения о клиенте:<br>
Имя: <input type="text" name="txtName" value=""><br>
Адрес: <input type="text" name="txtAdress" value=""><br>
Телефон: <input type="text" name="txtPhone" value=""><br>
E-mail: <input type="text" name="txtEmail" value=""><br>
<input type="submit" value="Отправить">p><br>
pre>
form>
<pre><div id="divStatus">div>pre>
center>
body>
html>

Вот что в итоге должно получиться

Надеюсь урок для вас прошёл не зря! До новых встреч :-)

(Источник)
AJAX. Используем GET запросы.

Пришло время создать реальное и полезное web-приложение. В данном уроке будет рассмотрено взаимодействие с сервером через GET запросы, для этого мы напишем небольшой php-скрипт извлекающий информацию о сотрудниках из базы данных c использование AJAX технологии. В качестве СУБД будем использовать MySQL.

Итак, приступим. Для начала давайте создадим таблицу в которой будет содержаться информация о наших клиентах. Делается это следующим SQL запросом:

CREATE TABLE `Customers` (
`CustomerId` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`Name` varchar(255) NOT NULL default '',
`Adress` varchar(255) NOT NULL default '',
`Phone` varchar(255) NOT NULL default '',
`E-mail` varchar(255) NOT NULL default ''
);

Давайте "забъём" туда некую информацию:

INSERT INTO `Customers`(`Name`,`Adress`,`Phone`,`E-mail`) VALUES('Иванов Иван Иванович','Московская 34, дом 3, кв. 67','8-111-777-95-64','ivanov@pentagon.gov');
INSERT INTO `Customers`(`Name`,`Adress`,`Phone`,`E-mail`) VALUES('Петр Петрович Сидоров','Деребасовская 66, дом 12, корпус 7, кв. 1','111-56-77','sidorov@mil.gov');
INSERT INTO `Customers`(`Name`,`Adress`,`Phone`,`E-mail`) VALUES('Рубан Анатолий Альбертович','ул. имени Патриса Лумумбы 66, кв 666','666-666-666','ruban@jabadabadu.com');

Для "тэст-драйва" этого вполне достаточно. Можете добавить ещё кого-нибудь, по вкусу ;-) Теперь создадим собственно ядро. Это будет PHP скрипт извлекающий из БД информацию о клиенте по его уникальному идентификатору.

Здесь всё просто. Берём id (строка 5), пробуем подключиться к серверу БД (кстати, не забудьте поменять настройки подключения), составляем запрос, фильтруем все спец символы в нём на случай потенциальной атаки злоумышленника (строка 16), далее мы исполняем этот запрос и заносим информацию в одну результирующую строку.
<?php

header("Content-Type: text/plain; charset=windows-1251");
 
    $sId = $_GET['id'];
 
    
    $host = "localhost";
    $user = "user";
    $pass = "pass";
    $database = "database";
 
    $link = mysql_connect($host,$user,$pass) or die(mysql_error());
    mysql_query("SET NAMES cp1251");
    
    $query = mysql_real_escape_string("SELECT * FROM `Customers` WHERE `CustomerId` = $sId"); 
    
    @mysql_select_db($database) or ($info = mysql_error());
    
    if($result = mysql_query($query) and mysql_num_rows($result) > 0) {
        $values = mysql_fetch_array($result,MYSQL_ASSOC);
        $info = $values['Name']."
".$values['Adress']."
Phone: ".$values['Phone']."
 E-mail: ".$values['E-mail']."
";
    } else {
        $info = "There is no client with such id!";
    }
    
    mysql_close($link);
    
    echo $info;
    
?>

Один момент. Почему же в 3-й строке мы указали Content-Type: text/plain а не text/html? В данном случае лучше всё таки определить тип данных как text/plain потому что страница содержит не только HTML код. Так-же необходимо явно указать кодировку в заголовке, в случае если мы используем русские буквы, иначе начнутся проблемы. Вобщем с этим разобрались. Сохраним сценарий под именем customers.php.

Настало время подготовить нашу AJAX страничку (info.html), которая будет посылать GET запрос и получать от сервера информацию о клиентах:

<html>
<head>

<title>Информация о клиентах.title>
<meta http-equiv="Content-type:text/html" charset="cp1251">
<script language="JavaScript">


function createXMLHttp() {
if(typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
var aVersions = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",
"MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp",
"Microsoft.XMLHttp"
];
for (var i = 0; i < aVersions.length; i++) {
try {
var oXmlHttp = new ActiveXObject(aVersions[i]);
alert(aVersions[i]);
return oXmlHttp;
} catch (oError) {

}
}
throw new Error("Невозможно создать объект XMLHttp.");
}
}

function displayCustomerInfo(sText) {
sElem = document.getElementById("txtCustomerInfo");
sElem.innerHTML = sText;
}

function getRequest() {
var sId = document.getElementById("txtCustomerId").value;
var oXmlHttp = createXMLHttp();
oXmlHttp.open("GET","customers.php?id="+sId,true);
oXmlHttp.onreadystatechange = function() {
if(oXmlHttp.readyState == 4) {
if(oXmlHttp.status == 200) {
displayCustomerInfo(oXmlHttp.responseText);
} else {
displayCustomerInfo("Ошибка: " + oXmlHttp.statusText);
}
}
};
oXmlHttp.send(null);
}

script>

head>

<body>
<center>
Введите идентификационный номер: <input type="text" id="txtCustomerId"> <input type="button" onClick="getRequest()" value="Запрос"><br><br>
<div id="txtCustomerInfo">div>
center>
body>

html>

Здесь всё тоже не так сложно как кажется на первый взгял :-)
Есть три функции. createXMLHttp() - занимается тем что создаёт объект XMLHttp, особенность в том что нет привязки к конкретному браузеру.
getRequest() - эта функция отправляет асинхронный GET запрос нашему сценарию customers.php и получает ответ. Когда ответ получен, вызывается функция displayCustomerInfo(), она рамещает полученные данные в заранее созданом под эти цели div-елементе.
Вы не поверите, но это конец! Наше творение работает, и все счастливы :-)

(Источник)
Как заставить AJAX читать между строк

Дмитрий Шейко
ведущий программист Red Graphic Systems


На страницах вашего сайта содержится множество специализированных терминов. Когда пользователь просматривает сайт, у него могут возникать вопросы касательно этих терминов. Как сделать так, чтобы посетитель сайта по мере возникновения вопросов мог незамедлительно получать на них ответы? Раньше термины на страницах сайта оформлялись как ссылки и пользователь при желании мог кликать по ним и получать окно с контекстной подсказкой. Это подход достаточно неуклюжий, он отнимает у пользователя слишком много времени - на то, чтобы кликнуть по ссылке, дождаться загрузки окна и затем закрыть окно. В эпоху AJAX мы можем быть ближе к пожеланиям пользователей. Мы можем сделать так, чтобы уже при наведении мыши на термин незамедлительно появлялось сообщение с подсказкой и как только курсор мыши сдвинут с термина, сообщение исчезало. Наличие этого сервиса не отразится на объеме страниц сайта. При запросе контекстной подсказки Java Script будет обращаться к внешнему словарю, получать содержание и отображать его.

Метод получения информации по неявному запросу может найти применение не только в словаре терминов. Обращали ли вы внимание на ссылки с двойным подчеркиванием в таких проектах как hotscripts.com и devarticles.com? Это контекстная реклама на основе движка IntelliTXT компании Vibrant Media. При наведении курсора мыши на подобную ссылку появляется окно с рекламным предложением на соответствующую тему. Эта технология уже получила название in-text advertising.

Все чаще и чаще подобный метод применяется и на новостных порталах. Посетители видят на главной странице портала лишь заголовки новостей. Однако при наведении курсора мыши на заголовок новости они получают ее краткое описание. Таким образом, на главной странице портала можно вместить куда как больше новостей. Посетитель портала увидит заголовки и для того, чтобы получить анонсы новостей, ему будет достаточно пробежаться курсором мыши по заголовкам.

Давайте теперь рассмотрим, каким образом реализуется контекстная подсказка с помощью AJAX. Программисту, освоившему этот метод, не составит труда заставить портал комментировать новости по запросу или же написать модуль in-text advertising.

Итак, очевидно нам следует позаботиться об окне сообщения, того самого, которое будет появляться каждый раз, когда посетитель наводит курсор на термин. Для того, чтобы окно появлялось и исчезало мгновенно, следует поместить его на скрытом DIV.
<div id="InstantMessage" class="instant_message"> </div>

Для простоты эксперимента мы можем оформить его в стиле системных сообщений MS Windows.
<style>
.instant_message { padding: 5px; font-size: 12px; font-family: Arial; visibility: hidden;
position: absolute; width: 240px; border: outset 2px #FFFFFF; background: #D4D0C8}
.instant_message a { width: 240px; padding: 2px 17px; color: black; text-decoration: none;
cursor: default}
.instant_message a:hover {color: #ffffff; background: #0A246A}
</style >

Окно должно появиться в тот момент, когда посетитель навел курсор мыши на термин и исчезнуть, когда курсор мыши будет за пределами термина. Причем, в тот самый момент окно должно содержать уже не пробел, а текст определения термина. Таким образом, мы должны поместить термины в тексте документа в inline тег, поддерживающий события onMouseOver и onMouseOut. Первому событию следует назначить функцию JavaScript, которая получит определение термина, поместит его в окно сообщения и покажет окно. Второму событию требуется назначить функцию, которая просто скроет окно сообщения.
<a onmouseover="getDefinition('термин', event);"
onmouseout="hideMessage();">термин</a>

В параметре функции, отображающей окно (getDefenition) сообщения надо указать термин. Этот термин будет использован для запроса текста определения посредством AJAX. Так как при показе окна нам потребуется его позиционировать под курсором мыши для поддержки Gecko-базированых браузеров, в эту функцию также следует передать параметр event. Функция для сокрытия окна (hideMessage) не требует каких-либо параметров.

Теперь наша задача - при вызове функции getDefinition заставить JavaScript позиционировать окно сообщения.
function adjustMessage(evt) {
MessageObj = document.getElementById('InstantMessage');
if (isThisMozilla) event=evt;
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < MessageObj.offsetWidth)
MessageObj.style.left = document.body.scrollLeft +
event.clientX - MessageObj.offsetWidth;
else
MessageObj.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < MessageObj.offsetHeight)
MessageObj.style.top = document.body.scrollTop + event.clientY -
MessageObj.offsetHeight;
else
MessageObj.style.top = document.body.scrollTop + event.clientY;
MessageObj.innerHTML = 'Loading...';
MessageObj.style.visibility = "visible";
}

Итак, мы имеем окно сообщения, рапортующее о загрузке данных. Теперь следует выполнить запрос к контроллеру за определением термина. Вы можете написать собственные функции для обслуживания AJAX запросов. Но если вы только начинаете работать с AJAX, я могу порекомендовать вам готовую библиотеку от Yahoo. В этом случае запрос будет выглядеть так:
function getDefinition(term,evt){
adjustMessage(evt);
var request = YAHOO.util.Connect.asyncRequest('POST',
'http://адрес_контроллера', callback, 'term='+term);
}

Раз мы запрашиваем контроллер, очевидно, нам надлежит его написать. В общем случае, это самая простая часть. Задача контроллера - вернуть описание термина, переданного в POST. Каким бы языком программирования мы не пользовались при написании контроллера, нам достаточно выполнить несколько простейших операций.

* соединиться с базой данных
* выполнить SQL запрос для получения определения термина
* отобразить на консоль результат в следующем виде:
{
"errormsg" : "в случае ошибки ее код",
"content" : "текст определения"
}

Это структура данных, известная как JSON. Она воспринимается JavaScript в явном виде, как "родная". В случае использования AJAX-библиотеки YAHOO ответ контроллера обслуживается следующей конструкцией
var handleSuccess = function(o){
if(o.responseText !== undefined){
showMessage(o.responseText);
}
};
var handleFailure = function(o){
if(o.responseText !== undefined){
showMessage("Connection Error");
}
};
var callback =
{
success:handleSuccess,
failure:handleFailure,
argument:['foo','bar']
};

Нам осталось лишь описать функцию showMessage(), которая помещает принятый текст определения в окно сообщения
function showMessage(json) {
var respondStructure = eval( '(' + json + ')' );
MessageObj.innerHTML = respondStructure.content;
return false;
}

Как вы понимаете, для сокрытия окна сообщения потребуется лишь изменить атрибут объекта
function hideMessage(){
var MessageObj=document.getElementById('InstantMessage');
MessageObj.style.visibility="hidden";
}

Когда вы будете опробовать этот пример, едва ли вы встретитесь с проблемами под браузером MS IE, однако, в FireFox вы можете обнаружить мерцание окна сообщения. Это связано с тем, что FireFox своеобразно обслуживает события onMouseOver/onMouseOut. Впрочем, эту проблему можно решить путем расстановки флагов задержки в функциях обслуживания этих событий.

Работу примера можно увидеть здесь http://www.phpclasses.org/browse/package/3505.html

Информация об авторе:

Дмитрий Шейко

http://www.cmsdevelopment.com

Ведущий программист Red Graphic Systems

Занят разработкой программного обеспечения с 1987 года. Начиная с 1998 года опубликовал более 50 технических статей в специализированных изданиях. С 2001 года разрабатывает архитектурные решения и инструментальные средства для управления содержанием (Content Management, CMF, ECM). В 2004 году разработал и опубликовал спецификацию универсального языка для разработчиков CMS XML Sapiens
Облако тегов / Авторы