[Грає музика] ДАГ Lloyd: Так що ще роду поняття, що роду потрапляє під парасолькою JavaScript є те, що називається AJAX. До цього моменту, наші взаємодія з JavaScript була обмежена натиснути Кнопка і щось відбувається. І конкретно, те, що відбувається наші сайти виглядати і відчувати себе зміни. Вірно? Як і зокрема, в об'єктна модель документа відео, Я змінив колір фону. Але коли я це зробив, у мене не було робити якісь спеціальні додаткові запити. У мене не було просити, щоб сервер відправити мені нову сторінку. Я тільки що змінив те, що я вже. У мене не було, щоб перезавантажити моїй сторінці, і речі виразно змінилося, так що це здорово. Але є, безумовно, деякі участь керівництво взаємодія з користувачем. AJAX є прохолодний метод, який дозволяє нам оновити контенті сторінки, і не тільки погляд і відчуваю, без перезавантаження. 

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

Тепер, ніби небагато більш просунута техніка що ми збираємося говорити про в цьому відео. Ми збираємося, щоб мати деякий взаємодія. Але коли ми робимо, я буду робити запити до веб-сервера. У цьому випадку, тільки що працює мій веб-сервер Apache. Я збираюся робити додаткові запити, поки я відвідування веб-сторінки, але моя сторінка не оновлюється. 

Це просто буде асинхронно оновити сторінку. І це, насправді, які AJAX розшифровується, є асинхронний JavaScript і XML-. XML є інший вид розмітки мову, і ви можете сортувати думати про нього, як і HTML. Це не зовсім те ж саме, але це в основному просто мова розмітки. Так що це асинхронний JavaScript і мова розмітки. 

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

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

Потім запит повністю завантажені на вашій сторінці. Це різні держави. І тому ми повинні встановити наші Об'єкт XMLHttpRequest новий змінюватися, коли зміни в стан готовності. І, як правило, ми робимо це, визначення анонімну функцію, яка ми знайомі з від JavaScript тепер, що викликається при зміні стан готовності. Це дійсно не набагато більше, ніж це. Ми тільки збираємося бути, що визначають анонімна функція, ніби як, що ми робили в JavaScript, де ми б є анонімну функцію Відповідь на на клік, або коли ми робили карту різні об'єкти в масиві. 

Щось сталося, коли то була натиснута. У цьому випадку, це просто щось відбувається, коли стан нашої сторінці зміни. Є дві властивості які начебто of-- вони не тільки властивості, які притаманні XMLHttpRequest, але вони досить важливі. Там щось називається readyState, який, як ви можете здогадатися, це пов'язано з onreadystatechange. Це насправді говорить вам, що readyState є. 0, 1, 2, 3, і 4 можливості там, і вони начебто приблизно відповідають тому, що Я просто кажу про секунду тому. 

І тоді статус, який Сподіваюся, якщо все пройшло нормально, 200, який є скороченням для, звичайно, добре, який ми знайомі з HTTP. Таким чином, ми сподіваємося, що наш готовий стан чотири, і наш статус 200. І якщо наш готовності чотири, і відповідь готовий поставити на сторінки і статус 200, ми були в змозі зробити всі успішно, Тепер ми можемо асинхронно оновити нашу сторінку без перезавантаження Весь зміст нього. 

Після того як ми визначили, що відбувається до поведінки onreadystatechange, і ми перевірили, що readyState 4, а статус 200, то все, що ми повинні зробити, це відкрити асинхронний Запит, який просто робить HTTP-GET запит цілому. Просто робити це програмно, а не через наш веб-браузері. А потім ми відправляємо це прохання. Так що, може бути, робить це виглядати в контексті? Так от, що функція угод з AJAX запитів. ДОБРЕ? І я сказав довільно він приймає аргумент. І це свого роду Взагалі скелет тут. На самому початку, ми отримуємо самі новий об'єкт XMLHttpRequest. Тоді, мені потрібно, щоб встановити onreadystatechange поведінку. І тому я хочу сказати, при зміні readyState, Я хочу, щоб ви викликати цю функцію. 

Якою буде запитати Питання, якщо readyState 4, якщо readyState змінилося щоб бути 4, і стан був 200, таким чином, ми мали успішний запит, я хочу зробити щось на цю сторінку. І ми будемо дивитися на приклад того, що що щось може бути в секунду. Отже, тепер я визначив мій анонімна функція, моя функція відповіді, коли в readyState зміни. 

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

І ми будемо повернутися до цього в одну секунду. Але я думаю, що зараз ми повинні прийняти шукати за фактичною вихідного коду. І так, я збираюся відкрити home.html. І ми побачимо, що відбувається. Так до на самому верху тут, у мене є деякі речі, які JavaScript відбувається. 

І ось, я, очевидно, мають DIV з ідентифікатором є infodiv, і деяка інформація збирається туди поїхати. А то у мене цю форму. А всередині цього форма, я щось Виберіть називається, що це просто меню, що випадає з купою різних варіантів. І, мабуть, коли, що зміни, коли варіант, який був обраний має змінилося, я буду називати деяка функція cs50Info, і тоді я буду перейти в this.value, де це відноситься до який варіант обраний, і значення є одним з них тут, варіант значення = одно порожньо, "Блумберг", "Боудена", "чан" і "Malan." 

Так що може насправді сталося тут, коли я це зробити? Ну, давайте подивитися на blumberg.html. Схоже, що це просто фрагмент якийсь HTML. І справді, що я сподіваюся, відбудеться тут є Я збираюся бути в змозі включити Цей HTML-безпосередньо в моїй веб-сторінці без перезавантаження сторінка, так що, коли Я вибираю Ханна зі списку Меню, інформація про Ханне, Зокрема, це інформація тут, в blumberg.html, це те, що показує на сторінці. І я не повинен оновити. І якщо я вибрав когось іншого, їхня інформація буде відображатися. Як мені це зробити? Знову ж таки, це вимагає нам використовувати деякі AJAX. І так, ми відкриємо ajax.js. А от у тому, що функція, cs50Info. Якщо ім'я нічого, я повернуся. Я не збираюся робити що-небудь, якщо порожня опція була вибрана. В іншому випадку, я збираюся створити новий XMLHttpRequest. А потім я збираюся сказати, коли readyState зміни, викликати цю функцію. 

І якщо це readyState 4 і статус 200, ось трохи з JQuery в рядку 13. Але все, що я роблю говорить, змінити вміст infodiv щоб бути все, що я повернувся, як Відповідь від мого HTTPRequest. 

Яка моя HttpRequest? Ну, це вірно тут, на лінії 18 і 19. Рядок 18, я в основному готується GET запит імені + .html. І знову, ім'я тут аргумент, що було передається як параметр cs50Info. 

Так в основному, я передаю в чиїхось ім'я, яке було, що набір опцій що ми бачили в у спадному меню у формі. Я отримую це ім'я. І я кажу, що хочу, щоб ви будь ласка, отримати для мене, що file.html, а потім відправити це прохання. 

І так, що onreadystatechange збирається бути слухати і чекати і чекати і не чекати, поки readyState 4, і стан 200. Так що це можна подавати на стіл, і запит був успішним. І потім, якщо вона є, вона збирається змінити вміст infodiv бути текстовий відповідь, що я повернувся. 

Отже, давайте подивимося, як це може насправді працювати. Таким чином, ми над головою браузері вікна, і ми будемо дивитися тут. Отже, давайте поглянемо на що відбувається тут, в AJAX. Таким чином, ми будемо вибирати когось спадному меню. Таким чином, в цьому випадку, давайте просто вибрати Ханна. І зауважте, що Ханна інформація змінилася, але в мене не було мого any-- сторінка не зробив повністю перезавантажити. Матеріал залишився. Більша частина матеріалу залишилася. AJAX випробувань не зміниться. Сама кнопка, це у спадному меню не змінюється. Але є інформація зробив зміни. І залежно від того, як швидко мій комп'ютер переміщується, ви насправді можете побачити, що зміст зникає, а потім з'являється дійсно швидко. Це зміст є видалений з infodiv, і потім замінений на Новий асинхронний запит. 

Так що, якщо я переключити його буде сказати, Rob-- і знову, погляньте, і, можливо, ми побачимо його насправді зникати і з'являтися швидко. Ви бачите, що? Як це просто вискочив геть, а потім наповнив? Ось запит AJAX роду походить. І так в залежності від людина я вибираю, я що робить інший асинхронний Запит в інший файл що у мене є на моєму сервері. І зміст мого infodiv оновленні, на підставі яких з них я вибрав. Так що насправді все, що потрібно AJAX. Це дозволяє нам, щоб зробити ці асинхронний запити, оновлення сторінки. Без того, щоб оновити всю сторінку, ми збираємося, щоб отримати новий Зміст з нього шляхом новий свіжий запит до сервера. І так, наші сторінки може стати трохи більш динамічним. 

І, як ми отримаємо більш і більш просунуті, вам може отримати такі речі, як скажімо, вашу поштову скриньку, де ви не повинні нічого робити. Ви не повинні натиснути у спадному меню або натисніть нічого, і раптом, ваш новітній E-mail з'являється у верхній частині. Це також просто прохання Аякс. Аякс просить ваш Сервер, сервер електронної пошти, відправити всієї інформації про ваших останніх листів, і змінити те, що ви бачите на Екран буде ваш новітній набір електронних листів. І якщо у вас є новий в є, то зміст цього DIV зміни будуть відображатися оновлений контент. Я Дуг Ллойд. Це CS50.