[Играет музыка] ДАГ 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.