Технология ajax jquery
Технология ajax. Яваскрипт приобрёл новую жизнь благодаря этой технологии. Функция ajax() позволяет перезагружать страницы без полного обновления. Для отображения интерфейса многих сайтов нужно было постоянно подключаться к базе данных и делать запросы. Теперь вы можете за один раз загрузить пункты меню и больше не подгружать данные, необходимые для отображения статических частей веб-приложения. Есть 2 способа сделать ajax-передачу данных:
- на чистом javascript
- на jquery
Достоинства ajax. Появилась возможность частичного обновления страницы. Нагрузка на базу данных уменьшилась в разы. Вам нужны только необходимые данных.
Недостатки ajax. Усложняется разработка проекта. Если слишком много запросов, то приложение начинает тормозить. Поисковики, такие как яндекс и гугл не могут индексировать одностраничные сайты. Возможно в будущем они смогут проиндексировать такие сайты. Давайте рассмотрим классический пример функции ajax.
$.ajax({
datatype: "json",// тип возвращаемых данных
type: "GET", // тип передачи
url: 'http://yousite.ru/api.php',
data: {'id':1, 'type_user': 'admin'},
beforeSend: function(result) {
/* срабатывает во время ожидания
идеально подходит для прелоадера */
},
dataFilter: function(data, type) {
/* тут можно проверять данные
идеально подходит для валидации */
},
success: function(result, status, xhr) {
var result = $.parseJSON(result)
if(result.error){
alert('Ошибка: ' + result.error);
}else{
console.log('ответ от обработчика: ', result);
}
result = null;
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("\n\t" + textStatus + "\n\t" + errorThrown);
}
});
- datatype - тип возвращаемых данных (xml/html/json/script). Тут очень интересно. Вы можете сгенерировать на стороне обработчика целую страницу со стилями css и отобразить на странице. Иногда такой способ - единственный выход. Вы можете вернуть
- type - тип передачи
- url - путь до обработчика
- data - передаваемые параметры. Вы можете создать один большой объект var obj = {"method": "get_page", "id_page": 1} и передать его в data. У вас получится строка с get-параметрами или один url + post-параметрами. Многие программисты используют конкатенацию для того чтобы собрать url с параметрами. Это неудобно. Не делайте так: var url = 'http://yousite.ru/api/index.php?method=get_page&id_page=1'
Я не буду вам рассказывать о всех функциях. Они не всегда нужны. Перечислю самые необходимые функции:
- beforeSend(). Идеально подходит для прелоадера. Вам нужно только найти gif картинку и показать её в момент ожидания. Можете взять какой-нибудь готовый прелоадер.
- dataFilter(). Вы можете отфильтровать данные. Допустим приходит пустота и вы можете пустоту заменить своими данными. Например, сообщение "нет данных!".
- success(). Успешное завершение передачи данных. Если обработчик плохо отработал и выдал ошибку, то эта функция не сработает, зато сработает error(). Есть ещё одна тонкость. Выборка из базы может вернуть пустоту и пустота не является ошибкой. Учитывайте этот момент. Если у вас таблица и вы наполняете её данными из ajax, то в этом случае она будет пустой.
- error(). Тут вы можете отследить ошибку. Можете использовать alert или console.log.
Вообще сделать обработчик для ajax - это целое дело. Тут всё зависит от ваших способностей. Если вы владеете процедурным стилем, то можете сделать входной скрипт и передавать данные через GET-передачу данных. Потом вы можете подключать файлы для обработки запроса через include(). Сделайте название метода таким же как название подключаемого файла. В итоге у вас появится: входной скрипт index.php, папка method с методами, папка function с функциями. Примерно так можно сделать api на PHP (процедурный стиль).