Приклади Ajax запитів. Вітаю Вас, любий друже! Створення синхронних запитів

Ми познайомилися з прямими методами jQuery для роботи з Ajax (такими як get(), post() та load()). У цій статті описано низькорівневий програмний інтерфейс jQuery Ajax API.

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

Створювати запити за допомогою низькорівневого API набагато складніше, ніж за допомогою прямих або допоміжних методів. Різниця полягає в тому, що такий підхід дозволяє контролювати багато інших аспектів запиту і отримувати про запит набагато більше інформації. Центральне місце в низькорівневому API займає метод ajax() , простий приклад використання якого наведено нижче (тут використовується вихідний файл та файл mydata.json, описані в попередній статті):

$(function() ( $.ajax("mydata.json", ( success: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3))).appendTo ("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); )));

Аргументами методу ajax() є запитуваний URL і об'єкт відображення даних, властивості якого визначають набір пар "ключ-значення", кожна з яких визначає певний параметр запиту. Тут об'єкт, що передається методу ajax(), містить тільки один параметр, success, що задає функцію, яка буде викликатися у разі успішного виконання запиту.

У цьому прикладі ми запитуємо у сервера файл mydata.json і використовуємо його разом із шаблоном даних для створення елементів та вставки їх у документ, як це робилося у попередній статті за допомогою прямих методів. За умовчанням метод ajax() створює HTTP-запит GET, тобто. даний приклад еквівалентний використанню методів get() та getJSON().

Метод ajax() повертає об'єкт jqXHR, який можна використовувати для отримання детальної інформації про запит та з яким можна взаємодіяти. Об'єкт jqXHR є оболонкою об'єкта XMLHttpRequest , що є фундаментом браузерної підтримки Ajax.

При виконанні більшості операцій Ajax об'єкт jqXHR можна просто ігнорувати, що я рекомендую робити. Цей об'єкт використовується в тих випадках, коли необхідно отримати повнішу інформацію про відповідь сервера, ніж та, яку вдається отримати іншими способами. Крім того, його можна використовувати для налаштування параметрів Ajax-запиту, але це простіше зробити, використовуючи параметри, доступні для методу ajax(). Властивості та методи об'єкта jqXHR описані в таблиці нижче:

Об'єкт jqXHR зустрічається у кількох місцях коду. Спочатку він використовується для збереження результату, який повертається методом ajax(), як показано в прикладі нижче:

$(function() ( var jqxhr = $.ajax("mydata.json", ( success: function(data) ( var template = $("#flowerTmpl")); template.tmpl(data.slice(0, 3)) ).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); )); " + jqxhr.status + " " + jqxhr.statusText); if (jqxhr.readyState == 4) ( console.log("Запит виконаний: " + jqxhr.responseText); clearInterval(timerID); ) ), 100); ));

У цьому прикладі ми зберігаємо результат, що повертається методом ajax(), а потім використовуємо метод setInterval() для виведення інформації про запит кожні 100 мс. Використання результату, що повертається методом ajax(), не змінює того факту, що запит виконується асинхронно, тому при роботі з об'єктом jqXHR необхідно дотримуватися запобіжних заходів. Для перевірки стану запиту ми використовуємо властивість readyState (завершення запиту відповідає значення 4) і виводимо відповідь сервера на консоль.

Для цього сценарію консольний висновок виглядає так (у вашому браузері він може виглядати трохи інакше):

Я використовую об'єкт jqXHR лише в окремих випадках і не роблю цього взагалі, якщо він є результатом, що повертається методом ajax(). Бібліотека jQuery автоматично запускає Ajax-запит під час виклику методу ajax(), і тому я не вважаю можливість налаштування параметрів запиту скільки-небудь корисного. Якщо я хочу працювати з об'єктом jqXHR (як правило, для отримання додаткової інформації про відповідь сервера), то роблю це зазвичай через параметри обробника подій, про які ми поговоримо далі. Вони надають мені інформацію про стан запиту, що позбавляє необхідності з'ясовувати його.

Одним з найважливіших доступних параметрів є параметр url, що дозволяє вказати URL-адресу для запиту. Можна використовувати цей параметр як альтернативу передачі URL-адреси як аргумент методу ajax(), як показано в прикладі нижче:

$(function() ( $.ajax(( url: "mydata.json", success: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3))) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ));

Для завдання потрібного типу запиту, який потрібно виконати, використовується параметр type. За замовчуванням виконуються GET-запити, як у попередньому прикладі. Приклад використання методу ajax() для створення запиту POST і відправлення даних форми на сервер наведено нижче:

$(function() ( $.ajax(( url: "mydata.json", success: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3))) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2") )); (function(e) ( $.ajax(( url: "phphandler.php", тип: "post", data: $("form").serialize(), success: processServerResponse, dataType: "json" ))); e.preventDefault() )); function processServerResponse(data) ( // Спочатку приховуємо всю продукцію var inputElems = $("div.dcell").hide(); , замовлення якої більше 0 // (відповідь від сервера міститься тільки така продукція) var filtered = inputElems.has("input") .appendTo("#row1").show(); ) // Приховуємо базові елементи форми $( "#buttonDiv, #totalDiv").remove(); // Відображаємо нові елементи з шаблону totalTmpl $("#totalTmpl").tmpl(data).appendTo("body") )); Всього замовлень: $(total) Замовити .png"/> $(name):

Тут не докладно описувати цей приклад, т.к. ми його детально розглянули в попередній статті (тільки з використанням методу post()). Відзначу тільки, що тут додатково до типу ми використовували ще кілька параметрів. Для вказівки мети запиту POST використовується описаний раніше параметр url. Дані, що пересилаються, вказуються за допомогою параметра data, значення якого встановлюється за допомогою методу serialize(), описаного в попередній статті. Тип даних, отриманих від сервера, вказується в параметрі dataType.

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

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

$(function() ( $.ajax(( url: "mydata.json", success: function(data, status, jqxhr) ( console.log("Статус: " + status); console.log("jqXHR статус: " + jqxhr.status + " " + jqxhr.statusText); console.log(jqxhr.getAllResponseHeaders()); var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ))); ));

Аргумент status - це рядок, що описує результат запиту. Функція зворотного виклику, яку ми задаємо, використовуючи параметр success, виконується лише успішних запитів, і тому значенням даного аргументу зазвичай є success. Винятком є ​​випадок, коли ви використовуєте параметр ifModified, описаний далі.

Функції зворотного виклику для всіх подій Ajax наслідують один і той же зразок, але найбільшу користь цей аргумент приносить у випадку ряду інших подій.

Останній аргумент – це об'єкт jqXHR. Ви не повинні з'ясовувати стан запиту, перш ніж розпочати роботу з цим об'єктом, оскільки знаєте, що функція виконується лише тоді, коли запит завершується успішно. У цьому прикладі об'єкт jqXHR використовується для отримання інформації про стан запиту та заголовки, які сервер включив у відповідь, а також для виведення цієї інформації на консоль.

У цьому випадку результат має такий вигляд (залежно від того, який сервер ви використовуєте, у вас може бути інший набір заголовків):

Параметр error використовується для вказівки функції, яка повинна викликатись при невдалому завершенні запиту. Відповідний приклад наведено нижче:

Error (color: red; border: medium solid red; padding: 4px; margin: auto; width: 200px; text-align: center)

$(function() ( $.ajax(( url: "NoSuchFile.json", success: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3))) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); error: function(jqxhr, status, errorMsg) "Статус:" + status + "Помилка: " + errorMsg) .insertAfter("h1"); )));

Тут запитується відсутній на сервері файл NoSuchFile.json, і тому запит свідомо не зможе бути виконаний, внаслідок чого буде викликано функцію, задану за допомогою параметра error. Аргументами цієї функції є об'єкт jqXHR, а також повідомлення про стан помилки та повідомлення про помилку, отримане у відповіді сервера. Всередині цієї функції до документу додається елемент div, що відображає значення аргументів status та errorMsg, як показано на малюнку:

Параметр beforeSend дозволяє встановити функцію, яка буде викликатися перед відправкою запитів. Це дозволяє конфігурувати запит в останню хвилину, додаючи або замінюючи параметри, передані методу ajax() (що може бути особливо корисним, якщо для безлічі запитів використовується той самий об'єкт, що містить необхідні значення параметрів). Приклад використання такого підходу наведено нижче:

$(function() ( $.ajax(( success: function(data)) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1")) ; template.tmpl(data.slice(3)).appendTo("#row2"); error: function(jqxhr, status, errorMsg) ( $(")) Помилка: " + errorMsg) .insertAfter("h1"); ), передпропозицією: function(jqxhr, settings) ( settings.url = "mydata.json"; ) )); ));

Аргументами зазначеної функції є об'єкт jqXHR (який може стати в нагоді для налаштування заголовків запиту або скасування запиту, перш ніж він буде відправлений) і об'єкт, що містить параметри, передані методу ajax(). У цьому прикладі URL-адреса для Ajax-запиту задається за допомогою параметра beforeSend.

У попередніх прикладах ми реагували на настання подій, пов'язаних з Ajax-запитами, викликом однієї функції, але в параметрах success, error, complete і beforeSend можна задавати масив функцій, кожна з яких виконуватиметься при запуску відповідної події. Простий приклад цього наведено нижче:

$(function() ( $.ajax(( success: , beforeSend: function(jqxhr, settings) ( settings.url = "mydata.json"; ) ))); function processData(data, status, jqxhr) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) function reportStatus(data, status, jqxhr) (console.log("Статус:" + status + "Код результату:" + jqxhr.status); )));

У цьому прикладі для параметра success заданий масив, що складається з двох функцій, одна з яких використовує дані додавання елементів до документа, а друга виводить інформацію на консоль.

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

$(function() ( $.ajax(( success: function(data)) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1")) ; template.tmpl(data.slice(3)).appendTo("#row2"); beforeSend: function(jqxhr, settings) ( settings.url = "mydata.json"; ), context: $("h1 "), complete: function(jqxhr, status) ( var color = status == "success" ? "green" : "red"; this.css("border", "thick solid " + color); ))); ));

Тут параметр context встановлюється на об'єкт jQuery, який містить елементи h1 документа. У функції, що визначається параметром complete, ми виокремлюємо рамкою вибрані елементи (у даному випадку - елемент, оскільки в документі є тільки один елемент h1) шляхом виклику методу css() для об'єкта jQuery (на який посилаємося через це). Колір рамки визначається виходячи з стану запиту.

За допомогою параметра context можна встановити як контекст будь-який об'єкт, і відповідальність за виконання лише допустимих для цього об'єкта операцій лежить на вас. Наприклад, якщо ви задаєте в якості контексту елемент HTMLElement, то перед тим, як викликати для нього будь-які методи jQuery, ви повинні передати цей об'єкт функції $().

Існує група параметрів, за допомогою яких можна виконати базове налаштування Ajax-запиту (деякі з них, url та type, ми розглянули вище). З усіх доступних параметрів вони становлять найменший інтерес, та їх імена переважно говорять самі себе. Параметри, про які йдеться, наведено в таблиці нижче:

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

$(function() ( $.ajax(( timeout: 5000, headers: ( "X-HTTP-Method-Override": "PUT" )), success: function(data) ( var template = $("#flowerTmpl")) ; template.tmpl(data.slice(0, 3)).appendTo("#row1"); , status, errorMsg) ( console.log("Error: " + status); ) ));

У цьому прикладі параметр timeout встановлює максимальну тривалість тайм-ауту, що дорівнює 5 сек. Якщо запит за цей час не буде виконано, то буде викликано функцію, задану за допомогою параметра error, і буде виведено код помилки, який визначається параметром status.

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

Додатково в цьому прикладі нижче використовується параметр headers, за допомогою якого до запиту додається заголовок. Для вказівки заголовків використовується об'єкт відображення даних. Заголовок, що використовується тут, може бути корисним для створення веб-додатків, що підтримують архітектурний стиль REST, якщо тільки сервер правильно його розпізнає.

У наступних розділах описані найбільш корисні і заслуговують на увагу додаткові параметри, що застосовуються до Ajax-запитів. Зазвичай вони рідко використовуються, але у випадках, коли виникає потреба, вони виявляються незамінними. Ці параметри дозволяють здійснювати точне налаштування взаємодії jQuery з Ajax.

Керування режимом виконання запитів здійснюється за допомогою параметра async. Значення true, яке використовується для цього параметра за замовчуванням, означає, що запит буде виконуватися в асинхронному режимі, тоді як false відповідає синхронний режим.

При синхронному виконанні запиту метод ajax() поводиться як звичайна функція, і браузер переходить до виконання інших інструкцій сценарію лише після того, як закінчиться виконання запиту.

За допомогою параметра ifModifiedможна забезпечити отримання лише у тому випадку, якщо з останнього запиту вони було змінено. Така поведінка визначається заголовком Last-Modified. Завдяки цьому вдається уникнути марної пересилки даних, яка не дасть користувачеві ніякої нової інформації в порівнянні з тією, яку він вже має. За замовчуванням параметр ifModified має значення false, що вказує jQuery на необхідність ігнорування заголовка Last-Modified та надання даних у будь-якому випадку.

Приклад використання цього параметра наведено нижче:

$(function() ( $("button").click(function(e) ( $.ajax("mydata.json", )) success") ( $("#row1, #row2").children().remove(); var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo( "#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) else if (status == "notmodified") ( $("img").css("border" , "thick solid green"); )));

У цьому прикладі значення параметра ifModified встановлюється рівним true. Функція success викликається завжди, але якщо з того моменту, коли вміст запитувався в останній раз, воно не змінилося, то аргумент data матиме значення undefined, а аргумент status - значення не модифіковано.

У разі виконувані дії визначаються значенням аргументу status. Якщо значення цього аргументу є success, то аргумент data використовується додавання елементів у документ. Якщо ж аргумент status не має значення, то ми використовуємо метод css() для виділення рамкою елементів, які вже є в документі.

У відповідь на подію click, пов'язану з кнопкою, викликається метод ajax(). Це дозволяє багаторазово повторювати один і той же запит, щоб продемонструвати вплив параметра ifModified, як показано на малюнку:

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

Уявіть, що ви запитуєте дані, але у методі, вказаному у параметрі success, міститься помилка, яка перешкоджає правильному оновленню вмісту документа. Тоді вашою наступною дією буде спроба клацнути на кнопці ще раз, щоб досягти очікуваного результату. Непродумано використовуючи параметр ifModified, можна проігнорувати дії користувача, змушуючи його робити більш серйозні дії усунення проблеми.

Параметр statusCodeдозволяє вибирати варіанти подальших дій залежно від коду відповіді HTTP-запити. Його можна використовувати замість параметрів success і error, або на додаток до них. Приклад самостійного використання параметра statusCode наведений нижче:

$(function() ( $.ajax(( url: "mydata.json", statusCode: ( 200: function(data) ( var template = $("#flowerTmpl")); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); 404: function(jqxhr, status, errorMsg) ( $("") .text("Статус: " + status + " Помилка: " + errorMsg) .insertAfter("h1"); ) )));

Тут параметр statusCode заданий у вигляді об'єкта, що встановлює зв'язок між кодами відповідей на HTTP-запити та відповідними функціями, які повинні бути виконані на сервері. Які саме аргументи передаються функціям, залежить від того, чи код відповіді відображає успішне виконання запиту або помилку.

Якщо код (наприклад, 200) відповідає успішному запиту, то аргументи збігаються з тими, які передавалися функції, що визначається параметром success. В іншому випадку (наприклад, при коді відповіді 404, що означає, що файл, що запитується, не знайдений) аргументи збігаються з тими, які передавалися б функції, що визначається параметром error.

Як бачите, цей засіб не дає безпосередньої інформації про коди відповіді. Я часто користуюся ним у процесі налагодження взаємодії браузера із сервером, зазвичай для того, щоб з'ясувати, чому jQuery поводиться не так, як мені хотілося б. При цьому я використовую параметр statusCode на додаток до параметрів success та error та виводжу інформацію на консоль. Якщо ці параметри використовуються спільно, спочатку будуть виконані функції success і error, а потім вже - функції, що визначаються параметром statusCode.

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

Цей засіб дуже допомагає при роботі з серверами Microsoft ASP.NET, що приєднують зайві дані до даних JSON. Видалення таких даних за допомогою параметра dataFilter потребує лише мінімальних зусиль. Приклад використання параметра dataFilter наведено нижче:

$(function() ( $.ajax(( url: "mydata.json", success: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3))) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); dataType: "json", dataFilter: function(data, dataType) = "json") ( var filteredData = $.parseJSON(data); filteredData.shift(); return JSON.stringify(filteredData.reverse()); ) else ( return data; ) )));

Функції передаються дані, отримані із сервера, та значення параметра dataType. Якщо параметр dataType не використовується, то другому аргументу надається значення undefined. Ваше завдання полягає в тому, щоб відновити відфільтровані дані. У цьому прикладі предмет нашої уваги – дані у форматі JSON:

Var filteredData = $.parseJSON(data); filteredData.shift(); return JSON.stringify(filteredData.reverse()); ...

Для підвищення ілюстративності прикладу у ньому виконуються деякі додаткові операції. По-перше, дані JSON перетворюються на масив JavaScript за допомогою методу jQuery parseJSON. Потім з масиву видаляється перший елемент з допомогою методу shift(), а порядок решти його елементів звертається з допомогою методу reverse().

Все, що потрібно від функції, - повернути рядок, і тому ми викликаємо метод JSON.stringify(), знаючи, що jQuery перетворює дані на об'єкт JavaScript, перш ніж викликати функцію success. У цьому прикладі було продемонстровано можливість видалення елемента з масиву, проте, залежно від ситуації, ми могли б виконати будь-який інший вид обробки.

Кінцевий результат представлений малюнку:

Розгляд однієї з найулюбленіших налаштувань я приберіг наостанок. Ви, мабуть, звернули увагу, що при отриманні певних типів даних jQuery автоматично виконує деякі зручні перетворення. Наприклад, отримуючи дані JSON, jQuery надає функцію success, що використовує об'єкт JavaScript, а не вихідний необроблений рядок JSON.

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

$(function() ( $.ajax(( url: "flowers.html", //) У цьому прикладі ми завантажуємо HTML-розмітку, а не дані у форматі JSON success: function(data, status, jqxhr) ( var elems = data.filter("div").addClass("dcell"); elems.slice(0,3); converters: ("text html": function(data) ( return $(data); ) )));

У цьому прикладі реєструється функція типу даних text html. Зверніть увагу на пробіл між компонентами MIME-типу (на відміну від форми запису text/html). Функція приймає дані, отримані від сервера, та повертає перетворені дані. У цьому випадку перетворення даних полягає в передачі HTML-фрагмента, що міститься у файлі flowers.html, функції $() та повернення результату. Звідси випливає, що до об'єкта, що передається як аргумент data функції success, застосовні звичайні методи jQuery.

Працюючи з перетворювачами даних, можна надто захопитися. Я завжди намагаюся уникати спокуси робити за допомогою цих функцій більше, ніж слід. Наприклад, іноді мене так і тягне застосувати до даних JSON шаблон і передати отримані в результаті HTML-елементи. І хоча цей прийом дуже зручний, він послужить погану службу, якщо хтось інший намагатиметься розширити ваш код або, наприклад, вам згодом буде потрібно організувати інтенсивну обробку даних для отримання їх у вихідній формі.

Після того як ви познайомилися з методом ajax() та доступними для роботи з ним параметрами, ми можемо розглянути кілька додаткових методів, які надаються jQuery для спрощення налаштування запитів.

Метод ajaxSetup() дозволяє встановити значення параметрів, які будуть застосовуватися за замовчуванням у всіх Ajax-запитах, тим самим звільняючи вас від необхідності настроювати параметри кожного запиту. Приклад використання цього методу наведено нижче:

") .text("Статус: " + status + " Помилка: " + errorMsg) .insertAfter("h1"); ), converters: ( "text html": function(data) ( return $(data); ) ) ));$.ajax(( url: "flowers.html", success: function(data, status, jqxhr) ( var elems = data.filter("div")).addClass("dcell"); 0, 3).appendTo("#row1");

Метод ajaxSetup() викликається за допомогою функції jQuery $ аналогічно до того, як це робилося у разі виклику методу ajax(). Аргументом методу ajaxSetup() є об'єкт, що містить значення параметрів, які потрібно використовувати за замовчуванням для всіх Ajax-запитів. У цьому прикладі ми встановлюємо стандартні значення для параметрів timeout, global, error і converters.

Після того як був викликаний метод ajaxSetup(), нам залишається визначити значення лише значення параметрів, які ми хочемо змінити, або ті, які не надаються за замовчуванням. Це забезпечує значну економію часу у випадках, коли доводиться робити безліч запитів з однаковими значеннями параметрів.

Метод ajaxSetup() визначає базові значення параметрів конфігурації, застосовні до всіх запитів Ajax. Можливості динамічного налаштування параметрів окремих Ajax-запитів забезпечуються методом ajaxPrefilter() . Приклад використання цього методу наведено нижче:

$(function() ( $.ajaxSetup(( timeout: 15000, global: false, error: function(jqxhr, status, errorMsg)) ( $(")) .text("Статус: " + status + " Помилка: " + errorMsg) .insertAfter("h1"); ), converters: ( "text html": function(data) ( return $(data); ) ))); , jqxhr) ( if (originalSettings.dataType == "html") ( settings.timeout = 2000; ) else ( jqxhr.abort(); ) )) $.ajax(( url: "flowers.html", dataType: " html", success: function(data, status, jqxhr) ( var elems = data.filter("div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2"); )));

Вказана функція буде виконуватися для кожного нового Ajax-запиту. Аргументами, що передаються функції, є параметри запиту (включаючи будь-які стандартні значення, встановлені вами за допомогою методу ajaxSetup()), а також вихідні параметри, передані методу ajax() (виключаючи будь-які значення за замовчуванням) і об'єкту jqXHR запиту.

Ми вносимо зміни до об'єкта, який передається як перший аргумент, як показано в прикладі. У цьому сценарії, якщо серед параметрів, що передаються методу ajax(), є параметр dataType, то тривалість тайм-ауту встановлюється рівною двом секундам. Щоб запобігти відправленню решти запитів, для об'єкта jqXHR викликається метод abort().

Здійснює запит до сервера без перезавантаження сторінки. Це низькорівневий метод, що має велику кількість налаштувань. Він є основою роботи всіх інших методів ajax. Має два варіанти використання:

url - адреса запиту.
settings — Ви можете встановити параметри для цього запиту. Задається за допомогою об'єкта у форматі (ім'я: значення, ім'я: значення...). Жодна з налаштувань не є обов'язковою. За замовчуванням можна встановити установки за допомогою методу $.ajaxSetup() .

↓ назва :тип (значення за замовчуванням)

При виконанні запиту в заголовках (header) вказуються допустимі типи вмісту, що очікується від сервера. Значення цих типів буде взято з параметра accepts.

За замовчуванням, всі запити без перезавантаження сторінки відбуваються асинхронно (тобто після надсилання запиту на сервер сторінка не зупиняє свою роботу в очікуванні відповіді). Якщо вам потрібно синхронне виконання запиту, то встановіть параметр false . Кросдоменні запити та запити типу "jsonp" не можуть виконуватись у синхронному режимі.

Майте на увазі, що виконання запитів у синхронному режимі може призвести до блокування сторінки, доки запит не буде повністю виконаний.

Це поле містить функцію, яка буде викликана безпосередньо перед надсиланням ajax-запиту на сервер. Така функція може бути корисною для модифікації jqXHR-об'єкта (у ранніх версіях бібліотеки (до 1.5), замість jqXHR використовується XMLHttpRequest). Наприклад, можна змінити/вказати потрібні заголовки (headers) тощо. Об'єкт-jqXHR буде переданий у функцію першим аргументом. Другим аргументом передаються налаштування запиту.

У цьому полі можна задати додаткові заголовки запиту (header). Ці зміни будуть введені до виклику передпропозицією, в якій можуть бути здійснені остаточні виправлення заголовків.

При переведенні цієї настройки в true , запит буде виконано зі статусом "успішно", лише якщо відповідь від сервера відрізняється від попередньої відповіддю. jQuery перевіряє цей факт, звертаючись до заголовка Last-Modified. Починаючи з jQuery-1.4, крім Last-Modified перевіряється і "etag" (обидва вони надаються сервером і необхідні для оповіщення браузера про те, що дані з сервера, що запитуються, не змінені з попереднього запиту).

Дозволяє встановити статус джерела сторінки локальним (якби це відбувалося за протоколом file), навіть якщо jQuery розпізнав його інакше. Бібліотека вирішує, що сторінка запущена локально у разі наступних протоколів: file, *-extension та widget.

Рекомендується встановлювати значення параметра isLocalглобально – за допомогою функції $.ajaxSetup() , а не в налаштуваннях окремих ajax-запитів.

Визначає ім'я параметра, який додається до url при jsonp-запиті (за замовчуванням, використовується "callback" - "httр://siteName.ru?callback=...").

Починаючи з jQuery-1.5, вказавши в цьому параметрі false , ви запобігте додаванню до url додаткового параметра. І тут необхідно явно встановити значення властивості jsonpCallback. Наприклад: (jsonp:false, jsonpCallback:"callbackName") .

Визначає ім'я функції, яка буде викликана під час відповіді сервера на jsonp-запит . За умовчанням, jQuery генерує довільну назву цієї функції, що є кращим варіантом, що спрощує роботу бібліотеки. Однією з причин, за яких варто вказувати власну функцію обробки jsonp-запиту, є покращення кешування GET-запитів.

Починаючи з jQuery-1.5, ви можете вказати функцію в цьому параметрі, щоб обробити відповідь сервера самостійно. У цьому випадку, ця функція повинна повертати отримані від сервера дані (у зазначеній функції вони будуть доступні в першому параметрі).

За промовчанням, дані, що передаються на сервер, попередньо перетворюються на рядок (url-формату: fName1=value1&fName2=value2&...) відповідну "application/x-www-form-urlencoded". Якщо вам необхідно надіслати дані, які не можна піддавати подібній обробці (наприклад документ-DOM), слід відключити опцію processData.

Цей параметр використовується для кросдоменних ajax-запитів типу GET, dataType при цьому може бути або "jsonp", або "script". Визначає кодування, в якому буде виконано кросдоменний запит. Це необхідно, якщо сервер на чужому домені використовує кодування, відмінне від кодування на сервері рідного домену.

(Це налаштування з'явилося у jQuery-1.5)набір пар, у якому кодам виконання запиту зіставляються функції, які буде викликані. Наприклад, для коду 404 (сторінки не існують) можна зробити виведення повідомлення на екран:

$.ajax (( statusCode: ( 404 : function () ( alert ( "Сторінка не знайдена") ; ) ))));

Функції, що реагують на коди вдалого виконання запиту, будуть отримувати ті ж аргументи, що і функції-обробники вдалого виконання запиту (зазначені в параметрі success), а функції, що спрацьовують на коди помилок, будуть такими ж, як і в error-функцій.

Функція, яка буде викликана у разі успішного завершення запиту до сервера. Їй будуть передані три параметри: дані, надіслані сервером і які вже пройшли попередню обробку (відмінна для різних dataType). Другий параметр – рядок зі статусом виконання. Третій параметр містить об'єкт jqXHR (у попередніх версіях бібліотеки (до 1.5), замість jqXHR використовується XMLHttpRequest). Починаючи з jQuery-1.5 замість однієї функції, цей параметр може приймати масив функцій.

Час очікування відповіді сервера. Задається в мілісекундах. Якщо цей час буде перевищено, запит буде завершено з помилкою і буде подія error (див. опис вище), яка матиме статус "timeout".

Час відраховується з моменту виклику функції $.ajax. Може статися, що в цей момент буде запущено кілька інших запитів і браузер відкладе виконання поточного запиту. У цьому випадку timeoutможе завершитися, хоча фактично запит навіть ще не був запущений.

У jQuery-1.4 і молодшому, при завершенні часу очікування, об'єкт XMLHttpRequest перейде в стан помилки і доступ до його полів може викликати виняток. У Firefox 3.0+ запити типу script та JSONP не будуть перервані при перевищенні часу очікування. Вони будуть завершені навіть після того, як цей час закінчиться.

Функція, яка надасть об'єкт XMLHttpRequest. За промовчанням, для браузерів IE цим об'єктом є ActiveXObject, а в інших випадках це XMLHttpRequest. За допомогою цього параметра можна впровадити власну версію цього об'єкта.

(Це налаштування з'явилося у jQuery-1.5.1)Набір пар (ім'я:значення) для зміни/додавання значень відповідних полів об'єкта XMLHttpRequest . Наприклад, можна встановити його властивість з Credentials в true при виконанні кросдоменного запиту:

$.ajax ((url: a_cross_domain_url, xhrFields: (withCredentials: true))));

У jQuery-1.5 властивість withCredentials не підтримується нативним XMLHttpRequest і при кроссдоменном запиті це поле буде проігноровано. У всіх наступних версіях бібліотеки це виправлено.

Налаштування beforeSend, error, dataFilter, success і complete (їх опис є у попередньому розділі) дозволяють встановити обробники подій, які у певні моменти виконання кожного ajax-запроса.

Приклад простого використання. Виведемо повідомлення при успішному виконанні запиту:

$.ajax ((url: "ajax/test.html", success: function () (alert ("Load was performed.");)));

Починаючи з jQuery-1.5, метод $.ajax() повертає об'єкт jqXHR, який також реалізує інтерфейс deferred , що дозволяє задавати додаткові обробники виконання. Крім стандартних для об'єкта deferred методів .done(), .fail() і.then() , за допомогою яких можна встановлювати обробники, jqXHR реалізовані.success(), .error() і.complete() . Це зроблено для відповідності звичним назв методів, за допомогою яких встановлюються обробники виконання ajax-запитів. Однак, починаючи з jQuery-1.8 ці три методи стануть небажаними для використання.

Для деяких типів запитів, таких як jsonp або кросдоменних запитів GET, не передбачається використання об'єктів XMLHttpRequest. У цьому випадку передані в обробники XMLHttpRequest і textStatus будуть містити значення undefined .

Всередині обробників, змінна this буде містити значення параметра context. У випадку, якщо він не був заданий, це буде містити об'єкт налаштувань.

Функція $.ajax() дізнається про тип надісланих сервером даних від сервера (засобами MIME). Крім цього, є можливість особисто вказати (уточнити), як слід інтерпретувати ці дані. Це робиться за допомогою параметра dataType. Можливі значення цього параметра:

Зауваження 1: коли запит надсилається на сторонній домен (що можливо тільки з dataType рівним jsonp або script), обробники помилки виконання (error), а також глобальні події не спрацюють.

Зауваження 2: тип даних, заданий datatype не повинен суперечити наданої сервером MIME-інформації. Наприклад, дані xml повинні бути представлені сервером як text/xml або application/xml . Якщо це не буде виконано, jquery спробує конвертувати отримані дані у зазначений тип (докладніше про це розділ Converters).

За замовчуванням запит до сервера здійснюється HTTP-методом GET. За потреби зробити запит методом POST, потрібно вказати відповідне значення у налаштуванні type . Дані, що надсилаються методом POST, будуть перетворені на UTF-8, якщо вони знаходяться в іншому кодуванні, як того вимагає стандарт W3C XMLHTTPRequest.

Параметр data може бути заданий або рядком у форматі key1 = value1 & key2 = value2 (формат передачі даних в url), або об'єктом з набором пар (ім'я: значення) - (key1: "value1", key2: "value2") . В останньому випадку перед відправкою даних jQuery перетворює заданий об'єкт у рядок за допомогою $.param() . Однак, це перетворення можна скасувати, вказавши в налаштуванні processData значення false . Перетворення на рядок небажано, наприклад, у разі відправки на сервер xml-об'єкта. У цьому випадку, бажано змінити налаштування contentType з application/x-www-form-urlencodedбільш відповідний mime-тип .

Примітка:більшість браузерів не дозволяють проводити ajax-запити на ресурси з доменами, піддоменами та протоколами, відмінними від поточного. Однак це обмеження не поширюється на запити типу jsonp та script .

Отримані від сервера дані можуть бути надані у вигляді рядка або об'єкта, залежно від значення параметра dataType (див. пункт dataType вище). Ці дані завжди доступні в першому параметрі обробника виконання ajax-запиту:

$.ajax ((url: "some.php", success: function (data) (alert ("Прибули дані: "+data);))));

Для типів text і xml, надіслані сервером дані будуть доступні так само і в jqXHR, а саме в його полях responseText або responseXML відповідно.

Використовуючи параметр global можна відключати виконання обробників подій (.ajaxSend(), .ajaxError() та інших.) окремих запитів. Це може бути корисним, наприклад, якщо в цих обробниках запускається/зупиняється анімація завантаження. Тоді, якщо деякі запити виконуються дуже часто і швидко, то для них корисно буде відключити виконання обробників. Для кросдоменних script та jsonp запитів параметр global відключається автоматично.

Якщо для здійснення запиту до сервера необхідні дані аутентифікації (логін/пароль), їх можна вказати в налаштуваннях username і password ajax-запиту.

На виконання запиту до сервера відводиться певний час. Якщо протягом цього часу сервер не надсилає відповідь, запит завершується з помилкою (статус "timeout"). Час очікування відповіді від сервера можна змінити, задавши необхідне значення (у мілісекундах) у налаштуванні timeout .

Може так статися, що кодування хоста відрізняється від кодування файлу, що запитується в ajax-запиті javascript. У таких випадках необхідно вказати кодування останнього в налаштуванні scriptCharset.

У більшості випадків ajax-запит відбувається асинхронно, проте в деяких випадках може знадобитися послідовне виконання запиту (коли подальше виконання скрипту неможливе, без отримання відповіді від сервера). Зробити запит синхронним можна, якщо вимкнути налаштування async. Однак варто пам'ятати, що в такому випадку станниця "підвисатиме" при очікуванні відповіді від сервера.

Найпростішим варіантом використання буде виклик $.ajax() без завдання параметрів:

$.ajax(); // на сервер буде надіслано GET-запит на url-адресу поточної сторінки і без зазначення будь-яких параметрів.

Якщо потрібно підвантажити та виконати js-файл, то це можна зробити таким чином:

$.ajax (( type: "GET" , url: "test.js" , dataType: "script" ) ) ;

Зробимо POST-запит на сервер, вказавши при цьому два параметри і сповістимо користувача про успішний запит:

$.ajax (( type: "POST" , url: "some.php" , data: "name=John&location=Boston" , success: function (msg) ( alert ( "Прибуток даних: " + msg ) ; ) ) ) ;

Обновимо вміст потрібної html-сторінки:

$.ajax (( url: "test.html" , cache: false , success: function (html) ( $("#results" ) .append (html) ; ) ) ) ;

Зробимо синхронний запит до сервера. Поки запит буде виконуватися, сторінка не реагуватиме на дії користувача:

// надіслані від сервера дані, запишемо в змінну html var html = $.ajax ((url: "some.php", async: false)). ResponseText;

Як параметр відправимо на сервер xml-об'єкт. Для його коректної передачі необхідно скасувати попереднє перетворення параметрів (processData: false). Як обробник успішного завершення запиту вкажемо користувальницьку функцію handleResponse:

var xmlDocument = [create xml document] ; $.ajax (( url: "page.php" , processData: false , data: xmlDocument, success: handleResponse ) ) ;

Починаючи з jQuery-1.5, з'явилися три нові напрямки, що дозволяють використовувати $.ajax() ще глибше. Перший (Prefilters) дозволяє провести додаткові маніпуляції, безпосередньо перед відправкою запиту. За допомогою другого підходу (Converters) можна вказати jQuery як слід конвертувати отримані від сервера дані, якщо вони не відповідають очікуваному формату. Третій підхід є найбільш низькорівневим, він дозволяє самостійно організувати запит до сервера.

Цей підхід полягає у встановленні обробника, що викликається перед виконанням кожного ajax-запиту. Цей обробник передує виконанню будь-яких інших обробників ajax. Встановлюється за допомогою функції $.ajaxPrefilter() :

$.ajaxPrefilter (function (options, originalOptions, jqXHR) ( ) ) ;

Де
options— налаштування поточного запиту,
originalOptions— налаштування за замовчуванням,
jqXHR- jqXHR-об'єкт цього запиту.

У Prefilters зручно обробляти налаштування користувача (тобто нові, невідомі бібліотеці налаштування, зазначені в запиті). Наприклад, можна ввести власну настройку abortOnRetry , при включенні якої незавершені запити будуть скидатися, якщо на цей-таки url надходить наступний запит:

var currentRequests = (); $.ajaxPrefilter (function (options, originalOptions, jqXHR) ( if (options.abortOnRetry ) ( if (currentRequests[ options.url ] )) ( currentRequests [ options.url ] .abort () ; ) currentRequests [ options.url ] = ;)));

В ajaxPrefilter зручно обробляти і існуючі налаштування. Наприклад, можна змінити крос-доменний запит на перенаправлений через сервер свого домену:

$.ajaxPrefilter (function (options) ( if (options.crossDomain ) ( options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url ) ; options.crossDomain = false ; ) ) );

Крім цього, можна вказувати значення dataType, на яких спрацює prefilter. Так, наприклад, можна вказати типи json та script:

$.ajaxPrefilter ( "json script", function (options, originalOptions, jqXHR) ( // Змінюємо налаштування (options), перевіряємо базові налаштування (originalOptions) та об'єкт jqXHR));

І нарешті, можна змінити значення dataType, повернувши необхідне значення:

$.ajaxPrefilter (function (options) ( // змінимо dataType на script, якщо url відповідає певним умовам if (isActuallyScript(options.url ) ) ( return "script" ; ) ) ) ;

Такий підхід гарантує не тільки те, що запит змінить свій тип на script, але й те, що решта prefilter-обробників із зазначенням цього типу в першому параметрі буде також виконана.

Цей принцип полягає в установці обробника, який спрацює, якщо вказаний в параметрах dataType не збігається з типом даних, надісланих сервером.

Converters є налаштуванням ajax, тому може бути заданий глобально:

// так можна задати обробник, який спрацює, якщо замість // вказаного вами datatype типу mydatatype прийдуть дані типу text $.ajaxSetup (( converters: ( "text mydatatype" : function ( textValue ) ( if (valid( textValue ) ) // обробка переданого тексту return mydatatypeValue; ) else ( // якщо надіслані сервером дані зовсім не відповідають очікуваним, // можна викликати виняток. throw exceptionObject;))))));

Converters допоможе при введенні власного (користувацького) dataType. Важливо відзначити, що в назві такого dataType повинні використовуватися лише малі літери! Запит даних, згаданого вище типу "mydatatype", міг би виглядати так:

$.ajax (url, (dataType: "mydatatype"));

В епоху сучасного вебу більшість сайтів стають все більш інтерактивними. Якщо раніше для отримання оновлених даних нам потрібно було оновити повністю сторінку, то зараз з'явилися технології які дозволяють повністю сторінку не завантажувати, а лише окрему її частину. У свою чергу це надає зручність як користувачам, так і власникам серверів, адже для користувача завантаження сторінки буде швидше, тому що завантажується лише окрема частина сторінки, а серверу не потрібно щоразу генерувати сторінку та віддавати її користувачеві. Ці можливості просто реалізувати за допомогою php та ajax.

Сьогодні ми розберемо невеликий приклад для кращого розуміння концепції AJAX . Іноді новачкам буває важко зрозуміти яким чином взаємодіє між собою php і ajax, багато людей шукають приклади того як валідувати форми на льоту без перезавантаження всієї сторінки. Я вам коротко покажу як це робиться, для того, щоб ви могли зрозуміти основи та принципи, які дозволять вам у майбутньому швидше освоїти інші інструменти та писати свої власні скрипти.

Придумаємо невелике завдання собі, перевірятимемо наявність email адреси в базі даних без перезавантаження сторінки використовуючи php та ajax. Такий приклад добре продемонструє як ми можемо взаємодіяти з сервером без перезавантаження сторінки в браузері, а також, це часто використовується при різноманітних валідаціях форм користувача. У кореневому каталозі створимо 3 файли з іменами index.php, email.php, validate.js.

Створимо просту сторінку з однією формою, яка містить лише одне поле для введення електронної пошти.
Синтаксис файлу index.php

AJAX Tutorial

Найпростіший спосіб працювати з AJAX - це підключити фреймворк jQuery, що власне я зробив. jQuery надає нам простий у розумінні та роботі синтаксис для відправки AJAX запитів, чому б не використовувати цю перевагу?

Синтаксис файлу validate.js

$(document).ready(function()( var email = ""; $("#email").keyup(function()( var value = $(this).val(); $.ajax(( type: "POST", url:"email.php", data:"email="+value, success:function(msg)( if(msg == "valid")( $("#message").html("Цей Email можна використовувати.Цей Email вже зайнятий."); ) ) )); )); $("#submit"). to all email"); )else( $.ajax(( type: "POST", url:"email.php", data:"add_email="+email, success:function(msg)( $("#message") ).html(msg); )));

Цей скрипт отримуватиме POST запит від клієнта, оброблятиме його та повертатиме результат. AJAX зчитує результат та на його основі приймає рішення.
Синтаксис файлу email.php

$connection = mysqli_connect("localhost", "email", "email", "email"); if(isset($_POST["email"]) && $_POST["email"] != "")( $email = $_POST["email"]; $email = mysqli_real_escape_string($connection,$email); if (!filter_var($email, FILTER_VALIDATE_EMAIL))( echo "invalid"; )else( $sql = "SELECT id FROM email WHERE email="$email""; $result = mysqli_query($connection,$sql); if( mysqli_num_rows($result) == 1)( echo "invalid"; )else( echo "valid"; ) ) ) if(isset($_POST["add_email"]) && $_POST["add_email"] != "" )( $email = mysqli_real_escape_string($connection,$_POST["add_email"]); $sql = "INSERT INTO email(email) VALUES("$email")"; if(mysqli_query($connection,$sql))( echo Success"; )else( echo "Error"; ) )

У нашому php скрипті, звичайнісінький код, який обробляє post запит і друкує на сторінці певний текст. В результаті AJAX відправляє запит php скрипту, його скрипт обробляє і видає результат, AJAX зчитує результат і змінює сторінку в реальному часі.

AJAX передає POST запит скрипту за допомогою цієї ділянки коду:

$.ajax(( type:"POST", url:"email.php", data:"email="+value, success:function(msg)( if(msg == "valid")) ( $("#message ").html("Цей Email можна використовувати. "); email = value; )else( $("#message").html("Цей Email вже зайнятий. "); ) ) )));

type - Тип запиту, POST чи GET. У разі POST;
url - адреса скрипта якому надсилають запит;
data - дані, що передаються в запиті;
success - що робити в результаті успішного виконання запиту. У разі викликається функція;

У самому скрипті, перевірка наявності email у базі виконується при кожному введенні символу у полі email. У скрипті за обробку введення відповідає ділянка $("#email").keyup(function()()); , який перевіряє натискання кнопки в полі з id = "email" .
Як бачите, код досить простий і не вимагає особливо великих навичок для розуміння, все зав'язано на обробці подій keyup() – натискання клавіші, click() – клік мишкою по елементу. Далі слідує AJAX запит і відповідь від скрипту. Таким чином, використовуючи php і ajax можна отримати практично безмежні можливості для створення інтерактивних сторінок.
Цей код не претендує на звання високоякісного, але якщо розвинути, додати правильних валідацій на рівні клієнта та сервера, запровадити css, то цілком можна використовувати у своїх проектах.
Якщо у вас виникли запитання, не соромтеся, пишіть коментарі.
Бажаю вам гарного дня та до швидких зустрічей 🙂

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

Для реалізації технології використовується метод $.ajax або jQuery.ajax:

$.ajax(властивості) або $.ajax(url [, властивості])

Другий параметр був доданий до версії 1.5 jQuery.

url - адреса запитуваної сторінки;

properties – властивості запиту.

Повний список параметрів наведено у документації jQuery.

В уроці ми використовуємо декілька параметрів, що найчастіше використовуються.

success (функція) - ця функція викликається після успішного завершення запиту. Функція отримує від 1 до 3 параметрів (залежно від версії бібліотеки). Але перший параметр завжди містить дані, що повертаються з сервера.

data (об'єкт/рядок) - дані користувача, які передаються на запитувану сторінку.

dataType (рядок) - можливі значення: xml, json, script чи html. Опис типу даних, які очікуються у відповіді сервера.

type (рядок) – тип запиту. Можливі значення: GET чи POST. Типово: GET.

url (рядок) – адреса URL для запиту.

Проста передача тексту.

$.ajax(( url: "response.php?action=sample1", success: function(data) ( $(".results").html(data); ) ));

Для відповіді є елемент div.

Чекаємо на відповідь

Сервер просто повертає рядок:

Echo "Приклад 1 – передача завершилася успішно";

Передаємо дані PHP скрипту.

$.ajax(( type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", success: function(data)( $(".results").html() data); )));

Сервер повертає рядок із вставленими до нього переданими даними:

Echo "Приклад 2 - передача завершилася успішно. Параметри: name=". $_POST["name"] . ", nickname=". $_POST["nickname"];

Передача та виконання коду JavaScript

$.ajax(( dataType: "script", url: "response.php?action=sample3", ))

Сервер виконує код:

Echo "$(".results").html("Приклад 3 - Виконання JavaScript");";

Використовуємо XML. Приклад можна використовувати для роботи із зовнішніми XML, наприклад, RSS-фідом.

$.ajax(( dataType: "xml", url: "response.php?action=sample4", success: function(xmldata)( $(".results").html(")); $(xmldata).find ("item").each(function()( $(" ").html($(this).text()).appendTo(".results"); ));

Сервер повинен повертати XML-код:

Header ("Content-Type: application/xml; charset=UTF-8"); echo