Jquery функция $.ajax()
Содержание:
- 4 Nothing is working!!
- Использование вспомогательных методов для работы с конкретными типами данных
- Подготовка
- Examples
- Объяснение примера
- jqXHR
- Пример использования метода $.get()
- Файл app.py сам проект на Flask
- Создание асинхронного AJAX запроса (метод GET)
- Элементы кода, которые будут использованы в примерах.
- Опции $.ajax
- AJAX в действии[править]
- Реализация AJAХ: Искусство компромисса[править]
- Пример. Gmail.
4 Nothing is working!!
When everything looks fine and your form still doesn’t work, trying to solve the problem can get very aggravating, very quickly. Here are some common issues along with their fixes.
4.1 Getting HTTP 400 or 500 errors
Your JavaScript is fine, but there’s a problem with the server handling your AJAX request. Check the specific request in the Network tab of your developer toolbar to see what’s going on. Pay close attention to your request Content-Type and the data you sent. For Firebug, it’s labeled «Source» under the Post tab for the request. Also pay attention to the HTTP status code and any error messages; some developer toolbars will color requests with HTTP status codes of 400 or 500 in red to denote that something went wrong on the server side.
4.2 JavaScript errors
Sometimes nothing is working because you have a JavaScript error. These are easy to figure out — just look at your Console tab. The error will be there along with the filename and line number.
4.3 Everything looks fine and it still doesn’t work!
This could be one of several issues, but the most common problems are logic errors and typos. Check to make sure that you’ve used the right selectors in your jQuery, that your HTML is valid, and that you haven’t mistakenly introduced a typo in your HTML or JavaScript. If you’re loading JavaScript from an external file, make sure it’s getting loaded into the browser. Double check the URL path.
4.4 Feeling rejected? Your AJAX request probably is.
If you’re trying to POST, looks fine, and you know the server-side code works, double check to see if is pointing to a domain that’s different from the domain that the JavaScript is loaded from. This also applies if you’re trying to make an AJAX POST from the, but your page is non-secure (http://) and you’re trying to load it from the secure site (https://) and vice-versa.
These limitations are in place for security reasons. They all fall under the «Same-Origin Policy», and unless cross-domain scripting is explicitly enabled in the browser or on the web server, you can only make AJAX calls from the same domain as the JavaScript. There are workarounds available, though.
Использование вспомогательных методов для работы с конкретными типами данных
Библиотека jQuery предоставляет три вспомогательных метода, которые делают работу с некоторыми типами данных более удобной. Некоторые из них мы рассмотрим далее.
Получение HTML-фрагментов
Метод load() предназначен для получения только HTML-данных, что позволяет совместить запрос HTML-фрагмента, обработку ответа от сервера для создания набора элементов и вставку этих элементов в документ в одном действии. Пример использования метода load() представлен ниже:
В этом сценарии мы вызываем метод load() для элемента, в который хотим вставить новые элементы, и передаем ему URL-адрес в качестве аргумента. Если запрос завершается успешно, а полученный от сервера ответ содержит действительный HTML-фрагмент, элементы вставляются в указанное место в документе, как показано на рисунке:
Вы видите, что все элементы из файла flowers.html добавлены в документ, как мы и хотели, но поскольку у них отсутствует атрибут class, то они не укладываются в табличную компоновку страницы, используемую в основном документе. Поэтому метод load() наиболее полезен в тех случаях, когда все элементы могут быть вставлены в одно место в документе без какой-либо дополнительной обработки.
Получение и выполнение сценариев
Метод getScript() загружает файл JavaScript, а затем выполняет содержащиеся в нем инструкции. Чтобы продемонстрировать работу этого метода, я создал файл myscript.js и сохранил его вместе с файлом test.html на своем веб-сервере. Содержимое этого файла представлено в примере ниже:
Эти инструкции генерируют три ряда элементов, описывающих цветы. Мы обошлись здесь без определения шаблонов и использовали циклы для генерации элементов (хотя, вообще говоря, следовало бы воспользоваться шаблонами данных).
Самое важное, что необходимо знать при работе со сценариям, — между инициализацией Ajax-запроса и выполнением инструкций сценария состояние документа может измениться. В примере ниже приведен сценарий из основного документа, в котором по-прежнему используется метод getScript(), но при этом, еще до завершения Ajax-запроса, модифицируется дерево DOM:. Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать
Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен
Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать. Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен.
Метод getScript() можно использовать для загрузки любых сценариев, но особенно полезно использовать его для загрузки и выполнения таких сценариев, как сценарии для отслеживания статистики посещения сайтов или определения географического местоположения клиента, которые не связаны с поддержкой основной функциональности веб-приложения. Пользователя не особенно заботит, в состоянии ли мы точно определять его местоположение для ведения статистики, тогда как длительное ожидание загрузки и выполнения сценария будет действовать ему на нервы.
Используя метод getScript(), можно быстро получать запрашиваемую информацию, не доставляя пользователям неудобств, вызванных необходимостью ожидания ответа. Уточню свою мысль. Я вовсе не предлагаю вам использовать этот метод для выполнения каких-либо действий скрытно от пользователя и говорю лишь о том, что следует отодвигать на второй план загрузку и выполнение вполне законной функциональности, если она представляет для пользователей меньшую ценность, чем затрачиваемое на ее ожидание время.
В данном примере после запуска Ajax-запроса с помощью метода getScript() из документа удаляется элемент row2, для чего используется метод remove(). Данный элемент используется в файле myscript.js для вставки новых элементов. Эти элементы отбрасываются незаметным для пользователя образом, поскольку в документе селектору #row2 ничто не соответствует. Итоговый результат представлен на рисунке:
Отнеситесь к этому примеру как к одному из образцов надежного дизайна для ситуаций, в которых документ подвергается изменениям. Во всяком случае запомните, что при написании внешних сценариев JavaScript не стоит делать слишком много допущений о состоянии документа.
Получение данных в формате JSON
Для загрузки данных JSON с сервера предназначен метод getJSON(). Возможно, это наименее полезный из всех трех вспомогательных методов, поскольку он не делает с данными ничего сверх того, что делает базовый метод get().
Подготовка
Необходимо создать структуру проекта, лучше сделать для примера как я привел ниже:
# структура проекта
.
├── app.py
├── forms.py
├── requirements.txt
└── templates
├── base.html
└── index.html
Создать директорию templates, и два файла в ней base.html и index.html.
mkdir templates touch templates/base.html touch templates/index.html
Содержимое файла base.html, всё как обычно, стоить отметить в строке 6 подключение библиотеки jQuery чере cnd google.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask AJAX + jQuery simple - ` title `</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
{% block content %}
{% endblock content %}
<div id="msg"></div>
</body>
</html>
Так же создаю файл с index.html который расширяет base.html.
Строки 3-8 содержат форму.
Строка 10 содержит div с id=»msg» в него будет записан ответ с сервера.
Сроки 13-18 код который связывает события «submit» кнопки из формы, с функцией отправки данных через ajax, в качестве параметра передается id формы и id элемента для записи ответа (без #). В данном случаи «form1» и «msg». event.preventDefault() — отменяет стандартное поведение.
Строки 23-45 функция sendAjaxForm отправляет данные формы (form1).
{% extends "base.html" %}
{% block content %}
<form action="/send" id="form1" method="post">
` form`.`csrf_token `
` form`.`name`.`label ` {{ form.name() }}
` form`.`phone`.`label ` {{ form.phone() }}
<input type="submit" value="Отправить"/>
</form>
<div id="msg"></div>
<script>
/* переопределить поведение кнопки "Отправить" */
$(document).ready(function () {
$("#form1" ).submit(function( event ) {
sendAjaxForm("form1", "msg");
event.preventDefault();
});
});
/* отправка формы через ajax */
function sendAjaxForm(form_ajax, msg) {
var form = $("#" + form_ajax);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function (response) {
var json = jQuery.parseJSON(response);
$('#' + msg).html(json.msg);
if (json.success == 'true') {
form.trigger('reset');
}
else
{
alert("Что-то пошло не так!");
console.log("Ошибка");
}
},
error: function (error) {
console.log(error);
}
});
}
</script>
{% endblock %}
Подробней про функцию sendAjaxForm.
Что бы код можно было использовать для различных форм, я сделал передачу параметром формы и сообщения.
Итак, строка 23 просто получаем объект формы по id (#frim1).
Строка 25 type должен быть GET или POST это метод, беру его из параметров формы (method).
Аналогична строка 26 url должен содержать адрес для обработки запроса, в данном случаи так же берётся из формы (action). (её обрабатывает на сервере функция send см. файл app.py строка 22).
Строка 27 данные формы готовятся к отправки на сервер.
Строки 28 если всё прошло успешно, получен ответ от сервера он будет в response.
Строка 29 преобразую данные в объект json для удобства работы.
Строка 30 вывожу ответ в div с id=msg.
Строки 31-33 — успех, очищаю форму.
Строки 34-38 — что то не так, ошибка.
Строки 40-42 — если ошибки в запросе на сервер, нет связи, ошибка в url и т. д.
С HTML и JavaScript всё
Examples
Get JSON data from a file via Ajax.:
Get JSON data from a file via Ajax, using to change to (i.e. ):
Get JSON data from a file via Ajax, using to read data from a plain array rather than an array in an object:
Send request as POST:
Add data to the request, returnng an object by extending the default data:
Add data to the request by manipulating the data object:
Manipulate the data returned from the server — add a link to data (note this can, should, be done using for the column — this is just a simple example of how the data can be manipulated).:
Get the data from localStorage (could interface with a form for adding, editing and removing rows).:
Объяснение примера
В приведенном выше примере, когда пользователь вводит символ в поле ввода, выполняется вызываемая функция .
Функция запускается событием.
Вот HTML код:
Пример
<html><body><p><b> Начните вводить имя в поле ввода ниже:</b></p><p> Предложения: <span id=»txtHint»></span></p><form> Имя: <input type=»text» onkeyup=»showHint(this.value)»></form><script>function showHint(str) { if (str.length == 0) { document.getElementById(«txtHint»).innerHTML = «»; return;
} else { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById(«txtHint»).innerHTML = this.responseText;
} }; xmlhttp.open(«GET», «gethint.php?q=» + str, true);
xmlhttp.send(); }}</script>
</body></html>
Объяснение кода:
Сначала проверьте, пусто ли поле ввода (str.length == 0). Если это так, очистите содержимое заполнителя txtHint и выйдите из функции.
Однако, если поле ввода не пустое, сделайте следующее:
Создать объект XMLHttpRequest
Создайте функцию, которая будет выполняться, когда будет готов ответ сервера
Отправьте запрос в файл PHP (gethint.php) на сервере
Обратите внимание, что добавлен параметр gethint.php?q=»+str
Переменная str содержит содержимое поля ввода
jqXHR
$.ajax() (и связанные с ним удобные методы) возвращает объект jqXHR (jQuery XML HTTP Request), который содержит множество мощных методов. Мы можем сделать запрос через $.ajax(), а затем передать возвращаемый объект jqXHR в переменную.
Мы можем использовать этот объект, чтобы к запросу прикрепить функции обработчика, даже после завершения запроса. Например, мы можем использовать метод .then() объекта jqXHR, чтобы привязать функции успеха и ошибки. Метод .then() принимает одну или две функции в качестве аргументов — первая функция будет вызываться если запрос успешен, вторая если запрос не удался.
Мы можем вызывать .then() в запросе сколько угодно раз, они обслуживаются по очереди.
Если мы не хотим прикреплять функции успеха и ошибки одновременно, то можем использовать методы .done() и .fail() для объекта запроса.
Если мы хотим прикрепить функцию обработчика, которая выполняется при успехе или неудаче, то можем использовать метод .always() для объекта запроса.
Пример использования метода $.get()
Здесь приводится пример создания запроса AJAX с помощью метода $.get() и простая обработка ответа. Для работы примера нужно на сервере создать простой текстовый файл с именем getForecast.txt , содержащий следующий текст:
Данный файл будет имитировать ответ в формате JSON, который мог быть сформирован скриптом прогноза погоды на сервере.
Затем создаем страницу showForecast.html в той же папке что и getForecast.txt :
Открываем showForecast.html в браузере и нажимаем кнопку «Получить прогноз погоды». В окне сообщения получим прогноз погоды с нашего сервера.
Вот как работает данный код:
- showForecast.html содержит элемент button «Получить прогноз погоды» с ID getForecast .
- JavaScript вверху страницы выполняется как только страница будет загружена и DOM окажется в состоянии готовности.
- Код JavaScript сначала привязывает обработчик события click к кнопке #getForecast . Данный обработчик выполняет AJAX запрос GET к getForecast.txt , передавая название города и дату для прогноза. Также определяется возвратная функция success(), которая будет выполняться по завершению запроса. Формат возвращаемых сервером данных определяется как JSON.
- Файл getForecast.txt возвращает браузеру данные прогноза в формате JSON.
- Вызывается функция success() . jQuery разбирает данные JSON, полученные от getForecast.txt , конвертирует их в объект JavaScript, и передает их в функцию.
- Функция возвращает объект данных forecastData и выводит сообщение, которое содержит несколько свойств объекта, включая название города, прогноз и температуру.
Простой пример в несколько строк демонстрирует работу запроса AJAX с использованием метода $.get() .
Данный урок подготовлен для вас командой сайта ruseller.com Источник урока: www.elated.com/articles/ajax-with-jquery-a-beginners-guide/ Перевел: Сергей Фастунов Урок создан: 5 Марта 2012 Просмотров: 162954 Правила перепечатки
Файл app.py сам проект на Flask
Строка 6 форма обратной связи.
Строка 21 декоратор обработки url «/send».
Строка 22 функция отправки «сообщения».
Строка 24 если валидация успешна, возвращает json с положительным ответом (строка 27) иначе с отрицательным (строка 30).
from flask import Flask
from flask import request
from flask import render_template
import json
# форма для обратной сзвязи
from forms import ContactForm
app = Flask(__name__)
app.config = "12345"
@app.route('/', methods=)
def index():
form = ContactForm()
return render_template("index.html",
title="index page",
form=form)
@app.route('/send', methods=)
def send():
form = ContactForm()
if request.method == "POST":
if form.validate_on_submit():
# отправить почту, записать в БД и т. д.
return json.dumps({'success': 'true', 'msg': 'Ждите звонка!'})
else:
# обработать ошибку
return json.dumps({'success': 'false', 'msg': 'Ошибка на сервере!'})
if __name__ == '__main__':
app.run(debug=True)
Создание асинхронного AJAX запроса (метод GET)
Рассмотрим создание асинхронного AJAX запроса на примере, который будет после загрузки страницы приветствовать
пользователя и отображать его IP-адрес.
Для этого необходимо создать на сервере 2 файла в одном каталоге:
-
– HTML-страница, которая будет отображаться пользователю. В этой же страницы поместим
скрипт, который будет осуществлять все необходимые действия для работы AJAX на стороне клиента. -
– PHP-файл, который будет обрабатывать запрос на стороне сервера, и формировать ответ.
Начнём разработку с создания основной структуры файла
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Пример работы AJAX</title> </head> <body> <h1>Пример работы AJAX</h1> <div id="welcome"></div> <script> // Здесь поместим код JavaScript, который будет отправлять запрос на сервер, получать его и обновлять содержимое страницы. Всё это будет работать без перезагрузки страницы </script> </body> </html>
Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):
-
Подготовим данные, необходимые для выполнения запроса на сервере. Если для выполнения запроса на сервере данные
никакие не нужны, то данный этап можно пропустить. -
Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).
-
Настроим запрос с помощью метода .
Указываются следующие параметры:
- Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
- URL-адрес, который будет обрабатывать запрос на сервере.
- Тип запроса: синхронный (false) или асинхронный (true).
- Имя и пароль при необходимости.
-
Подпишемся на событие объекта XHR и укажем обработчик в виде анонимной или
именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и
выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве
.Дополнительно с проверкой значения свойства числу 4, можно проверять и значение свойства
. Данное свойство определяет статус запроса. Если оно равно 200, то всё . А
иначе произошла ошибка (например, 404 – URL не найден). -
Отправим запрос на сервер с помощью метода .
Если используем для отправки запроса метод GET, то передавать данные в параметр данного метода не надо. Они
передаются в составе URL.Если используем для отправки запроса метод POST, то данные необходимо передать в качестве параметра методу
. Кроме этого, перед вызовом данного метода необходимо установить заголовок Content-Type, чтобы
сервер знал в какой кодировке пришёл к нему запрос и смог его расшифровать.
Содержимое элемента :
// 2. Создание переменной request
var request = new XMLHttpRequest();
// 3. Настройка запроса
request.open('GET','processing.php',true);
// 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
request.addEventListener('readystatechange', function() {
// если состояния запроса 4 и статус запроса 200 (OK)
if ((request.readyState==4) && (request.status==200)) {
// например, выведем объект XHR в консоль браузера
console.log(request);
// и ответ (текст), пришедший с сервера в окне alert
console.log(request.responseText);
// получить элемент c id = welcome
var welcome = document.getElementById('welcome');
// заменить содержимое элемента ответом, пришедшим с сервера
welcome.innerHTML = request.responseText;
}
});
// 5. Отправка запроса на сервер
request.send();
В итоге файл будет иметь следующий код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Пример работы AJAX</title>
</head>
<body>
<h1>Пример работы AJAX</h1>
<div id="welcome"></div>
<script>
window.addEventListener("load",function() {
var request = new XMLHttpRequest();
request.open('GET','processing.php',true);
request.addEventListener('readystatechange', function() {
if ((request.readyState==4) && (request.status==200)) {
var welcome = document.getElementById('welcome');
welcome.innerHTML = request.responseText;
}
});
request.send();
});
</script>
</body>
</html>
На сервере (с помощью php):
- Получим данные. Если данные посланы через метод , то из глобального массива
. А если данные переданы с помощью метода , то из глобального
массива . - Используя эти данные, выполним некоторые действия на сервере. В результате которых получим некоторый ответ.
Выведем его с помощью .
<?php
$output = 'Здравствуйте, пользователь! ';
if ($_SERVER) {
$output .= 'Ваш IP адрес: '. $_SERVER;
}
else {
$output .= 'Ваш IP адрес неизвестен.';
}
echo $output;
Элементы кода, которые будут использованы в примерах.
XMLHttpRequest, — это класс, для работы AJAX.
request – это переменная или константа в которой будет хранится, — экземпляр класса XMLHttpRequest, объект с набором методов.
url – это путь до файла на сервере, который будет обрабатывать наш запрос. В примерах с GET методом, в нем будут передаваться данные со стороны клиента.
.open() – это метод где мы задаем, первым параметром, — метод передачи данных, а вторым url.
.setRequestHeader() – это метод для указания передаваемых заголовков, здесь мы можем указать что данные идут в url либо закрытым способом, либо хотим получить данные от сервера в json формате.
.send() – это последний этап создания http запроса. С помощью него также можно передать тело запроса т.е. данные от браузера к серверу. Можно не чего не передавать или прямо указать null.
onreadystatechange – это событие, которое случится, когда нам придет ответ от сервера.
readyState – это метод экземпляра, который сообщает статус HTTP-запроса, вот возможные значения, которые он может дать:
| Значение | Описание |
| Метод open() не вызван | |
| 1 | Метод open() вызван |
| 2 | Получены заголовки ответа |
| 3 | Получено тело ответа |
| 4 | Передача ответа выполнена |
status или statusText – возвращают статус http заголовков, нам нужен ответ 200. Хотя бывают и 404 или 500.
.responseText – данные, которые придут от сервера в виде строки.
.response – данные вернуться в json формате, тут как бы мы преобразуем сразу в объект, и дальше работаем уже как с объектом.
.text() – используется в запросе fetch, возвращает строку.
.json() – используется в запросе fetch, возвращает json обращенный в объект.
Опции $.ajax
А теперь, попрактиковавшись немного, расскажу теор.часть — про опции JQuery Ajax
-
async (true или false). По умолчанию true. Включает или
выключает асинхронные запросы (см. компонент xmlHttpRequest). Помните,
что включив синхронные запросы, можете подвесить браузер! - cache (true или false). Включает или выключает кеширование браузером
- contentType (строка). Тип содержания, передаваемого на сервер. При сабмите форм используйте application/x-www-form-urlencoded
- data (строка). Данные, отправляемые на сервер.
-
dataType (строка). Тип ожидаемых от сервера данных. Если
ничего не указано, JQuery попытается определить результат, основанный на
MIME-типе ответа. Может принимать значения: xml, json, script, html. -
ifModified (true или false (по умолчанию)). Если установлено в
true, то запрос будет успешным только тогда, когда ответ изменился с
момента прошлого запроса (достигается путём проверки заголовка
Last-Modified) - timeout (в милисекундах). Значение, по прошествии которого, соединение с сервером будет обрываться (таймаут)
- type (строка: GET или POST). Тип запроса к серверу: GET или POST
- url (строка). Страница сервера, к которой будет сделан запрос.
Вот мы и разобрались с Ajax на JQuery. Ождайте следующую статью — в ней будет рассмотрено что-то вкусненькое на JQuery 😉
AJAX в действии[править]
Действие AJAX легче всего показать на портальном сценарии: просмотр сообщений электронной почты. Большинство веб-порталов позволяют пользователям предварительно просматривать содержимое почтового ящика с основной страницы. Однако, чтобы просмотреть содержимое сообщения, необходимо отдельно щелкнуть на каждом сообщении, при этом страница должна обновляться каждый раз. На этом примере можно увидеть возможность осуществления более богатого поведения, подобно аналогичному в Outlook Express и Mozilla Thunderbird, при этом задействовав существующие веб-технологии AJAX.
На основе этого строится портлет, предоставляющий не только доступ к списку недавних сообщений, но также обеспечивающий предварительный просмотр самих сообщений -всех из главной страницы без необходимости их обновления.
Чтобы получить доступ к содержимому сообщения, нужен серверный компонент, предоставляющий доступ к сообщениям. В нашем примере есть простой сервлет в качестве имитатора, который показывает сообщения через запятую в следующем формате: от кого, тема, дата и тело сообщения:
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
if ("1".equals(req.getParameter("message_id"))) {
resp.getWriter().println( "John Doe,Greetings,10 10-2005,Hi.I am doing good" ) ;
} else if ("2".equals(req.getParameter("message_id"))) {
resp.getWriter().println( "Joanna Doe,Hi,10-10-2005,Document is complete." );
} else if ("3".equals(req.getParameter("message_id"))) {
resp.getWriter().println("Joanna Doe,Hi,10-10-2005,Meeting is at 3.");
...
} else {
resp.getWriter().println( "NA,NA,NA,Nothing to display" );
} //end else
} //end service
Следующий пример на С# для ASP.NET
Функционально он аналогичен сервлету и приводим мы его лишь для того,
чтобы убедить читателей, что для работы с AJAX не важно на каком языке написана ваша серверная часть.
public class service System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
if (Request.Params"message_id" != null)
{
switch (Request.Params"message_id"])
{
case "1"
Response.Write("John Doe,Greetings,10-10-2005,Hi.I am doing good");
break;
case "2"
Response.Write("Joanna Doe,Hi,10-10-2005,Document is complete.");
break;
case "3"
Response.Write("Joanna Doe,Hi,10-10-2005,Meeting is at 3.");
break;
}
}
else
{
Response.Write(",NA ,NA ,NA ,Nothing to display");
}
}
.....
}
В портале будет находиться окошко/портлет портала по просмотру почты с упрощенным списком входящих сообщений слева и панелью просмотра справа. Если щелкнуть мышью на сообщении слева, то на панели просмотра будет виден запрос к серверу и вывод текста сообщения на экран в реальном времени, в этом процессе задействован AJAX.
Реализация AJAХ: Искусство компромисса[править]
Многие программисты воспринимают JavaScript как условно оптимальное решение по причине отсутствия методов отладки и высокой подверженности ошибкам. Поэтому было бы справедливо отметить, что AJAX — компромиссное решение. Эта технология помогает выиграть за счет более надежных языков, таких как Java или C# с презентационной привлекательностью, и инновационной привлекательности JavaScript.
Мы надеемся, что в условиях популярности AJAX и возрастающего использования JavaScript производители браузеров продолжат инновационную политику по отношению к объектам JavaScript и внедрят механизмы повышения совместимости этих объектов, их безопасного использования и улучшения отладки.
В то же время, AJAX может в будущем сформировать новое поколение Интернет-порталов и интерактивных приложений. С помощью AJAX, в таких порталах Интернет-новостей, как Yahoo, Google или MSN пользователи могут получать доступ к информации по всем темам, включая и специфические направления, с одной и той же страницы. Разнообразные клиентские возможности, которые можно реализовать с помощью существующих веб-технологий и интернет-инфраструктуры, выглядят привлекательно. Интерактивные приложения уже адаптировали AJAX — например, Google использует эту технологию для чрезвычайно популярного почтового клиента Gmail. Мы надеемся, что эта тенденция будет развиваться и далее.
Команде разработчиков может понравиться возможность простого доступа к этой технологии и легкость обучения. Как упоминалось ранее, данная технология доступна на всех современных браузерах. Кроме этого, она не требует сложных навыков программирования, например как J2EE или .NET, более того, вы можете произвести впечатление на конечного пользователя полученными результатами.
По мере роста популярности AJAX, будут появляться полезные расширения на третьей
стороне, например, упрощающие такие сложные задачи, как отладка, межплатформенные
разработки, обработка XML. Некоторые из самых заметных расширений, которые могут
быть полезны на сегодняшний день, это:
Пример. Gmail.
Раз уж взялись за Google — рассмотрим почтовый сервис той же компании, http://gmail.com.
На момент его появления он явился единственным открытым почтовым сервисом, использующим AJAX для следующих фич.
- Проверка ошибок ввода формы ДО сабмита
На сервер передается имя пользователя, результат проверки возвращается на страницу. - «Мгновенная» загрузка
Браузер обращается к серверу только за данными, а не обновляет весь громоздкий интерфейс - Автоматическая «доставка» писем в открытую папку
Время от времени отправляется запрос на сервер и, если пришли новые письма, они появляются в браузере. - Автодополнение
Достаточно ввести первые буквы имени адресата, и остальные дополняются автоматически, как в десктоп-приложениях.
Результат: обширная популярность, высокий спрос на account’ы с момента открытия.
