Введение в Ajax

Содержание
  1. Предисловие Это первое руководство из серии руководств по Ajax, в которых рассматривается введение в Ajax. Учебное пособие поможет вам начать работу с Ajax. Что такое Ajax Ajax — это набор из нескольких технологий, направленных на улучшение взаимодействия с пользователем по сравнению с традиционным Интернетом. Приложения. Сквозная реализация Ajax включает HTML, CSS, DOM, JavaScript, серверный язык и XMLHttpRequest, который также называется XHR. В традиционных веб-приложениях браузер отправляет запрос на сервер. , серверные процессы отправляют некоторые данные обратно в браузер, а затем они обрабатываются браузером. Но пока что сервер обрабатывает, пользователь должен ждать. Само собой разумеется, что это не дает пользователю хорошего опыта. Ajax помогает избавиться от этой проблемы. Это делает взаимодействие пользователя с приложением асинхронным. Пользовательский интерфейс и взаимодействие с сервером идут рука об руку, и, не дожидаясь, пока сервер придет с обработанными данными или без перезагрузки веб-страницы, пользовательский интерфейс реагирует на действия пользователя; значительно улучшает взаимодействие с пользователем. Ajax означает асинхронный JavaScript и XML. Хотя часто JSON также используется при работе с Ajax. Через мгновение мы увидим живую демонстрацию, чтобы вы почувствовали, как работает Ajax. Живая демонстрация В этой живой демонстрации у нас есть поле ввода текста, в которое вы можете ввести любое из слов PHP, MySQL, SQL, PostgreSQL, HTML, CSS, HTML5, CSS3, JSON. . Как только вы начнете вводить текст, вас будет направлять поле ввода. Закончив ввод, нажмите клавишу ВВОД и выберите вкладку, вы можете увидеть связанный текст, отображаемый ниже. Этот текст хранится в файле PHP. И все это происходит без перезагрузки страницы. HTML и JavaScript-код живой демонстрации Демонстрация введения в Ajax от w3resource

    var subject = ['PHP', MySQL, SQL, PostgreSQL, HTML, CSS, HTML5, CSS3, JSON]; $ ('# search'). typeahead ({source: themes}) function select_topic () {var search_term = document. getElementById ("поиск"). значение; var xhr; if (window.XMLHttpRequest) {//Mozilla, Safari, ... xhr = new XMLHttpRequest ();} else if (window.ActiveXObject) {//IE 8 и старше xhr = new ActiveXObject ("Microsoft.XMLHTTP"); } var data = "search_string =" + search_term; xhr.open ("POST", "вводный-demo.php", true); xhr.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); xhr.send (данные); xhr.onreadystatechange = return_data; функция return_data () {if (xhr.readyState === 4) {if (xhr.status === 200) {//alert(xhr.responseText); document.getElementById («найдено»). innerHTML = xhr.responseText; } else {alert ('Проблема с запросом.'); }}}}

    PHP-код живой демонстрации

        php $ search_value = $ _POST ['search_string']; $ languages ​​= array ("PHP" => "PHP, аббревиатура от Hypertext Preprocessor, является широко используемым языком сценариев общего назначения с открытым исходным кодом.", "MySQL" =  > «MySQL - это система управления реляционными базами данных с открытым исходным кодом, разработанная Майклом Видениусом и Дэвидом Аксмарком в 1994 году», «SQL» => «SQL означает язык структурированных запросов. Он используется для управления данными в системе управления реляционными базами данных, которая хранит данные в  форма таблиц и взаимосвязь между данными также хранятся в виде таблиц. "," PostgreSQL "=>" PostgreSQL считается наиболее продвинутым решением для баз данных с открытым исходным кодом. PostgreSQL - это система управления объектно-реляционными базами данных (ORDBMS)  . "," HTML "=>" HTML, расшифровывается как Hyper Text Markup Language, используется для создания веб-страниц, а также других типов документов, доступных для просмотра в веб-браузере. "," HTML5 "=>" HTML5 - пятая редакция  HTML  , язык разметки для представления и структурирования веб-документа. "," CSS "=>" CSS, расшифровывается как Cascading Style Sheet - это компьютерный язык для описания представления (например, ширины, высоты, цвета, цвета фона, выравнивания и т. д.)  Веб-документы HTML и XML (и языки на основе XML, такие как XHTML, SVG). "," CSS3 "=>" Третья версия CSS.  Представлено множество новых концепций и команд, которые улучшили ландшафт веб-дизайна. "," JSON "=>" JSON - это легкий текстовый открытый стандартный формат обмена данными. ",); If (array_key_exists ($ search_value, $ languages))  {$ found = $ languages ​​[$ search_value]; echo $ found;}?>
    Как работает Ajax
    
    
    Надеюсь, следующее слайд-шоу поможет  чтобы лучше понять работу Ajax.
    
    
    Первый шаг:
    
    
    Данные собираются и создается объект XMLhttpRequest.
    
    
    
    
    
    Второй шаг:
    
    
    Как  данные отправляются в файл на стороне сервера для обработки.
    
    
    
    
    
    Третий шаг:
    
    
    Данные получены с сервера.
    
    
    
    Немного истории
    
    
    В 1996 году Microsoft представила тег iframe в Internet Explorer для асинхронной загрузки контента.
    
    
    В 1998 году команда Microsoft Outlook Web Access применила XMLHTTP с помощью клиентского сценария.
    
    
    В 1999 году,  страница Internet Explorer по умолчанию, то есть http://home.microsoft.com, была запущена для обновления для загрузки новостей и материалов, цитируемых Microsoft асинхронно.
    
    
    В 1999 году Microsoft снова создала XMLHTTP ActiveX.  в Internet Explorer 5. Другие браузеры, такие как Mozilla, Safari и Opera, адаптировали технологию для создания объекта JavaScript XMLHttpRequest.
    
    
    Снова в 1999 году Microsoft создала элемент управления ActiveX XMLHTTP в Internet Explorer 5. Другие браузеры, такие как Mozilla  , Safari и Opera приняли технологию для создания объекта JavaScript XMLHttpRequest.
    
    
    При обновлении Internet Explorer  d до версии 7 Microsoft приняла собственную версию XMLHttpRequest, сохранив унаследованную поддержку версии ActiveX.
    
    
    Основываясь на технологиях, используемых Google Pages, Джесси Джеймс Гарретт написал статью под названием «Ajax:  Новый подход к веб-приложениям »18 февраля 2005 г. Здесь впервые используется термин« Ajax ».
    
    
    Консорциум World Wide Web (W3C) выпустил первый проект XMLHttpRequest 5 апреля 2006 г.
    
    
    17 января 2012 года W3C создал рабочий проект XMLHttpRequest Level 2, который обещает преодолеть многие ограничения первого черновика.
    Что вы узнаете из  эта серия руководств
    
    
    Введение в Ajax с живой демонстрацией.
    
    
    Как использовать Ajax вместе с PHP.
    
    
    Как использовать  используйте Ajax вместе с PHP для извлечения данных из MySQL.
    
    
    Как использовать Ajax с Jquery.
    
    
    Как работать с Ajax и XML.
    
    
    Как работать с Ajax и JSON.
    
    
    Подробная информация о спецификации XMLHttpRequest.
    
    
    Подробная информация об уровне XMLHttpRequest.  2.
    
    
    Как использовать XMLHttpRequest уровня 2 для преодоления недостатков уровня 1.
    
    
    
  2. Что такое Ajax
  3. Живая демонстрация
  4. HTML и JavaScript-код живой демонстрации
  5. Как работает Ajax
  6. Немного истории
  7. Что вы узнаете из эта серия руководств

Предисловие

Это первое руководство из серии руководств по Ajax, в которых рассматривается введение в Ajax. Учебное пособие поможет вам начать работу с Ajax.

Что такое Ajax

Ajax — это набор из нескольких технологий, направленных на улучшение взаимодействия с пользователем по сравнению с традиционным Интернетом. Приложения. Сквозная реализация Ajax включает HTML, CSS, DOM, JavaScript, серверный язык и XMLHttpRequest, который также называется XHR.

В традиционных веб-приложениях браузер отправляет запрос на сервер. , серверные процессы отправляют некоторые данные обратно в браузер, а затем они обрабатываются браузером. Но пока что сервер обрабатывает, пользователь должен ждать. Само собой разумеется, что это не дает пользователю хорошего опыта. Ajax помогает избавиться от этой проблемы. Это делает взаимодействие пользователя с приложением асинхронным. Пользовательский интерфейс и взаимодействие с сервером идут рука об руку, и, не дожидаясь, пока сервер придет с обработанными данными или без перезагрузки веб-страницы, пользовательский интерфейс реагирует на действия пользователя; значительно улучшает взаимодействие с пользователем.

Ajax означает асинхронный JavaScript и XML. Хотя часто JSON также используется при работе с Ajax.

Через мгновение мы увидим живую демонстрацию, чтобы вы почувствовали, как работает Ajax.

Живая демонстрация

В этой живой демонстрации у нас есть поле ввода текста, в которое вы можете ввести любое из слов PHP, MySQL, SQL, PostgreSQL, HTML, CSS, HTML5, CSS3, JSON. . Как только вы начнете вводить текст, вас будет направлять поле ввода. Закончив ввод, нажмите клавишу ВВОД и выберите вкладку, вы можете увидеть связанный текст, отображаемый ниже. Этот текст хранится в файле PHP. И все это происходит без перезагрузки страницы.

HTML и JavaScript-код живой демонстрации

       Демонстрация введения в Ajax от w3resource     

var subject = ['PHP', MySQL, SQL, PostgreSQL, HTML, CSS, HTML5, CSS3, JSON]; $ ('# search'). typeahead ({source: themes}) function select_topic () {var search_term = document. getElementById ("поиск"). значение; var xhr; if (window.XMLHttpRequest) {//Mozilla, Safari, ... xhr = new XMLHttpRequest ();} else if (window.ActiveXObject) {//IE 8 и старше xhr = new ActiveXObject ("Microsoft.XMLHTTP"); } var data = "search_string =" + search_term; xhr.open ("POST", "вводный-demo.php", true); xhr.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); xhr.send (данные); xhr.onreadystatechange = return_data; функция return_data () {if (xhr.readyState === 4) {if (xhr.status === 200) {//alert(xhr.responseText); document.getElementById («найдено»). innerHTML = xhr.responseText; } else {alert ('Проблема с запросом.'); }}}}

PHP-код живой демонстрации

    php $ search_value = $ _POST ['search_string']; $ languages ​​= array ("PHP" => "PHP, аббревиатура от Hypertext Preprocessor, является широко используемым языком сценариев общего назначения с открытым исходным кодом.", "MySQL" =  > «MySQL - это система управления реляционными базами данных с открытым исходным кодом, разработанная Майклом Видениусом и Дэвидом Аксмарком в 1994 году», «SQL» => «SQL означает язык структурированных запросов. Он используется для управления данными в системе управления реляционными базами данных, которая хранит данные в  форма таблиц и взаимосвязь между данными также хранятся в виде таблиц. "," PostgreSQL "=>" PostgreSQL считается наиболее продвинутым решением для баз данных с открытым исходным кодом. PostgreSQL - это система управления объектно-реляционными базами данных (ORDBMS)  . "," HTML "=>" HTML, расшифровывается как Hyper Text Markup Language, используется для создания веб-страниц, а также других типов документов, доступных для просмотра в веб-браузере. "," HTML5 "=>" HTML5 - пятая редакция  HTML  , язык разметки для представления и структурирования веб-документа. "," CSS "=>" CSS, расшифровывается как Cascading Style Sheet - это компьютерный язык для описания представления (например, ширины, высоты, цвета, цвета фона, выравнивания и т. д.)  Веб-документы HTML и XML (и языки на основе XML, такие как XHTML, SVG). "," CSS3 "=>" Третья версия CSS.  Представлено множество новых концепций и команд, которые улучшили ландшафт веб-дизайна. "," JSON "=>" JSON - это легкий текстовый открытый стандартный формат обмена данными. ",); If (array_key_exists ($ search_value, $ languages))  {$ found = $ languages ​​[$ search_value]; echo $ found;}?>  

Как работает Ajax

Надеюсь, следующее слайд-шоу поможет чтобы лучше понять работу Ajax.

Первый шаг:

Данные собираются и создается объект XMLhttpRequest.

Второй шаг:

Как данные отправляются в файл на стороне сервера для обработки.

Третий шаг:

Данные получены с сервера.

Немного истории

В 1996 году Microsoft представила тег iframe в Internet Explorer для асинхронной загрузки контента.

В 1998 году команда Microsoft Outlook Web Access применила XMLHTTP с помощью клиентского сценария.

В 1999 году, страница Internet Explorer по умолчанию, то есть http://home.microsoft.com, была запущена для обновления для загрузки новостей и материалов, цитируемых Microsoft асинхронно.

В 1999 году Microsoft снова создала XMLHTTP ActiveX. в Internet Explorer 5. Другие браузеры, такие как Mozilla, Safari и Opera, адаптировали технологию для создания объекта JavaScript XMLHttpRequest.

Снова в 1999 году Microsoft создала элемент управления ActiveX XMLHTTP в Internet Explorer 5. Другие браузеры, такие как Mozilla , Safari и Opera приняли технологию для создания объекта JavaScript XMLHttpRequest.

При обновлении Internet Explorer d до версии 7 Microsoft приняла собственную версию XMLHttpRequest, сохранив унаследованную поддержку версии ActiveX.

Основываясь на технологиях, используемых Google Pages, Джесси Джеймс Гарретт написал статью под названием «Ajax: Новый подход к веб-приложениям »18 февраля 2005 г. Здесь впервые используется термин« Ajax ».

Консорциум World Wide Web (W3C) выпустил первый проект XMLHttpRequest 5 апреля 2006 г.

17 января 2012 года W3C создал рабочий проект XMLHttpRequest Level 2, который обещает преодолеть многие ограничения первого черновика.

Что вы узнаете из эта серия руководств

Введение в Ajax с живой демонстрацией.

Как использовать Ajax вместе с PHP.

Как использовать используйте Ajax вместе с PHP для извлечения данных из MySQL.

Как использовать Ajax с Jquery.

Как работать с Ajax и XML.

Как работать с Ajax и JSON.

Подробная информация о спецификации XMLHttpRequest.

Подробная информация об уровне XMLHttpRequest. 2.

Как использовать XMLHttpRequest уровня 2 для преодоления недостатков уровня 1.

Оцените статью
nanomode.ru
Добавить комментарий