AJAX

  1. Як працює AJAX [ правити ]
  2. Створюємо притулити для перегляду пошти в Мережі [ правити ]
  3. Виклик AJAX [ правити ]
  4. Асинхронна завантаження даних [ правити ]
  5. Обробка даних [ правити ]
  6. Підвищуємо стійкість AJAX-додатки [ правити ]
  7. Написання програми з використанням клієнтського сallback-менеджера ASP.NET 2.0 [ правити ]
  8. Відображення книжкових обкладинок [ правити ]
  9. JavaScript [ правити ]
  10. Код поза формою [ правити ]
  11. Безперервне оновлення [ правити ]
  12. Реалізація AJAХ: Мистецтво компромісу [ правити ]

AJAX - це модна назва для набору технік розробки веб-інтерфейсів, що дозволяють робити динамічні запити до сервера без видимої перезавантаження веб-сторінки: користувач не помічає, коли його браузер запитує дані.

AJAX забезпечує динамічність і асинхронність web-розробок при відсутності необхідності оновлення сторінок. Наша стаття познайомить вас з можливостями нововведень в web-технологіях за рахунок комбінацій технологій, вже давно знайомих і улюблених.

Мабуть, будь-який розробник мріє про те, щоб перетворити звичайну, вживану web-сторінку в щось більш захоплююче. Зараз можна спробувати вдихнути трохи життя в web-технології десятирічної давності. Якщо у вас з'явилася необхідність освіжити, збагатити і зробити більш інтерактивними свої творіння, познайомтеся з AJAX.

При використанні Google або web-клієнта Gmail вам вже доводилося стикатися з рішенням, заснованому на AJAX. Це технологія-конгломерат, яка забезпечує динамічне і асинхронне поведінку, де виключається оновлення сторінок. За допомогою AJAX користувач може взаємодіяти з web-сторінками, подібно роботі з клієнтами з більш багатими можливостями.

В даний час багато говорять про AJAX. Технологія, наступна за AJAX, навряд чи є нововведенням, однак недавно стали з'являтися деякі потужні нові функції, які залежать об'єкт XMLHttpRequest , Вони вдихнули нове життя в концепцію оновлення образу клієнтської частини.

Найбільш примітним з цих нових додатків є Google Maps . Користуючись ним, можна знаходити певну місцевість на карті планети, потім переходити до більш дрібних об'єктів, прокручувати, перетягувати карту без необхідності оновлення сторінки.

AJAX - це колекція технологій, існуючих з моменту появи Web. А ось і можливості, що надаються AJAX (як це представив Джіс Джеймс Гаррет (Jesse James Garrett), він першим ввів термін «AJAX 'для асинхронного JavaScript + XML ):

  • Стандартно-базована презентація з використанням XHTML і CSS ;
  • Динамічне відображення і взаємодія з використанням об'єктної моделі документа ;
  • Взаємообмін даними і маніпуляція з залученням XML і XSLT ;
  • Асинхронне витягання даних з використанням XMLHttpRequest ;
  • JavaScript , Що зв'язує всі разом.

Коротенько AJAX дозволяє писати бистрореагірующій веб-додатки, в яких не потрібно постійно оновлювати сторінки. AJAX - проста технологія, підтримувана всіма основними браузерами. Як можна коротко відзначити, єдиним попередньою умовою для впровадження AJAX є знання JavaScript .

Як працює AJAX [ правити ]

Якщо ви коли-небудь користувалися веб-контентом Gmail або Google Maps , То помічали можливість перевірки правопису і прокрутки по всьому зображенню, відповідно, без оновлення сторінок. AJAX - це технологія, створена на мові JavaScript , Яка асинхронно запитує і отримує з сервера дані, що дають бажаний результат.

В основі технології AJAX лежить об'єкт XMLHttpRequest . Спочатку він з'явився в Internet Explorer , А потім - в Mozilla / Safari , І пізніше - в Opera .

Дія 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.

Створюємо притулити для перегляду пошти в Мережі [ правити ]

Для початку необхідно створити веб-сторінку, яка імітує типовий притулити для веб-пошти, і вбудувати події onMouseOver JavaScript, що запускають виклики AJAX

В цьому випадку події «onMouseOver» додаються до полів таблиці (ПТ) з іменами відправників. Вибір полів з даними і запуск подій для викликів AJAX призначені строго для ілюстративних цілей:

<Form name = "inbox"> <table style = "previewTable"> <thead id = "tableHeader"> <tr> <td> From </ td> <td> Subject </ td> </ tr> </ thead > <tbody> <tr class = "even"> <td onMouseOver = "displayMessageBody (1)"> John Doe </ td> <td> Greetings </ td> </ tr> <tr> <td onMouseOver = "displayMessageBody (2) "> Joanna Doe </ td> <td> Status of the report </ a> </ td> </ tr> <tr class =" even "> <td onMouseOver =" displayMessageBody (3) "> Jim Doe </ td> <td> Meeting is today </ td> </ tr> ... </ tbody> </ table> </ div> <div id = "preview"> <input id = "messageBody" class = "message" type = "textarea" READONLY value = "" /> </ div> </ form>

Зверніть увагу на те, що поле введення «messageBody» - єдине, яке буде наповнене методом displayMessageBody, які приймають ID повідомлення як параметр. Виклик AJAX буде використовувати цей параметр для запиту деталей повідомлення з сервера.

Виклик AJAX [ правити ]

Ключовим моментом нашого прикладу є виклик AJAX. Зверніть увагу на те, що для різних браузерів потрібні різні методи реалізації для об'єкта XMLHttpRequest:

<Script> function getHTTPRequestObject () {var xmlHttpRequest; / * @ Cc_on @if (@_jscript_version> = 5) try {xmlHttpRequest = new ActiveXObject ( "Msxml2.XMLHTTP"); } Catch (exception1) {try {xmlHttpRequest = new ActiveXObject ( "Microsoft.XMLHTTP"); } Catch (exception2) {xmlHttpRequest = false; }} @Else xmlhttpRequest = false; @end @ * / if (! xmlHttpRequest && typeof XMLHttpRequest! = 'undefined') {try {xmlHttpRequest = new XMLHttpRequest (); } Catch (exception) {xmlHttpRequest = false; }} Return xmlHttpRequest; } Var httpRequester = getHTTPRequestObject (); / * Коли сторінка завантажилася, створюємо xml http об'єкт * / </ script>

В даному коді використовуються анотації Internet Explorer для реалізації об'єкта AJAX. Інші браузери, які виконують даний сценарій, будуть просто ігнорувати розділи з анотаціями до функції getHTTPRequestObject (). Пам'ятайте про те, що ваш браузер повинен підтримувати JavaScript v1.5 і більш пізні версії.

Асинхронна завантаження даних [ правити ]

Тепер ми виконаємо асинхронну активізацію веб-ресурсів. Нижче представлені дії, необхідні для асинхронної завантаження веб-ресурсів з функції JavaScript:

var couldProcess = false; function displayMessageBody (messageID) {idToDisplay = messageID; if (! couldProcess && httpRequester) {httpRequester. open ( "POST", serverSideURL + escape (messageID), true); httpRequester. onreadystatechange = processResponse; couldProcess = true; httpRequester. send (null); }}

Для виведення повідомлення на екран метод displayMessageBody приймає ID цього повідомлення. За допомогою передачі наступних трьох параметрів для об'єкта XMLHttpRequest визначається отримання доступу до URL:

  • Метод POST або GET;
  • URL плюс будь-який пішов параметр (в цьому випадку передається тільки ID. Для визначення многопараметрических URL необхідно використовувати позначення рядка запиту стандартного URL і робити перехід);
  • Властивість типу Boolean означає, чи повинен виклик виконуватися асинхронно. Вищезгаданий метод також визначає метод processResponse по обробці вмісту як callback, що активізується при завантаженні вмісту з URL.

Обробка даних [ правити ]

Вищезгаданий метод processResponse активізується як callback. Він витягує висновок об'єкта XMLHttpRequest, проводить синтаксичний аналіз і привласнює висновок об'єктів сторінки.

function processResponse () {if (httpRequester. readyState == COMPLETE) {// це константа, оголошена локально, її значення дорівнює 4 if (httpRequester. responseText. indexOf ( 'invalid') == - 1) {var values ​​= httpRequester. responseText. split ( ","); // аналізуємо відповідь сервера // (Увага: якщо в тексті листа є кома, то воно буде обрізано!) Document. getElementById ( 'messageBody'). value = values ​​[3]; // вибираємо 4-е значення і поточне повідомлення couldProcess = false; }}}

HttpRequester.readyState є індикатором завершеності коду URL. Він може приймати наступні значення:

  • 0 = Не инициализирован
  • 1 = відкрито
  • 2 = відправка запиту
  • 3 = отримання даних
  • 4 = завершений (в нашому прикладі увага зосереджується на цьому стані.)

Зверніть увагу на те, що тут доступ до відповіді розглядається як доступ до текстового вмісту. XMLHttpRequest може без утруднень видаляти як в XML-форматі, так і в НЕ XML-форматі. Якщо необхідно отримати вміст XML, то рядок прочитає responseXML і ви зможете отримати доступ до нього як до об'єкта XML DOM. Така різноманітність текстових форматів - приємна новина, оскільки XML може призвести до надмірного ускладнення простих сценаріїв вилучення даних, як описаний вище.

Підвищуємо стійкість AJAX-додатки [ правити ]

При різнобічному використанні JavaScript автоматично виникає питання про ступінь стійкості і надійності додатки. Воно насилу може покластися на цю мову сценаріїв, що відрізняється своєю «розслабленням» і «всепрощенням». При наявності AJAX, ситуація все більше ускладнюється. AJAX проводить віддалені виклики, що в свою чергу створює додаткову проблемну грань і можливість появи помилок. Особливо, зважаючи на те, що вбудована підтримка при помилках, що надходять з серверної сторони, дуже обмежена. Беручи це до уваги, можна запропонувати наступні варіанти запобігання помилок:

  • Перевірте, щоб ваше додаток працювало в режимі без AJAX.
  • Перевірте код відповідей з викликів AJAX, перед обробкою результатів. API XMLHttpRequest підтримує коди HTTP (200, 400, ...) До них можна отримати доступ через властивість status (разом з властивістю statusText, яке утримує повідомлення, пов'язане зі станом відповіді:
if (httpRequester. readyState == 4) {// якщо статус дорівнює 200 (OK) if (httpRequester. status == 200) {// ... результати виконання ...} else {// ... тут обробляємо помилки ...}}

Написання програми з використанням клієнтського сallback-менеджера ASP.NET 2.0 [ правити ]

Після ознайомлення з такими додатками, як Google Map, створюється враження, що багато хто зрозумів багатство можливостей AJAX. Але мало хто знає про те, що створення додатків в стилі AJAX, частково оновлюють сторінку без звернення до сервера, можна без складнощів здійснити за допомогою ASP.NET. У цій справі допоможе вбудований клієнтський сallback-менеджeр.

Всім відомий ASP.NET 2.0 включає в себе клієнтський сallback-менеджер, що дозволяє розробникам створювати веб-додатки в стилі AJAX. Клієнтський сallback-менеджер використовує XMLHTTP, при цьому не акцентуючи уваги на відправку даних в прямому і зворотному напрямку від сервера і клієнта. (Тому для того, щоб це спрацювало, необхідно, щоб веб-браузер підтримував XMLHTTP; в даний час клієнтський сallback-менеджер працює виключно з Microsoft Internet Explorer.

Ця частина розповість вам, як використовувати клієнтський callback-менеджер для створення програмного забезпечення в стилі AJAX.

Відображення книжкових обкладинок [ правити ]

Щоб показати, як працює клієнтський сallback-менеджер ASP.NET 2.0, ми створимо веб-додаток, що дозволяє користувачам переглядати книжкові обкладинки при завантаженні їх з веб-служби Amazon. Користувачеві залишається лише ввести ISBN номер книги, після чого сторінка сама завантажить зображення обкладинки з Amazon.com без необхідності оновлення сторінки.

Для початку запустимо Visual Studio і створимо новий проект веб-сайту. Назвемо проект C: \ ClientCallBack. Наповнимо веб-форму за замовчуванням (Default.aspx) елементами управління, як показано на малюнку, включаючи елементи управління панелі, текстового вікна, кнопок і зображень.

Для елемента керування <img> можна застосувати Internet Explorer, щоб завантажити домашню сторінку Amazon.com, перетягнути картинку логотипу і помістити його на елемент керування панелі. Елемент <img> автоматично додає його на панель, після чого відображається логотип Amazon.com.

Перемикаємо Default.aspx на Source View і укладаємо елемент <asp: Image> в елемент <a>:

<A href = "" id = "BookURL"> <asp: Image ID = "Image1" runat = "server" ImageUrl = "~ / Images / harrypotter.jpg" /> </ a>

По суті, ми створюємо гіперпосилання на обкладинку книги, тож користувач може клацнути мишею на зображенні книги, вийти на Amazon.com і отримати більш детальну інформацію про книгу.

У вікні Properties виставте ShowCover для властивості OnClientClick. Як тільки користувач клацне на цій кнопці, буде виконуватися функція клієнтського сценарію ShowCover () (в нашому випадку це - короткий написаний нами сценарій JavaScript).

JavaScript [ правити ]

Зараз ми напишемо код клієнтської сторони (JavaScript), який буде виконувати функцію відправки запиту назад на сервер. У Source View форми Default.aspx додайте частину коду, яка впроваджена в <script> елемента сторінки <head>:

... <head runat = "server"> <title> Untitled Page </ title> <script> function ShowCover () {var Command = "1:" + document. forms [0]. elements [ 'txtISBN']. value; var context = new Object (); context. CommandName = "ShowCover"; window. status = "Retrieving cover ..."; <% = CallbackStr%>} function CallBackHandler (result, context) {// Показуємо обкладинку з Amazon.com if (context. CommandName == "ShowCover") {var indexofComma = result. indexOf ( ","); // Відображаємо використовуваний Image URL var ImageURL = result. substring (0, indexofComma); document. images. item ( "Image1"). src = ImageURL; // Оновлюємо URL книги var BookURL = result. substring (indexofComma + 1, result. length); document. links ( "BookURL"). href = BookURL; window. status = "Retrieving cover ... Done." ; }} // Обробляємо помилки function onError (message, context) {alert ( "Exception: \ n" + message); } </ Script> </ head>

Зверніть увагу на те, що ми вже визначили три функції: ShowCover (), CallBackHandler і onError (). Функція ShowCover () формулює запит, який необхідно направити на серверну сторону; в цьому випадку вона приймає значення елемента управління TextBox (txtISBN) і поміщає його в змінну callbackStr (трохи пізніше ми визначимо цю змінну). Командний рядок, яка повинна бути передана на сервер, виглядає наступним чином (за «1:» слід номер книги ISBN) 1: 0375824839

Оператор <% = callbackStr%> включить сгенерированную рядок в функцію, тож в процесі роботи вона перетвориться:

function ShowCover () {var Command = "1:" + document. forms [0]. elements [ 'txtISBN']. value; var context = new Object (); context. CommandName = "ShowCover"; window. status = "Retrieving cover ..."; WebForm_DoCallback ( '__Page', Command, CallBackHandler, context, onError, false)}

Зверніть увагу на те, що ця функція повертає виклик функції CallBackHandler (), яка в свою чергу буде запущена, коли сервер поверне результат клієнту. При відправці множинних запитів серверу необхідно визначити, хто проводить зворотний виклик. Скористайтеся контекстної змінної, щоб встановити командне ім'я для кожного типу виклику ( «ShowCover»).

Повернення результату проводиться за допомогою змінної результату в функції CallBackHandler (). Він може виглядати наступним чином (два URL в цьому рядку відділяються комою, перший вказує на книжкову обкладинку, а другий - на безпосередньо книгу з Amazon.com):
http://images.amazon.com/images/P/0374292884.01.MZZZZZZZ.jpg,
http://www.amazon.com/exec/obidos/ASIN/0374292884/xxxx?devt=04Q4HFNSENYJ711BK2G2%26camp=2025% 26link_code = sp1

Після цього проводиться синтаксичний аналіз результату і він відображається в елементах управління сторінки.

Функція onError () виводить на клієнті аварійне вікно з повідомленням про помилку, коли сервер викидає виключення.

Після того, як код для клієнтської сторони завершено, ми переходимо до коду, який виходить за рамки веб-форми (Default.aspx.vb).

Код поза формою [ правити ]

Спочатку необхідно створити посилання на веб-службу Amazon.com. Для цього правою клавішею миші щелкнем на імені проекту в Solution Explorer, а потім виберемо Add Web Referencе. Введіть наступний URL, який вказує на розміщення WSDL в рамках веб-служби Amazon, натисніть Go:
http://soap.amazon.com/schemas3/AmazonWebServices.wsdl

Використайте стандартну назву com.amazon.soap, потім клацніть на Add Reference. Web-форма, яка отримує зворотний виклик, повинна впровадити інтерфейс ICallbackEventHandler. Необхідно оголосити змінну callbackStr:

Partial Class _Default Inherits System. Web. UI. Page Implements ICallbackEventHandler Public callbackStr As String

У події Page_Load потрібно сегенеріровать код, який виконує зворотний виклик з використанням методу GetCallbackEventReference () класу Page. Необхідно також смодіфіціровать кнопку Show Cover таким чином, щоб при її натисканні не відбувається відкат до сервера (замість цього буде виконуватися функція клієнтської сторони ShowCover ()):

Protected Sub Page_Load (ByVal sender As Object, _ByVal e As System. EventArgs) Handles Me. Load btnShowCover. Attributes. Add ( "onClick", _ "return false") callbackStr = _Page. ClientScript. _GetCallbackEventReference (Me, _ "Command", "CallBackHandler", _ "context", "onError", False) End Sub

Мінлива callbackStr зберігає наступний рядок:

WebForm_DoCallback ( '__Page', Command, CallBackHandler, context, onError, false)

Тут важливо те, що команда посилається на рядок, яка буде передаватися на сервер, а CallBackHandler посилається на функцію, що активізується (на сервері), коли сервер повертає результат клієнтові. У інтерфейсу ICallbackEventHandler є один метод для реалізації: функція RaiseCallbackEvent (). Вона активізується, коли клієнт робить запит на сервер. В цьому випадку потрібно вийти на веб-службу Amazon.com і отримати детальну інформацію про книгу за допомогою номера ISBN. URL книжкової обкладинки, так само як і URL книги будуть повернуті як рядки, відокремлені комою.

Public Function RaiseCallbackEvent (_ByVal eventArgument As String) As String _Implements _System. Web. UI. ICallbackEventHandler. _RaiseCallbackEvent 'Показуємо обкладинка If eventArgument.StartsWith ( "1:") Then' --- знімаємо команду eventArgument = eventArgument. Substring (2) 'Використовуємо пошук Amazon Dim Search As New _ com.amazon.soap.AmazonSearchService () Dim ISBNReq As New _ com.amazon.soap.AsinRequest With ISBNReq .asin = Trim (eventArgument) .devtag = "your_dev_tag". type = "heavy" .tag = "xxxx" End With 'Виконуємо запит пошуку Dim BookInfo As com. amazon. soap. ProductInfo BookInfo = Search. AsinSearchRequest (ISBNReq) 'повертаємо URL обкладинки Return BookInfo. Details (0). ImageUrlMedium & _ "," & BookInfo. Details (0). Url Else Throw (New Exception (_ "Command not recognized")) End If End Function

А ось і результат! Тепер натисніть F5, щоб протестувати додаток. Наберіть номер ISBN в текстовому вікні і натисніть кнопку Show Cover. Ви побачите, що обкладинка книги відображається на сторінці, і для цього не потрібно її оновлювати (сторінка не мерехтить). Крім цього, можна клацнути мишею на зображенні, щоб повернутися на сторінку, що містить більш детальну інформацію про книгу.

Безперервне оновлення [ правити ]

Оновлення інформації на сторінці без безпосереднього поновлення (refresh) самої сторінки - дуже цікава можливість, якою можна скористатися при більш ефективному використанні клієнтського callback-менеджера для додатків, яким потрібне постійне оновлення. Наприклад, вам може знадобитися простежувати ціни на біржі через веб-сторінку. При роботі зі звичайними веб-сторінками знадобиться безперервне оновлення, щоб перебувати в курсі останніх цін на біржі. У цьому розділі ми спробуємо на веб-сторінці створити біржовий апарат і скористатися клієнтським callback-менеджером для постійного оновлення біржових цін, для чого не знадобиться оновлювати саму сторінку.

Щоб отримати інформацію про останні цінах на біржі, ми скористаємося веб-службою, доступною за наступною адресою: asmx?wsdl> http://www.swanandmokashi.com/HomePage/WebServices/StockQuotes.asmx?wsdl Додайте веб-посилання до вищезазначеного URL і використовуйте ім'я за замовчуванням com.swanandmokashi.www. На цій же сторінці Default.aspx додайте елементи управління, представлені на малюнку, включаючи таблицю 3x2 і кнопковий елемент управління.

Налаштуйте GetStockPrice () в якості OnClientClick на кнопці Start Stocker Ticker. Перейдіть на Source View і додайте код, виділений жирним внизу:

... <head runat = "server"> <title> Untitled Page </ title> <script> ... function GetStockPrice () {var Command = "2:" var context = new Object (); context. CommandName = "GetStockPrice"; window. status = "Retrieving stock prices ..."; <% = CallbackStr%> setTimeout ( "GetStockPrice ()", 10000); } Function CallBackHandler (result, context) {// Показуємо обкладинку з Amazon.com if (context. CommandName == "ShowCover") {...} else // Показуємо біржові котирування if (context. CommandName == "GetStockPrice") {var count = 0; while (result. length> 0) {var indexofComma = result. indexOf ( ","); // витягаємо індивідуальні значення var Value = result. substring (0, indexofComma); result = result. substring (indexofComma + 1) switch (count) {case 0: {document. forms [0]. elements [ 'txtMSFTPrice']. value = Value; break} case 1: {document. forms [0]. elements [ 'txtMSFTChange']. value = Value; break} case 2: {document. forms [0]. elements [ 'txtAAPLPrice']. value = Value; break} case 3: {document. forms [0]. elements [ 'txtAAPLChange']. value = Value; break}} count ++; } Window. status = "Retrieving stock prices ... Done." ; }} ... </ script> </ head>

Цього разу рядок для відправки буде виглядати наступним чином:

2:

Щоб забезпечити самовідновлення біржових цін періоди, які звичайно, потрібно скористатися функцією setTimeout () в JavaScript, вона буде викликати функцію GetStockPrice () через певні проміжки часу (ми встановили 60,000, що означає 60 секунд):

function GetStockPrice () {var Command = "2:" var context = new Object (); context. CommandName = "GetStockPrice"; window. status = "Retrieving stock prices ..."; <% = CallbackStr%> setTimeout ( "GetStockPrice ()", 60000); }

На стороні сервера потрібно додати код, виділений жирним, до коду за межами Default.aspx. Ви отримаєте доступ до біржової веб-службі, біржова інформація повернеться як рядок:

Partial Class _Default Inherits System. Web. UI. Page Implements ICallbackEventHandler Public callbackStr As String Protected Sub Page_Load (ByVal sender As Object, _ByVal e As System. EventArgs) Handles Me. Load btnShowCover. Attributes. Add ( "onClick", _ "return false") btnStart. Attributes. Add ( "onClick", _ "return false") callbackStr = Page. ClientScript. _GetCallbackEventReference (Me, _ "Command", "CallBackHandler", _ "context", "onError", False) End Sub Public Function RaiseCallbackEvent (_ ByVal eventArgument As String) As String _ Implements _ System. Web. UI. ICallbackEventHandler. _ RaiseCallbackEvent 'Показуємо обкладинку If eventArgument.StartsWith ( "1:") Then ... ElseIf eventArgument.StartsWith ( "2:") Then' --- біржової веб сервіс Dim resultString As String = String. Empty '--- доступать до біржового веб сервісу Dim ws As New _com.swanandmokashi.www.StockQuotes Dim result () As com.swanandmokashi.www.Quote' --- отримуємо біржове котирування для MSFT result = ws. GetStockQuotes ( "MSFT") resultString = result (0). StockQuote & "," & _result (0). Change & "," '--- отримуємо біржове котирування для AAPL result = ws.GetStockQuotes ( "AAPL") resultString + = result (0) .StockQuote & _ "," & result (0) .Change & ","' повертаємо результати Return resultString Else Throw (New Exception (_ "Command not recognized")) End If End Function End Class

Типова рядок повернення буде виглядати наступним чином:

25.70, + 0.24,35.84, + 0.48

От і все! Щоб протестувати додаток, натисніть F5. Клацніть на кнопці Start Stock Ticker і ви побачите, як значення біржових цін змінюються кожну хвилину. Перевірте, щоб це властивість застосовувалося в робочий час біржі (зазвичай з 9-30 до 16-00 за стандартним східним часом - відрегулюйте час відповідно до часового поясу).

Реалізація AJAХ: Мистецтво компромісу [ правити ]

Багато програмістів сприймають JavaScript як умовно оптимальне рішення через відсутність методів налагодження і високу схильність помилок. Тому було б справедливо відзначити, що AJAX - компромісне рішення. Ця технологія допомагає виграти за рахунок більш надійних мов, таких як Java або C # з презентаційної привабливістю, і інноваційної привабливості JavaScript.

Ми сподіваємося, що в умовах популярності AJAX і зростаючого використання JavaScript виробники браузерів продовжать інноваційну політику по відношенню до об'єктів JavaScript і впровадять механізми підвищення сумісності цих об'єктів, їх безпечного використання і поліпшення налагодження.

У той же час, AJAX може в майбутньому сформувати нове покоління Інтернет-порталів та інтерактивних програм. За допомогою AJAX, в таких порталах Інтернет-новин, як Yahoo, Google або MSN користувачі можуть отримувати доступ до інформації по всіх темах, включаючи і специфічні напрямки, з однієї і тієї ж сторінки. Різноманітні клієнтські можливості, які можна реалізувати за допомогою існуючих веб-технологій та інтернет-інфраструктури, виглядають привабливо. Інтерактивні програми вже адаптували AJAX - наприклад, Google використовує цю технологію для надзвичайно популярного поштового клієнта Gmail. Ми сподіваємося, що ця тенденція буде розвиватися і далі.

Команді розробників може сподобатися можливість простого доступу до цієї технології і легкість навчання. Як згадувалося раніше, дана технологія доступна на всіх сучасних браузерах. Крім цього, вона не вимагає складних навичок програмування, наприклад як J2EE або .NET, більш того, ви можете справити враження на кінцевого користувача отриманими результатами.

У міру зростання популярності AJAX, будуть з'являтися корисні розширення на третій стороні, наприклад, що спрощують такі складні завдання, як налагодження, межплатформенному розробки, обробка XML. Деякі з найбільш помітних розширень, які можуть бути корисні на сьогоднішній день, це:

  • Greasemonkey - розширення Firefox, що дозволяє встановлювати замовні сценарії DHTML. Деякі автори блогів створили сценарії, що дозволяють відслідковувати і налагоджувати програми AJAX, використовуючи властивості Greasemonkey.
  • Sarrisa - бібліотека сценаріїв, яка автоматизує і спрощує найбільш узагальнені операції XML (наприклад, документ XML, що завантажується з URL, реалізації, обробка XPath, XSLT) з AJAX, а також, операції межбраузерних реалізацій і тестування.
  • Direct Web Remoting (DWR) - віддалена Java-бібліотека, заснована на AJAX, що дозволяє віддалено активізувати код Java-сервера з програм JavaScript.
  • FireBug - розширення Firefox.

Отже, цей підручник допоміг розібратися, наскільки просто створення програми AJAX-типу. Якщо ви одного разу подолали початковий бар'єр і зробили всі необхідні установки, (особливо це стосується JavaScript на стороні клієнта), то побачите, наскільки просто на базі одного прикладу створити інший сценарій. По-справжньому, для використання AJAX існує стільки можливостей, що все буде залежати тільки від ваших творчих здібностей і правильної реалізації.

Com/exec/obidos/ASIN/0374292884/xxxx?
Asmx?