AJAX или Ajax - это асинхронный JavaScript и XML. Он используется для обмена данными с сервером и обновления части веб-страницы без перезагрузки всей веб-страницы на стороне клиента. Отображение и поведение существующей веб-страницы не нарушается при обмене и обновлении данных. Ajax также считается группой технологий, которые включают HTML, CSS, DOM и JavaScript, которые используются для разметки, стиля и позволяют пользователю взаимодействовать с информацией на веб-странице. В этой статье вы узнаете, как пошагово написать простую программу на Ajax, используя Notepad ++. Требуются некоторые базовые знания HTML, DOM, JavaScript и локального веб-сервера или удаленного веб-сервера. WampServer используется в этой статье для тестирования.
Шаги
Метод 1 из 2: кодирование
Шаг 1. Подготовьте картинку для написания Ajax-программы
Сохраните изображение в той же папке, где вы сохраните свои html и текстовые файлы, отображающие программу Ajax. В этой статье каталог «ProgramInAjax» создается внутри папки «wamp» в каталоге «www», в который вы установили WampServer.
Шаг 2. Откройте любой текстовый редактор
В этой статье в качестве текстового редактора используется Notepad ++.
Шаг 3. Создайте новый файл в текстовом редакторе
Введите следующее:
Ой ой! Куда пропал желтый цветок?
Вы можете ввести все, что хотите, внутри тега html здесь.
Шаг 4. Сохраните файл как текстовый документ с именем «ajax-data.txt
” Фактически, вы можете назвать файл как хотите, но убедитесь, что вы ввели то же имя файла в кодировку в этой строке:
xmlhttp.open ("ПОЛУЧИТЬ", "ajax-data.txt", true);
Однако для заголовка используется тег HTML, поэтому он выглядит больше и невидим.
Шаг 5. Создайте новый файл для веб-страницы
Этот файл предназначен для HTML-файла, позволяющего просматривать программу Ajax в веб-браузере.
Шаг 6. Скопируйте следующий код:
Моя первая программа Ajax от меня Поместите код Ajax ниже.Нажмите кнопку ниже, чтобы цветок исчез
Шаг 7. Сохраните файл
Нажмите кнопку сохранения в строке меню. Открыто окно «Сохранить как». Введите имя для вашего документа. В этой статье файл называется index.
Шаг 8. Щелкните стрелку раскрывающегося списка, чтобы выбрать расширение файла
В поле «Тип файла» щелкните стрелку раскрывающегося списка, чтобы выбрать расширение файла.
Шаг 9. Выберите «Файл языка гипертекстовой разметки»
” Убедитесь, что в скобках указано «html». После выбора «HTML» нажмите «Сохранить».
Шаг 10. Протестируйте HTML-файл в веб-браузере
Откройте веб-страницу в веб-браузере. Перейдите к «Выполнить» в верхней строке меню. Щелкните его и выберите «Запустить в Chrome» или в любом браузере, установленном в вашей системе. В этой статье для тестирования используется Google Chrome. В Notepad ++ могут быть установлены другие браузеры. Вы можете выбрать свой любимый браузер. Другой вариант, вы можете щелкнуть значок WampServer на панели задач внизу экрана и выбрать «Localhost». Вы должны увидеть там свой каталог и щелкнуть индексный файл.
Шаг 11. Нажмите кнопку под изображением, чтобы протестировать скрипт
Шаг 12. Ваша последняя веб-страница
Ваша веб-страница должна быть обновлена информацией, которую вы ввели в текстовый файл в начале. Цветок и заголовок следует заменить новым заголовком под названием «Oh oh! Куда делся желтый цветок? »
Метод 2 из 2: Пояснение кода
Шаг 1. Корпусная секция
В теле HTML есть раздел «div» и одна кнопка. Этот раздел будет использоваться для отображения информации, возвращаемой сервером. Кнопка вызывает функцию с именем «loadXMLDoc ()», если по ней щелкнуть.
Моя первая программа Ajax от меня Здесь показано изображение для тестирования программы Ajax.Нажмите кнопку ниже, чтобы цветок исчез
Кнопка идет сюда
Шаг 2. Головной раздел
В разделе заголовка HTML-файла есть тег скрипта, который содержит функцию loadXMLDoc ().
Моя первая программа Ajax от меня Поместите код Ajax ниже.
Шаг 3. Дополнительные пояснения
Самым важным в Ajax является объект XMLHttpRequest. Он используется для обмена данными с сервером, и все современные браузеры поддерживают этот объект.
- Синтаксис для создания объекта XMLHttpRequest (): variable = new XMLHttpRequest (); но в то же время синтаксис для создания старых версий Internet Explorer (IE5 и IE6), использующих объект ActiveX, следующий: variable = new ActiveXObject ("Microsoft. XMLHTTP");.
- Чтобы обрабатывать все современные браузеры, необходимо проверить, поддерживают ли браузеры объект XMLHttpRequest. Если это так, он создает объект XMLHttpRequest. В противном случае для него будет создан объект ActiveX.
- Затем он отправит запрос на сервер. Будет использоваться метод объекта XMLHttpRequest под названием «open ()» и «send ()». xmlhttp.open («ПОЛУЧИТЬ», «ajax_info.txt», true); xmlhttp.send ();.
подсказки
- Другой вариант для предварительного просмотра результата: вы можете открыть свой любимый браузер и набрать «localhost / ProgramInAjax» в строке веб-адреса, чтобы отобразить веб-страницу. Вы сможете увидеть эту веб-страницу, если назовете свой HTML-файл «index.html».
- Чаще сохраняйте свой html-файл во время работы. Одновременное нажатие клавиш Ctrl и S для пользователей Windows сэкономит больше времени.
- Обязательно добавьте сохраненный HTML-файл в то же место, где находятся ваше изображение и текстовый файл данных.
- Когда вы называете файл, это чувствительно к регистру, когда вы добавляете эти имена в код. Например, «myImage» отличается от «MyImage» или «myimage».
