Ajax Success: описание, функции, инструкции для работы
Опубликованно 15.01.2019 07:25
Ajax Success-это средство загрузки данных с сервера в веб-браузере без перезагрузки всей страницы. В своей работе объект XMLHttpRequest на основе JavaScript для получения и отправки информации на сервер используется асинхронно в фоновом режиме без вмешательства пользователя. Метод был настолько популярен, что вряд ли еще есть приложение, которое использует Ajax. Пример некоторые обширные онлайн-приложений Ajax Success: Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr и другие. Кросс-Браузер Функции
Ajax расшифровывается: А – синхронный, Javascript, A nd X ml. Как следует из названия, процесс использует JavaScript, точнее скрипт под названием jquery.js сказал. jQuery-это JavaScript-библиотека. Файл весит всего 96 КБ, написан на JavaScript и работает с названием jquery.js программирования JavaScript, предоставляя кросс-браузер упрощает возможность выбора и обработки элементов DOM, обработке событий, запрос Ajax Success и анимации.
jQuery является очень популярным. В мае 2015 года файл будет на 64,2% всех сайтов. Среди библиотек и JavaScript-фреймворков долю рынка jQuery 95,2%. Другими словами, большая часть современных разработок в jQuery работает, но не в сыром JavaScript.
Преимущества jQuery : Поддержку кросс-браузер. То есть, и этот же код jQuery работает в разных браузерах: Chrome, Firefox, IE, Safari и Opera. С другой стороны, для обеспечения кросс-браузер поддержка JavaScript в необработанном должны проверьте ваш браузер и введите соответствующие коды, так как разные браузеры (в частности IE) реализации функций различными способами. Выделение и манипуляции с DOM-элементами. «Требование» означает выбор элементов DOM в веб-документе для последующего манипулирования. Сильная функция селектор для выбора элементов на основе HTML-теги заголовок, например, HTML-атрибут ID, #debug, название CSS-класса .ошибка при использовании Ajax Success error. Обработка событий
jQuery упрощает обработку события JavaScript и специальные эффекты и анимации, программирования подходит для show/hide, fade-in/fade-out, slide-in /slide-out и пользовательской анимации. Ajax Success предлагает простой интерфейс, Ajax для асинхронной отправки HTTP GET/POST и обработка ответа.
С помощью jQuery вы можете. пару строк кода для замены десятка кодов и выполнение JavaScript на всех браузерах без необходимости для отдельный тест на каждый из них Кросс-браузер особенно важно для производства, так как пользователь не проверить свой код JavaScript во всех браузерах. Jquery Ajax Success используют более 60% всех сайтов в Интернете.
Для работы с процессом предполагается, что базовые знания в работе с HTML5, CSS3 и JavaScript создание необходимых условий для перехода на jQuery. Использование jQuery
JQuery имеет две версии. Вторая версия не поддерживается IE<9. Потому что все еще есть довольно много старых IE (v7, v8), первая версия гораздо более популярным в производственных системах.
Установка и Настройка: Скачать библиотеку jQuery с сайта. Скопируйте файл JavaScript (например, jquery-1.xx.x.min.js) в корневой каталог документа, как правило, под папки «js». «min.js» это мини - версия разработана для продукции, которая удаляет лишние пробелы и комментарии, чтобы уменьшить размер файла для быстрой загрузки. Тестирование и использование кодов «.js» версии. Включить в HTML-документ. В HTML4/XHTML1.0 включите в начальный тег, атрибут type = "text/javascript".
Использовать в качестве альтернативы jquery.js сервер, пользователь может использовать CDN (content Distribution Network) для обслуживания. Это экономит часть сетевого трафика и, вероятно, более быстрый ответ. Кроме того jquery.js кэшироваться магазине будет для повторного использования: CDN jQuery.com; Google CDN; Microsoft CDN.
Некоторые пользователи к этому тяготеют, JavaScripts непосредственно перед концом body ( ) вместо раздела для лучшей скорости, скачать CSS, JavaScripts, так как он часто применяется на CSS. Селекторы сценария и операций
Селектора Jquery Ajax Success - основная функция jQuery имеет специальный синтаксис $(). Это имя тега, атрибута id (с префиксом #) или имя класса (с префиксом точка). На самом деле он поддерживает все CSS-селекторов.
По сравнению с функциями селектора в JavaScript, JQuery очень просто и класс для себя. Он добавляет обработчик событий, который срабатывает, когда DOM-дерево построено. События « » события отличается от JavaScript « », которые не на загрузку внешних ссылок, такие как изображения. Эти коды указывается в разделе, прежде чем они будут созданы элементы, на которые. Это обычная практика jQuery:
$(document).ready(handler)Ready OnLoad Ready()
Пример - jQuery-селектора и операции.
Запрос в JQuery относится к выбору элементов в HTML - документ для последующих манипуляций.
Например: $(document) выбирает текущий документ. $("p") выбирает все. Элементы (Tag Selector). $(#hello)и $(#message) выбирает элемент с атрибутом id="hello"(ID-селектор). $(.красный)выбирает все элементы с атрибутом class="red"(Class Selector).
На самом деле $ () - это аббревиатура (псевдоним) для основной jQuery () функция. Методы, чтобы содержимое элемента
Пользователь может вернуть цепочки функций для «Line» и «To», так как большинство функций, элемент, находящийся в работе. Во многих методов, таких как html() в jQuery используется и метод те же имена, что геттер и сеттер, дифференцировать его аргумент. Например, html() без аргумента innerHTML дает.
Документ готов, как правило, в jQuery, который предоставляет краткую запись, записать в виде $(function() {...}).
Виды менеджмента-содержимое выбранного элемента: html()- получить innerHTML; html(value)- установить innerHTML; append(value)- добавить в конце innerHTML; prepend(value)- добавить перед innerHTML; before(элемент)- добавить элемент перед текущим элементом; after(элемент)- добавить элемент после текущего элемента; addClass(value), removeClass(value), Toggle Class(value)- добавить, удалить или изменить значение класса-атрибута.
JQuery создает автоматическая циклическая функция «Line?» и «кому?», Пример: $('p') выбирает все элементы. $('p').append(...) применяется append(...) петли каждого из выбранных элементов в явных.
Пользователь может через явную петлю .each(function() {...}) (Line? To?), если ему придется применить несколько операций на выбранные элементы. Внутри .each - $(this) обозначает элемент в работе. Пример обработки событий
В этом примере показано, как запрограммировать обработчик событий для действий пользователя. Большинство jQuery коды на самом деле имеют дело с обработчиками событий для группы выбранных элементов.
Пример селектора jQuery и встроенные функции.
Порядок действий: Выбрать оригинальные элементы через соответствующие jQuery-селектора. Определите событие, например, щелчок ключа. Написать процедуру обработки события, и добавить их в источнике. Вы можете подключить методы обработчика событий в JavaScript, например, click, mouseover и submit, на выбранный элемент с помощью JQuery. Можно допустить, что по умолчанию обработчик начать снова .click(handler).mouseover(handler).submit обработчика false.
Внутри функции $(this) ссылается на текущий объект. Хотя $(p) дает несколько элементов (в массиве), вы можете использовать тот же синтаксис для привязки обработчика событий к КАЖДОМУ элементу.
Ранее обработчик события JavaScript в HTML-теги. Практика в настоящее время состоит в том, чтобы выйти за пределы HTML-теги и группировать их в разделе для лучшей MVC-дизайн. Код AJAX-запроса и ответа
Продолжение процесса:
Чтобы проверить, Success function data Ajax, запустите скрипт под веб-сервере, например Apache :
$(:submit) селектор selects all $(:текст[name="message"]) select
Вы Можете $.ajax() для отправки запроса Ajax: ajax()принимает в качестве аргумента массив (пары "ключ-значение"); type определяет метод Query, например, get или post, Ajax post Success; url-адреса действия, по умолчанию текущий документ; Data предоставляет строку запроса в качестве ассоциативного массива; .done() возвращает, когда будет получен ответ с кодом состояния 200 (OK). В качестве аргумента функция требует с сообщением HTTP ответа; .fail() возвращает, когда будет получен ответ с кодом состояния NO 200 (OK); .always() отправляет обратно после .done .fail прекращено. В качестве аргумента он принимает функция no-arg. Основы JavaScript расширения
jQuery-это JavaScript расширение для, легко понять, если пользователь не имеет JavaScript. Ему нужно только проследить некоторые операции с jQuery Tools, Firebug или Web Developer. JQuery API доступна на сайте разработчика.
В jQuery помещен в операцию круглая ручка, которая запускается после создания DOM-дерево, но перед загрузкой внешних ресурсов, таких как изображения, что эквивалентно размещению jQuery скрипты накануне дня закрытия. Это более эффективно, чем JavaScript-обработчика. Кроме того, вы можете были зарегистрированы несколько для регистрации нескольких обработчиков, которые будут выполняться в том порядке, в котором они. JavaScript может быть использован только один раз:
$(document).ready( handler )Window OnLoad.onload = handler.ready()window.onload = handler
Принимает один аргумент, который часто является анонимная функция или заданной функции. Функция не имеет аргументов.
Он используется так часто, что это стенография .$(document).ready( handler ) $ ( handler ). Итерации через выбранные элементы
Селектора jQuery нулевой или DOM-элементов можно выбрать. Выбранные элементы завелся внутри объекта, так как [0], [1], ... и т. д.
Вы можете пройти и каждый из этих элементов: Неявные итерации с помощью append () функции для каждого из выбранных элементов неявного цикла. Явные итерации .each (function). $ (this).
Предположим, что пользователь хочет применить ряд операций для каждого из выбранных элементов, это итерация по выбранным элементам. Принимает в качестве аргумента функцию, которая либо анонимно, либо фиксированной или переменной функции. Внутри функции вы можете создать ссылку на элемент, который в работе:
.each(function).each()$(this).
Кроме того, $(this) ссылается на jQuery объект, пока он работает, он может также использовать ключевое слово this ссылается на используемые DOM-элемент. Таким образом: $ (this) [0] === this
И может применить JQuery методов, как .append(), .html () $(this), но не this. С другой стороны, он может это действие DOM this, например this.id.substring(0,5), что означает, что первые пять символов id-DOM-атрибут объекта в эксплуатацию. Писать с Ajax с использованием jQuery
Ajax-запрос асинхронно по умолчанию. Другими словами .ajax() будет выпущен не будет ждать сценарий на ответ, но следующее заявление, чтобы не зажать и не замораживать экран.
Пользователь может Ajax Json Success с необработанной JavaScript написать. Но jQuery делает его гораздо проще, с $ .Ajax-настройки или $ .ajax URL-параметров.
Этот параметр является объектом пары "ключ-значение".
Часто используемые кнопки:
URL запроса, которые будут размещены за пределами settings последней форме. Type - GET либо POST. Ajax Success data - параметры запроса (имя = значение пары) и выражены как объект, например, {имя:"Питер", msg:"hello"} или Query-String "name=Петра&msg=Hello". DataType - тип данных ожидается ответ, например, текст, xml, json, script или html. Headers - объект для пар "ключ-значение" заголовок.
Проверьте имеет сервер для запроса Ajax Success php request-Header "X-Requested-With: XMLHttpRequest". Серверная программа может проверить, является ли запрос Ajax через эту надпись, например, на PHP. Вопросы безопасности
Чтобы предотвратить XSS-атаки (Cross-Site Scripting), объект XMLHttpRequest только данные с исходного сервера, страницы сервиса могут получить.
Надо быть осторожным при загрузке сценария. HTML-элемент $ загружает данные с сервера и сохраняет возвращаемый HTML-код в течение установленного элемента. Это самый простой метод Ajax для загрузки данных с сервера.
Вот пример запроса с помощью Ajax Success function на HTTP-сервер для простого текста.
В этом примере мы будем использовать Ajax для отправки запроса POST асинхронный запрос к текстовому файлу.
Это текст ответа Ajax Запроса:
Этот пример работает под HTTP-сервер (например, Apache), так как он отправляет HTTP-запрос, в качестве заполнителей для текста ответа. Он также содержит гиперссылку для запуска Ajax-запрос (через функцию loadAjaxText()).
Ajax-запрос с параметрами POST PHP-HTTP-сервер для получения динамического ответа.
Клиент-HTML-код содержит два "с" для ввода и вывода, соответственно, Он также содержит гиперссылку, чтобы запрос Ajax Success php (через JavaScript-функцию Load text ()) выполнить.
Результаты работы скрипта асинхронный процесс взаимодействия с веб-сервера с помощью JavaScript подтвердить, что даже без обновления страницы онлайн-приложениям работать быстро и эффективно. Веб-модель использует запрос или ответ от сервера HTML, всегда всю страницу. В результате пользователь получает результат после нажатия кнопки сервера и ждать ответа, снова нажмите кнопку и ждите ответа. Ajax выполняет операции запрос/ответ, который не требует от пользователя ожидания ответа от сервера. Автор: Иван Фролов 16. Ноябрь, 2018
Категория: обо всём
