2014-09-04
334
Предполагается, что пользователь может вводить в текстовое поле формы вариант подбираемого логина, получая при этом динамически ответ о существовании или отсутствии такого логина в списке зарегистрированных пользователей без перезагрузки страницы.
Создайте следующую веб-страницу:
<html><head> <script src="bearbeiter.js"></script> </head> <body> <form> Login: <input type="text" id="txt1" onkeyup="zeigenAntwort(this.value)"> </form> <p>Такой логин: <span id="txtAntwort"></span></p> </body></html>В коде задано, что при наступлении события onkeyup (отжатие клавиши) вызывается обработчик zeigenAntwort().
В файле bearbeiter.js сохраните следующий код обработчика
Код обработчика загружается из файла bearbeiter.js:
var xmlHttp;//----------------------------------------------------------function zeigenAntwort(str){/* Если поле ввода пустое, происходит очистка содержимого раздела txtAntwort на веб-странице.*/if (str.length==0) { document.getElementById("txtAntwort ").innerHTML=""; return; } /* Если содержимое текстового поля формы непустое */ /*Вызов функции для создания объукта класса XMLHttpRequest*/xmlHttp=GetXmlHttpObject(); /*Проверка возможности использования AJAX для текущего браузера*/if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url = "server_bearbeiter.php"; /* Формирование url для отправки веб-серверу*/url = url + "?log = " + str; /* Добавление значения параметра log, равное содержимому текстового поля, к url*/ url = url + "&r_id=" + Math.random(); /* Добавление к url случайного числа для предотвращения кеширования*/xmlHttp.onreadystatechange = anderung; /* Свойство класса XMLHttpRequest. Задает обработчик события, которое происходит при каждой смене состояния объекта. Свойству указывается функция (anderung) подлежащая исполнению при наступлении события ввода символа*/xmlHttp.open("GET", url, true); /* Открывается объект XMLHTTP с указанным значением url*/ xmlHttp.send(null); //Отправляется HTTP запрос веб-серверу} //-----------------------------------------------------------function anderung() { if (xmlHttp.readyState==4) /* Свойство класса XMLHttpRequest. Содержит текущее состояние объекта (0 — не инициализирован, 1 — открыт, 2 — отправка данных, 3 — получение данных и 4 — данные загружены) */{ document.getElementById("txtAntwort").innerHTML = xmlHttp.responseText;/* responseText - свойство класса XMLHttpRequest. Содержит текст ответа на запрос. Если состояние не 3 или 4, возвращает пустую строку.С помощью свойства innerHTML можно добавить новые вложенные элементы на страницу. Или прочитать уже существующие на странице элементы со всеми входящими в этот элемент атрибутами. */}}//-----------------------------------------------------------//---------создание объекта XMLHttpRequest для разных браузеров-----------function GetXmlHttpObject(){var xmlHttp=null;/*делается попытка создать объект XMLHttpRequest для браузеров Firefox, Opera или Safari:*/try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); }catch (e) {/* В случае неудачи попытки создать объект XMLHttpRequest для браузеров Firefox, Opera или Safari, делается попытка создания объекта для Internet Explorer 6.0+: */ try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e)/* Если предыдущие попытки неудачны, делается попытка создания объекта для Internet Explorer 5.5+:*/ { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } }/*В случае, если все попытки не принесли успеха, возврат нуля приводит к выдаче сообщения об отсутствии поддержки AJAX браузером.*/return xmlHttp;}|
|
|
