Засоби клієнт-серверної взаємодії за допомогою технології AJAX

Міністерство освіти і науки України

Вінницький національний технічний університет

Факультет інформаційних технологій та комп’ютерної інженерії

Кафедра КН

Лабораторна робота №7

з дисципліни «Веб-технології та веб-дизайн»

Виконав: ст. гр. 3КН-20 б. ААааа

Перевірив асистент: аааа

Вінниця, 2018р.

Лабораторна робота №7

Теологія AJAX

Мета роботи: навчитися створювати засоби клієнт-серверної взаємодії за допомогою технології AJAX.

.

Порядок виконання роботи

1. Ознайомитися з теоретичними відомостями.

2. Додати до веб-сайта ajax-запити, що дозволяють надсилати чи завантажувати данні без перезавантаження сторінки.

3. Оформити звіт за результатами виконання роботи та зробити висновки.

Хід роботи

1. AJAX (Asynchronous JavaScript And XML) — підхід до побудови користувацьких інтерфейсів веб-застосунків, за яких веб-сторінка, не перезавантажуючись, у фоновому режимі надсилає запити на сервер і сама звідти довантажує потрібні користувачу дані. AJAX — один з компонентів концепції DHTML.

За допомогою AJAX можна виконувати як POST так і GET запити.

Для того, щоб виконати AJAX-запит у мові JavaScript необхідно створити об’єкт за допомогою конструктора XMLHttpRequest. Об’єкту вказується URL-адреса і тип запиту за допомогою функції open(), а також обробник події зміни стану об’єкта onreadystatechange. Повністю сконфігурований XMLHttpRequest об’єкт відправляє запит на сервер за допомогою функції send() у яку, за необхідності, можна передати данні для відправки на сервер.

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

Приклад AJAX-запиту:

//створюємо запит до сервера

var xhr = new XMLHttpRequest();

//обробник події успішного створення запису на сервері

xhr.onreadystatechange = function () {

//виконувати подальші дії тільки якщо сервер успішно обробив запит

if (xhr.readyState < 4)

return;

if (xhr.status !== 200)

return;

reloadMessagesList();

};

//ініціалізація та надсилання запиту

xhr.open("POST", "@this.Url.Action("CreateWithText")");

xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

var dataObject = {

"messageText": newMessageText

};

xhr.send(JSON.stringify(dataObject));

За допомогою бібліотек jQuery та MicrosoftAjax можна суттєво зменшити об’єм коду, необхідного для виконання запиту і отримати підтримку застарілих браузерів.

2.Створимо веб сайт з Ajax запитами

А)Використовуючи матеріал з лабораторної створимо Ajax запит

Вміст JavaScript

function getWeather(city){

if (city) {

var xhr=new XMLHttpRequest();

xhr.onreadystatechange=function(){

if (this.status==200 && this.readyState==4) {

var formattedData=formatWeather(JSON.parse(xhr.responseText));

document.getElementById("weather-data").innerHTML=formattedData;

document.getElementById('cityname').value="";

}

};

xhr.open("GET","http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&appid=114296bf2db399da3fc4e051bcbc18c0");