Вступление
В этом уроке я расскажу вам о процессе создания Ajax. Если вы хотите немного ознакомиться с тем, что на самом деле означает Ajax, прежде чем фактически реализовать его, ознакомьтесь с этим руководством .
Ajax требует, чтобы код на стороне сервера и на стороне клиента играл хорошо, этот учебник будет охватывать обе стороны. На стороне сервера мы будем использовать фреймворк пирамиды, а на стороне клиента-jQuery. Эти инструменты очень надежны и хорошо документированы, и их поддерживают большие дружественные сообщества. Этот учебник не будет охватывать гайки и болты различных используемых технологий. Описанные методы, инструменты и языки-не единственные, которые стоит использовать. Это просто привет-мир.
Существует полная рабочая копия кода, который я буду просматривать здесь .
Начало работы с установкой пирамиды
Pyramid-это очень легкий веб-фреймворк, написанный на Python. Мы будем использовать это для серверной части нашего приложения. Не волнуйтесь, если вы не знакомы с Pyramid или даже Python, код, который я включу здесь, очень прост.
Чтобы начать работу с Pyramid, нам сначала нужно будет установить его. Сначала убедитесь, что у вас установлен Python, затем откройте терминал, перейдите в каталог, в котором вы хотите сохранить этот проект, а затем введите следующее:
virtualenv my_venv --no-site-packages
Это создаст виртуальную среду . Запуск новых проектов в их собственных средах, как правило, является хорошей практикой, поскольку это предотвращает определенные виды конфликтов пакетов. Если это не имеет смысла, не волнуйтесь слишком сильно. Мы просто будем продолжать следовать хорошей практике, несмотря ни на что.
Команда, которую мы только что выполнили, создала каталог с именем my_env и поместила в него кучу вещей. Следующим шагом является активация среды:
cd my_env source bin/activate
Это активирует вашу виртуальную среду. Чтобы деактивировать его, просто введите деактивировать .
Теперь мы устанавливаем пирамиду в среду с помощью этой команды:
pip install pyramid
Никаких ошибок? Хорошо. Это означает, что теперь у вас есть пирамида, установленная в вашей виртуальной среде. Если вы не можете заставить эти шаги работать, вы можете найти подробные инструкции по установке Pyramid в различных операционных системах на веб-сайте Pyramid.
Ваше Первое Веб-Приложение
После установки Pyramid запуск и запуск базового веб-приложения довольно прост. Введите в консоли следующее:
pcreate -s starter hello_ajax
Эта команда создает базовое приложение под названием hello_ajax . Он использует starter scaffold. Пирамида создала для вас скелет веб-приложения, приложение работает, но не делает много. Пирамида поставляется с несколькими различными лесами, и многое другое можно загрузить. Эшафот-это фактически рецепт для веб-приложения. Используя starter scaffold, Pyramid создает что-то очень простое, другие леса можно использовать для добавления других функций. Например, alchemy scaffold добавляет взаимодействие с базой данных в микс. Для получения дополнительной информации о доступных строительных лесах и о том, как их использовать, я снова сошлюсь на официальную документацию по пирамиде.
Следующим шагом является установка веб-приложения. Введите в консоль следующее:
cd hello_ajax python setup.py develop
Это гарантирует, что все зависимости приложения hello_ajax находятся на месте. Как только эта команда завершится, пришло время запустить приложение:
pserve development.ini --reload
Это запускает сервер разработки и обслуживает ваше приложение. Вы заметите, что в нижней части вывода есть адрес, вероятно, 0.0.0.0:6543 . В 0.0.0.0 часть-это ip – адрес , это адрес localhost , компьютера, на котором вы работаете. В 6543 часть называется номером порта, это немного трудно визуализировать для некоторых людей. Если ip-адрес указывает на дом, то номер порта указывает на определенную дверь или окно. Если это не имеет смысла, то не волнуйтесь слишком сильно. Важно то, что если вы откроете браузер и поместите адрес 0.0.0.0:6543 в строку URL, то вас встретит довольно приветственная страница с сообщением что-то вроде Добро пожаловать в hello_ajax, приложение, созданное веб-фреймворком Pyramid .
Молодец! Теперь вы создали рабочее веб-приложение. Следующий шаг-заставить его отображать что-то другое, кроме дружеского приветственного сообщения.
Базовая структура Приложения
Команда create не сделала ничего особенно волшебного, она просто создала структуру каталогов и поместила в нее пару файлов. Структура каталогов будет выглядеть примерно так (я специально пропустил некоторые вещи, это не все имеет отношение к этому учебнику):
\hello_ajax
\hello_ajax <-- this holds the actual application
development.ini <-- settings file. We wont need to edit this
setup.py <-- python script used to install the app
Мы будем работать с файлами в каталоге hello_ajax application. Здесь вы увидите несколько вещей:
\static <-- stores all the css and js files our app uses. \templates <-- templates are 'rendered' to create html __init__.py <-- is the initialisation script tests.py <-- unit tests. We wont be writing any views.py <-- view code
Каталог шаблонов содержит шаблоны, которые визуализируются с помощью механизма визуализации. Существует множество различных доступных движков рендеринга, стартовый каркас использует Хамелеон. Мы могли бы поменять его на другой, если бы захотели, но здесь в этом нет необходимости. Если это не имеет большого смысла, это должно произойти в ближайшее время, вы довольно скоро напишете свой собственный шаблон.
Функции представления вызываются в результате отправки HTTP-запросов в веб-приложение. Это просто функции, которые сопоставляются с URL-адресами. Их можно использовать для выполнения некоторых очень умных вещей, таких как взаимодействие с базой данных, запуск внешних процессов, вычисление пи до 100 мест, что угодно на самом деле. Пирамида берет все, что возвращает функция представления, и визуализирует его с помощью средства визуализации, результат которого затем упаковывается в объект http-ответа и отправляется тому, кто отправил запрос на URL-адрес, сопоставленный с представлением.
Теперь существует довольно много различных видов рендеров, с которыми мы будем работать, – это система рендеринга шаблонов Chameleon и json рендерер.
Ваш Первый Взгляд
Откройте views.py . Вы увидите одну функцию. Немного что-то вроде:
@view_config(route_name='home', renderer='templates/mytemplate.pt')
def my_view(request):
return {'project': 'hello_ajax'}
Приложение в его нынешнем виде имеет только одно представление. Измените его на привет ajax вместо hello_ajax и сохраните изменения. Затем обновите страницу, которую вы открыли в своем браузере ( 0.0.0.0:6543`). Вы видите, что приветственное сообщение изменилось?
Функция my_view view использует средство визуализации templates/mytemplate.pt . Откройте его в своем любимом текстовом редакторе. Там довольно много всего, о чем мы просто не заботимся, поэтому удалите все его содержимое. Теперь скопируйте следующее в файл и сохраните его:
${project}
Очень похоже на html, не так ли?
Перезагрузите страницу еще раз и посмотрите, что произойдет. Вы увидите нечто явно менее красивое, чем то, что было создано эшафотом. Если вы нажмете кнопку Do some ajax , ничего не произойдет.
Добавление Статических Ресурсов
Откройте каталог static в вашем проекте. Там ты кое-что увидишь. Вы можете удалить все это, если хотите, нам это не понадобится. Создайте новый файл с именем hello_ajax.js и поместить в статический каталог. Откройте файл и поместите в него следующее:
function do_some_ajax(){
alert("TODO: implement ajax call");
}
Теперь отредактируйте templates/mytemplate.pt так это выглядит следующим образом:
${project}
Сохраните все и перезагрузите страницу в своем браузере. Теперь нажмите на кнопку Do some ajax . Вы получите предупреждение.
Взгляните на эту строку:
Он визуализируется в обычный html, атрибут src был заполнен Хамелеоном, вызвав функцию request.static_url('hello_ajax:static/hello_ajax.js') . Эта функция возвращала URL-адрес, по которому браузер мог получить доступ к hello_ajax.js файл, который мы только что сделали. Если это выглядит сбивающим с толку, не напрягайтесь. Дело в том, что наше приложение может обслуживать статические файлы.
Выполнение Ajax с помощью jQuery
Следующий шаг-сделать так, чтобы Ajax действительно произошел. Это означает, что клиент должен иметь возможность выдавать запрос ajax, а сервер должен иметь возможность отвечать на него. Перейдите на веб-сайт jQuery и загрузите его. Мы будем использовать версию 1.11.2 но код, который мы напишем здесь, будет совместим со всеми современными версиями. Поместите источник jQuery в свой статический каталог. И добавьте соответствующую строку в templates/mytemplate.pt .
${project}
Если ваша структура каталогов выглядит следующим образом: static/a/b/c/jquery.js тогда ваш шаблон будет выглядеть следующим образом:
${project}
Просто, а?
Теперь мы будем использовать jQuery для выдачи запроса ajax. Откройте static/hello_ajax.js еще раз и отредактируйте его, чтобы он выглядел так:
function do_some_ajax(){
jQuery.ajax({
url : 'ajax_view',
type : 'POST',
dataType: 'json',
success : function(data){
alert("Success. Got the message:\n "+ data.message)
}
});
}
Сохраните изменения и перезагрузите страницу в браузере. Теперь, когда вы нажимаете на кнопку Do some ajax … Ничего не происходит!
Введите Firebug (или эквивалент)
Каждый современный браузер либо поставляется со встроенными инструментами разработчика, либо доступен в виде плагина. Я не буду рассказывать вам обо всех из них, потому что есть довольно много вариантов. Однако все они имеют довольно схожую функциональность. Firebug-это дополнение Firefox, и это будет инструмент, которого я буду придерживаться в этом объяснении. Чтобы установить его с помощью Firefox, перейдите в инструменты > дополнения и установите firebug. После его установки вам, возможно, потребуется перезагрузить браузер.
Теперь перейдите к 0.0.0.0:6543 и нажмите F12 . Это откроет небольшую вещь в нижней части страницы. Нажмите на консоль и если вы видите кнопку с надписью включить консоль или что-то подобное, нажмите на нее и перезагрузите страницу. Теперь нажмите на нашу кнопку Do some ajax . Вы должны увидеть небольшое красное сообщение в консоли firebug, которое говорит что-то вроде POST http://0.0.0.0:6543/ajax_view 404 не найдено .
Это означает, что клиентский код, который мы написали, создал запрос ajax и отправил его по указанному нами URL-адресу. Но этот URL-адрес не существует, потому что мы его еще не сделали. Пришло время сделать серверную часть.
Ваш второй вид и визуализатор Json
Чтобы завершить функциональность ajax, нам также потребуется реализовать серверную часть диалога ajax. Это означает, что нам нужно будет создать функцию представления, которая возвращает нужные нам данные, и нам нужно будет сообщить Pyramid, какой URL-адрес должен соответствовать этой функции.
Откройте __init__.py . Большая часть этого не будет иметь никакого смысла.
Где-то там будет строка с надписью config.add_route('home', '/') . Это означает, что если кто-то обращается к корневому URL-адресу 0.0.0.0:6543/ , то используйте функцию просмотра с именем маршрута home . Мы добавим под этим строку, которая выглядит следующим образом:
config.add_route('generate_ajax_data', '/ajax_view')
Как вы уже догадались, эта строка делает представление с именем generate_ajax_data доступным по URL-адресу 0.0.0.0:6543/ajax_view . Сохраните изменения.
Следующий шаг-сделать фактический вид. Давайте еще раз посмотрим на views.py . Это уже реализованное представление.
@view_config(route_name='home', renderer='templates/mytemplate.pt') #1
def my_view(request): #2
return {'project': 'greetings ajax'} #3
Сама функция представления определена в строках 2 и 3. Функция представления принимает запрос в качестве параметра и выводит словарь с некоторыми данными. Подробное описание всего, что вы можете сделать с объектом запроса, выходит за рамки этого руководства, поэтому пока не беспокойтесь об этом. Строка 1 украшает функцию my_view , чтобы сообщить пирамиде, что my_view должно быть присвоено имя маршрута home , и дает ей средство визуализации, которое является шаблоном.
Добавьте этот код в views.py:
@view_config(route_name='generate_ajax_data', renderer='json') #1
def my_ajax_view(request): #2
return {'message': "yo mamma's so classless she could be a marxist utopia"} #3
В строке 1 говорится, что наше представление будет иметь имя маршрута generate_ajax_data и будет отображаться как json. Строки 2 и 3 являются фактической функцией просмотра. Сохраните изменения и обновите страницу в браузере. Убедитесь, что firebug открыт, затем нажмите кнопку Do some ajax . Здесь есть несколько вещей, на которые стоит обратить внимание: во-первых, появляется окно оповещения. Узнаешь его? Сообщение внутри него было возвращено нашей функцией просмотра. Еще раз взглянув на наш код JavaScript:
function do_some_ajax(){
jQuery.ajax({
url : 'ajax_view',
type : 'POST',
dataType: 'json',
success : function(data){ //***
alert("Success. Got the message:\n "+ data.message) //***
} //***
});
}
Звездчатые линии-это те, которые на самом деле вызвали появление окна оповещения. Необязательный параметр success вызова ajax jQuery принимает функцию, мы дали ему анонимную функцию, которая просто выдает предупреждение.
Следующее, на что стоит обратить внимание, – это отсутствие нового сообщения об ошибке в консоли firebug. Вызов ajax по-прежнему отмечен, но он больше не окрашен в красный цвет.
Вывод
В этом уроке мы рассмотрели довольно много вопросов. Мы установили пирамиду в ее собственной виртуальной среде, создали базовое приложение с использованием каркаса, сделали наш собственный шаблон Хамелеона и добавили достаточно механизмов JavaScript и Python, чтобы выполнить базовый вызов ajax. Похлопайте себя по спине. Итак, что дальше?
Если вы все еще не уверены в основных механизмах, на которых основан Ajax, я бы предложил взглянуть на вводный материал Codementor . Если вы довольны этим и хотите узнать больше о клиентской стороне вещей, я бы предложил ознакомиться с документацией jQuery. Если вам не нравится пирамида, то есть множество различных фреймворков и серверных технологий на выбор.