Статьи
Метод alert,confirm,prompt Javascript.
В этой статье я хотел рассмотреть одни из часто использоваемых методов Javascript, какими являются alert, confirm и prompt.
Основы написания AJAX приложений.
Здравствуйте данная статья посвящена основам написания сверх динамических и юзабельных страниц, благодаря использования технологии AJAX. Давайте рассмотрим более потробнее,что такое AJAX c чем её "едят"
Технология AJAX - краткое описание
AJAX (от англ. Asynchronous JavaScript and XML — «асинхронный JavaScript и XML») — это подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером.
Компилирующий обработчик шаблонов Smarty
Smarty - это компилирующий обработчик шаблонов для PHP, служащий для отделения прикладной логики и данных от представления. Это очень удобно в ситуациях, когда программирование и верстка шаблона выполняется разными людьми.
Статьи. Основы написания AJAX приложений.
Здравствуйте данная статья посвящена основам написания сверх
динамических и юзабельных страниц, благодаря использования технологии
AJAX. Давайте рассмотрим более потробнее,что такое AJAX c чем её "едят"
История
Впервые был реализован компанией Microsoft, появившись в Internet
Explorer 5.0 в виде объекта ActiveX, доступного через JScript,
VBScript, или другие скриптовые языки.
Программисты проекта Mozilla затем разработали совместимую версию,
называющуюся XMLHttpRequest в Mozilla 1.0. В дальнейшем эта возможность
также была реализована компаниями Apple начиная с Safari 1.2,
родственным браузером Konqueror, компанией Opera Software начиная с
Opera 8.01, и, вероятно, другими.
Как говорилось ранее
Microsoft Internet Explorer поддерживает XMLHttpRequest в виде
ActiveX-объекта Microsoft.XMLHTTP, остальные же браузеры считают его
нативным, и проблем возникнуть не должно.Ниже показан алгоритм создания
объекта XMLHttpRequest под разные браузеры. Сначала определяем браузер,
потом создаем объект нужным нам образом:
function getXmlHttp(){
var xmlhttp;
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
httpRequest = false;
}
}
if (!httpRequest && typeof XMLHttpRequest!='undefined') {
httpRequest = new XMLHttpRequest();
}
Данный объект нужен нам для отправки запросов на сервер и обработки ответов в ассинхроном режиме.Для этого мы будим использовать метод установки параметров соединения open,метод отправки запросов send,а также задействуем свойство onreadystatechange для установки обработчика ответов.
Методы класса XMLHttpRequest
| Метод | Описание |
|---|---|
| abort() | отменяет текущий запрос |
| getAllResponseHeaders() | возвращает полный список HTTP-заголовков в виде строки |
| getResponseHeader(headerName) | возвращает значение указанного заголовка |
| open(method, URL, async, userName, password) | определяет метод, URL и другие опциональные параметры запроса; параметр async определяет, происходит ли работа в асинхронном режиме |
| send(content) | отправляет запрос на сервер |
| setRequestHeader(label, value) | добавляет HTTP-заголовок к запросу |
| overrideMimeType(mimeType) | позволяет указать mime-type документа, если сервер его не передал или передал неправильно. Внимание: метод отсутствует в Internet Explorer! |
Свойства класса XMLHttpRequest
| Свойство | Описание |
|---|---|
| onreadystatechange | обработчик события, которое происходит при каждой смене состояния объекта |
| readyState | возвращает текущее состояние объекта (0 — неинициализирован, 1 — открыт, 2 — отправка данных, 3 — получение данных и 4 — данные загружены) |
| responseText | текст ответа на запрос |
| responseXML | текст ответа на запрос в виде XML, который затем может быть распарсен посредством DOM |
| status | возвращает HTTP-статус в виде числа (404 — «Not Found», 200 — «OK» и т. д.) |
| statusText | возвращает статус в виде строки («Not Found», «OK» и т. д.) |
Для начала работы над нашим приложением, создадим файл ajax.js,где мы реализуем методы
2. Метод отправки запросов на сервер
3. Метод обработчик полученого ответа.
Пункт 1. Мы реализовали выше (см.Создание Обекта XMLHttpRequest)
Пункт 2. Для реализации данного метода,нам нужны следующие параметры:file - адрес на который идет наш запрос,_resultId - идентификатор html-элемента, в котором будет отобразаться результат запроса,getRequestProc - обработчик ответа на данный запрос.
Отправка запроса:
function sendRequest(file, _resultId, getRequestProc)
{
getXmlHttp();
resultId = _resultId;
document.getElementById(resultId).innerHTML = '
';
httpRequest.open('get', file,true);
httpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded;charset=UTF-8");
httpRequest.onreadystatechange = getRequestProc
httpRequest.send(null);
}
Пункт 3. В данном методе реализована обработка ответа с сервера.Проверяем,
полностью ли передан ответ на запрос, и выводим полученный ответ в
элемент с идентификатором _resultId, который мы так предусмотрительно
сохранили:
function getRequest() {
if (httpRequest.readyState == 4) {
document.getElementById(resultId).innerHTML = httpRequest.responseText;
}
}
Теперь осталось добавить строку.
var resultId = ' ';
Теперь у нас есть свой собсвенный мини движок, для написения AJAX приложений.
Волшебный список
Мы часто видим на многих сайтах форму регистрации,в которой
присутствует два списка: список стран и списко городов.Что касаеться
"Списка Стран",то там все понятно, есть зарание известный списко
стран.А вот с городами сложнее,список городов зависит от выбранной
страны.Давайте напишим приложение с испрользованием ранее написанного
движка AJAX,для получения списка городов по выбранной стране без
перезагрузки страницы.
Вот как это выглядит на стороне клиента (index.html). В этом случае
мы не только подключили файл ajax.js, но и sendSearchRequest() функция
для отпраки запроса на сервер,которую мы "цепляем" на событие onchange
элемнта select.В ней вторым параметром указываем идентификатор
html-элемента куда будет вставлен ответ.