[Грає музика]
>> ДАГ 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.