jQuery для начинающих. Часть 3. AJAX. Ajax с нуля

JavaScript, jQuery и Ajax с Нуля до Гуру

Привет, мои читатели! Приступлю сразу к делу.

JavaScript, jQuery и Ajax с Нуля до Гуру

Думаю не надо объяснять, что JavaScript — это очень важный язык, если Вы занимаетесь созданием сайтов. С его помощью делаются проверки форм без перезагрузки страницы (что очень удобно для пользователей), всякие анимации (плавное исчезновение, плавные движения и так далее), динамическая подгрузка контента с сервера (безусловно, с помощью технологии Ajax).

Вопрос лишь в том, как научиться всё это делать.

Многие из Вас слышали о принципе Парето, который говорит о том, что 20% дел дают 80% результата. Уверен, что и в программировании то же самое. Невозможно знать всё, однако, для успеха достаточно знать лишь малую часть. Таким образом, задача упрощается в разы, если найти материал настоящего практика, который и поведает только то, что он использует в своей практике.

И такой практик нашёлся — это Михаил Русаков, который выпустил курс как раз по JavaScript. Называется курс "JavaScript, jQuery и Ajax с Нуля до Гуру". Особенностью курса является то, что автор рассказывает ровно то, что необходимо и ничего лишнего. Он даёт всю необходимую теорию и массу практических примеров. А упражнения, которые идут к урокам, позволяют закрепить материал.

Если Вы уже прошли курсы по PHP и разобрались, то этот курс пойдет намного легче.

Facebook

Twitter

Вконтакте

Google+

Поделиться ссылкой:

Понравилось это:

Нравится Загрузка...

Похожее

refitrf.ru

JavaScript, jQuery и Ajax с нуля до гуру - Видеошкола

Если Вы хотите научиться создавать красивые и динамические сайты на JavaScript, jQuery и Ajax, которые будут просто завораживать Ваших посетителей, то уникальный обучающий видеокурс «JavaScript, jQuery и Ajax с нуля до гуру» — для Вас. Получите сегодня кладезь всех необходимых знаний и всей необходимой практики по JavaScript, jQuery и Ajax!

Именно этот видеокурс автор записывал не с точки зрения «вот что я знаю по JavaScript», а относительно того, что он использует в своей уже богатой практике. Всё, что он часто или редко использует в своей работе, вот обо всём об этом и рассказывается в курсе. То есть данный курс — это уникальная практическая информация, которая необходима Вам и в то же время достаточна для успешного программирования на языке JavaScript.

Теория — это конечно хорошо, но без практики она смысла не имеет. Поэтому автор, опять же опираясь на свою практику, подготовил Вам наиболее полезные упражнения для закрепления материала из уроков. Почти к каждому уроку в курсе идёт по несколько упражнений от совсем простых до весьма сложных. Так же уроки имеют исходники, которые создавались в процессе урока. То есть если у Вас не получится написать так же как у автора в уроке, то в исходнике Вы всегда сможете увидеть весь код из урока.

Содержание видеокурса «JavaScript, jQuery и Ajax с нуля до гуру»:

Раздел 1. JavaScript

Все необходимые основы JavaScript, не зная которых Вы себя будете необычайно сильно тормозить при обучении, и возникнет масса непониманий принципиальных вещей в JavaScript, без которых Вы едва ли сможете писать даже скрипты средней сложности.

Все базовые возможности языка JavaScript. Поэтому даже если JavaScript – это Ваш первый язык программирования, то никаких проблем не возникнет. Курс идёт именно «с нуля».
Методы взаимодействия и получения данных от пользователя. Тем самым, создаётся интерактивность страницы.
О событиях в JavaScript. Событие – это некое действие, которое можно в JavaScript каким-либо образом обработать. Например, пользователь кликнул мышью по изображению – это событие. И в JavaScript мы можем, например, сделать это изображение крупным, а при повторном клике вернуть первоначальный размер. Есть масса других событий, о которых Вы обязательно узнаете из этого раздела, а, главное, научитесь их правильно обрабатывать.
Научитесь проверять формы. Даже если сайт простой и не требует никакой динамики, но на нём есть HTML-формы, которые будут отправляться на сервер. Перед их отправкой крайне желательна проверка и вывод всех ошибок, чтобы пользователь мог внести исправления. Всё это делается на JavaScript. Все тонкости, нюансы и особенности проверки самых разных форм автор покажет.

Набор необходимых для работы функций, в то же время, ничего лишнего.
О DOM (Document Object Model) – основе для того же jQuery. Если Вы будете знать DOM, то множество задач (которых, кстати, большинство) Вы сможете легко и быстро сделать без помощи тяжеловесной библиотеки jQuery.

Раздел 2. jQuery

Основы jQuery. Стоит отметить, что очень много новичков думает, что jQuery – это отдельный язык. Разумеется, это не так. Вот, чтобы успешно работать с jQuery, нужно знать это и другие базовые вещи, о которых Вы и узнаете из этого раздела.
Где и когда нужно использовать jQuery. Большинство программистов его используют там, где без него можно было бы и обойтись, либо используют принципиально неправильно. Чтобы не быть таким же «программистом», Вам обязательно надо будет посмотреть данный раздел.
Как уменьшить размер огромной библиотеки jQuery, ведь она весит очень много, в результате, скорость загрузки страницы заметно снижается. И как улучшить этот показатель, сэкономив на размере библиотеки jQuery, Вы также узнаете из этого раздела.
Как работать со страницей, используя jQuery. Это очень важно, поскольку если Вы не будете уметь работать с элементами на странице, то jQuery вообще теряет смысл.

Как манипулировать различными элементами на странице. Это особенно важно, ведь уметь разбирать страницу на «запчасти» смысла нет, если Вы ничего не будете с этими «запчастями» делать. Вот в данном разделе Вы научитесь модернизировать различные элементы, внося как раз красоту на страницы.
О том, как устанавливаются события в jQuery и как их обрабатывать. Здесь это всё несколько иначе, чем в JavaScript, поэтому и это так же нужно обязательно знать.
И, наконец, конёк jQuery – это создание анимации очень легким способом. Фактически, весь лоск, который так нравится пользователям, создаётся с анимацией. Плавное появление и исчезновение каких-нибудь изображений, плавное сворачивание, например, тех же блоков, плавное изменение размеров элементов и многое-многое другое. О том, как это всё делается, Вы опять же узнаете из данного раздела.

Раздел 3. Ajax

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

Как можно использовать Ajax без библиотеки jQuery. Это особенно актуально, если Вам не нужно разрабатывать какие-то сложные проекты, а достаточно несколько отправок каких-либо данных. Подключать ради пары отправок jQuery – крайне глупое решение (к сожалению, так делают крайне часто неопытные специалисты), поэтому один из уроков в данном разделе Вас научит, отправлять запросы и без jQuery.
Как отправлять GET и POST запросы на сервер с использованием jQuery. Если таких отправок много, то использование jQuery упростит в разы написание кода и резко улучшит его читабельность.
О формате JSON – важнейшем «мосте» между JavaScript и PHP. Это принципиально разные языки, и чтобы они могли обмениваться данными, используется универсальный формат JSON, с которым Вы также научитесь работать в данном разделе.
Как контролировать отправку данных на каждом из этапов. Допустим, Вы хотите поставить какую-нибудь анимационную картинку (как бы «загрузка данных», наверняка, Вы с ней сталкивались) во время отправки. При возникновении ошибки хотите вывести соответствующее сообщение пользователю. А при успешности отправки хотите вывести на страницу определённый результат. Вот на каждом из этапов можете выполнять определённые задачи, как это делается, Вы опять же узнаете из этого раздела.

Бонусы

Видеоурок - "Создание ProgressBar"
Видеоурок - "Создание слайдера изображений"
Видеоурок - "Создание собственного плагина jQuery"

JavaScript, jQuery и Ajax с нуля до гуру Автор: Михаил Русаков

Узнать подробнее...(перейти на сайт автора)

Не работает ссылка? — Напишите нам об этом в комментариях. Понравился материал? — Кликните по кнопкам ниже и расскажите о нём друзьям!

Другие материалы по теме:

Внимание! Посетители, находящиеся в группе Гости, не могут оставлять комментарии. Зарегистрируйтесь или зайдите на сайт под своим логином.

www.video-shkola.com

jQuery для начинающих. Часть 3. AJAX / Хабр

Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов... Что такое AJAX я думаю рассказывать не стоит, ибо с приходом веб-два-нуля большинство пользователей уже воротят носом от перезагрузок страниц целиком, а с появлением jQuery реализация упростилась в разы...

Примечание: Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)

jQuery(..).load

Начнем с самого простого — загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:

url запрашиваемой страницы
передаваемые данные (необязательный параметр)
функция которой будет скормлен результат (необязательный параметр)

Приведу пример JavaScript кода:// по окончанию загрузки страницы $(document).ready(function(){ // вешаем на клик по элементу с id = example-1 $('#example-1').click(function(){ // загрузку HTML кода из файла example.html $(this).load('ajax/example.html'); }) }); Пример подгружаемых данных (содержимое файла example.html):Example Data Loaded By AJAX Bye-Bye

Пример работы

jQuery.ajax

Это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр — объект включающий в себя все настройки (выделены параметры которые стоит запомнить):

async — асинхронность запроса, по умолчанию true
cache — вкл/выкл кэширование данных браузером, по умолчанию true
contentType — по умолчанию «application/x-www-form-urlencoded»
data — передаваемые данные — строка иль объект
dataFilter — фильтр для входных данных
dataType — тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)
global — тригер — отвечает за использование глобальных AJAX Event'ов, по умолчанию true
ifModified — тригер — проверяет были ли изменения в ответе сервера, дабы не слать еще запрос, по умолчанию false
jsonp — переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)
processData — по умолчанию отправляемые данный заворачиваются в объект, и отправляются как «application/x-www-form-urlencoded», если надо иначе — отключаем

scriptCharset — кодировочка — актуально для JSONP и подгрузки JavaScript'ов
timeout — время таймаут в миллисекундах
type — GET либо POST
url — url запрашиваемой страницы

Локальные AJAX Event'ы:

beforeSend — срабатывает перед отправкой запроса
error — если произошла ошибка
success — если ошибок не возникло
complete — срабатывает по окончанию запроса

Для организации HTTP авторизации (О_о):

username — логин
password — пароль

Пример javaScript'а:$.ajax({ url: '/ajax/example.html', // указываем URL и dataType : "json", // тип загружаемых данных success: function (data, textStatus) { // вешаем свой обработчик на функцию success $.each(data, function(i, val) { // обрабатываем полученные данные /* ... */ }); } });

jQuery.get

Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:

url запрашиваемой страницы

передаваемые данные (необязательный параметр)
callback функция, которой будет скормлен результат (необязательный параметр)
тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

jQuery.post

Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST'а. Может принимать следующие параметры:

url запрашиваемой страницы
передаваемые данные (необязательный параметр)
callback функция, которой будет скормлен результат (необязательный параметр)
тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

JavaScript:

$(document).ready(function(){ // по завершению загрузки страницы $('#example-3').click(function(){ // вешаем на клик по элементу с id = example-3 $.post('ajax/example.xml', {}, function(xml){ // загрузку XML из файла example.xml $('#example-3').html(''); $(xml).find('note').each(function(){ // заполняем DOM элемент данными из XML $('#example-3').append('To: ' + $(this).find('to').text() + ' ') .append('From: ' + $(this).find('from').text() + ' ') .append('' + $(this).find('heading').text() + ' ') .append( $(this).find('body').text() + ' '); }); }, 'xml'); // указываем явно тип данных })}); Файл example.xml:<?xml version="1.0" encoding="UTF-8"?><note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>

Пример работы

jQuery.getJSON

Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры:

url запрашиваемой страницы
передаваемые данные (необязательный параметр)
callback функция, которой будет скормлен результат (необязательный параметр)

JavaScript:

$(document).ready(function(){ // по завершению загрузки страницы $('#example-4').click(function(){ // вешаем на клик по элементу с id = example-4 $.getJSON('ajax/example.json', {}, function(json){ // загрузку JSON данных из файла example.json $('#example-4').html(''); // заполняем DOM элемент данными из JSON объекта $('#example-4').append('To: ' + json.note.to + ' ') .append('From: ' + json.note.from + ' ') .append('' + json.note.heading + ' ') .append( json.note.body + ' '); }); })}); Файл example.json:{ note:{ to:'Tove', from:'Jani', heading:'Reminder', body:'Don\'t forget me this weekend!' }}

Пример работы

jQuery.getScript

данная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры:

url запрашиваемого скрипта
callback функция, которой будет скормлен результат (необязательный параметр)

JavaScript:

$(document).ready(function(){ // по завершению загрузки страницы $('#example-5').click(function(){ // вешаем на клик по элементу с id = example-5 $.getScript('ajax/example.js', function(){ // загрузку JavaScript'а из файла example.js testAjax(); // выполняем загруженный JavaScript }); })}); Файл example.js:function testAjax() { $('#example-5').html('Test completed'); // изменяем элемент с id = example-5}

Пример работы

Отправка Формы

Для отправки формы посредством jQuery можно использовать любой из перечисленных способов, а вот для удобства «сбора» данных из формы лучше использовать плагин jQuery Form

Отправка Файлов

Для отправки файлов посредством jQuery можно использовать плагин Ajax File Upload иль One Click Upload

Взаимодействие с PHP

Для организации работы с PHP использую бибилотеку jQuery-PHP, удобно если Вам нравится jQuery ;), подробней читаем в статье PHP библиотека для jQuery

Примеры использования JSONP

Отдельно стоит отметить использование JSONP — ибо это один из способов осуществления кросс-доменной загрузки данных. Если немного утрировать — то это подключение удаленного JavaScript'a, содержащего необходимую нам информациию в формате JSON, а так же вызов нашей локальной функции, имя которой мы указываем при обращении к удаленному серверу (обычно это параметр callback). Чуть более наглядно это можно продемонстрировать следующая диаграмма (кликабельно):

При работе с jQuery имя callback функции генерируется автоматически для каждого обращения к удаленному серверу, для этого достаточно использовать GET запрос ввида:

http://api.domain.com/?type=jsonp&query=test&callback=? Вместо последнего знака вопроса (?) будет подставлено имя callback функции. Если же Вы не хотите использовать данный способ, то Вам необходимо будет явно указать имя callback функции, используя опцию jsonp при вызове метода jQuery.ajax().

Google Поиск

Пример получения и обработки результатов поиска используя Google, более подробную информацию найдете в статье "jQuery + AJAX + (Google Search API || Yahoo Search API)"

Yahoo Поиск

Пример получения и обработки результатов поиска используя Yahoo, более подробную информацию найдете в статье "jQuery + AJAX + (Google Search API || Yahoo Search API)"

JSONP API

Приведу так же небольшой список открытых API с поддержкой JSONP:

Google — поиск и большинство сервисов
Yahoo — поиск и большинство сервисов
Flickr
MediaWiki — соответственно и все производные — Wikipedia, Wiktionary и т.д.
Digg
CNET
aideRSS

События

Для удобства разработки, на AJAX запросах висит несколько event'ов, их можно задавать для каждого AJAX запроса в отдельности, либо глобально. На все event'ы можно повесить свою функцию.

Пример для отображения элемента с id=«loading» во время выполнения любого AJAX запроса:

$("#loading").bind("ajaxSend", function(){ $(this).show(); // показываем элемент}).bind("ajaxComplete", function(){ $(this).hide(); // скрываем элемент}); Для локальных событий — вносим изменения в опции метода ajax():$.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ...});

Для большей наглядности, приведу следующую диаграмму (кликабельно):

Ну и собственно список всех event'ов:

ajaxStart — Данный метод вызывается в случае когда побежал AJAX запрос, и при этом других запросов нету
beforeSend — Срабатывает до отправки запроса, позволяет редактировать XMLHttpRequest. Локальное событие
ajaxSend — Срабатывает до отправки запроса, аналогично beforeSend
success — Срабатывает по возвращению ответа, когда нет ошибок ни сервера, ни вернувшихся данных. Локальное событие
ajaxSuccess — Срабатывает по возвращению ответа, аналогично success
error — Срабатывает в случае ошибки. Локальное событие
ajaxError — Срабатывает в случае ошибки
complete — Срабатывает по завершению текущего AJAX запроса (с ошибкои или без — срабатывает всегда).Локальное событие
ajaxComplete — Глобальное событие, аналогичное complete
ajaxStop — Данный метод вызывается в случае когда больше нету активных запросов

Так же Вы можете скачать все примеры в одном архиве.

Цикл статей

jQuery для начинающих
jQuery для начинающих. Часть 2. JavaScript Меню
jQuery для начинающих. Часть 3. AJAX

P.S. Для подсветки синтаксиса использовал мини-сервис http://highlight.hohli.com/

habr.com