Подгрузка контента jQuery.ajax() 


Подгрузка контента jQuery.ajax()

Опубликовано

Библиотека jQuery, а точнее функция jQuery.ajax() входящая в ее состав дает разработчикам уникальную возможность создавать динамические веб-сайты. Функция предназначена для обмена данными с сервером, т.е. с ее помощью можно передать данные в файл, обработать их и вернуть обратно, поместив в заранее указанный блок при этом нет необходимости перезагружать веб-страницу.

Параметры функции $.ajax()

$.ajax(options);

Здесь options – это объект, содержащий передаваемые функции параметры, которые представлены ниже.

url – строка, URL-адрес запрашиваемого сценария.

type – метод запроса, POST или GET, по умолчанию используется GET;

cache – логическое значение указывает браузеру кэшировать (true) или не кэшировать (false) полученные данные.

data – объект, свойства которого служат параметрами запроса. При выполнении запроса GET параметры передаются в виде строки запроса, если запрос типа POST то параметры передаются в теле запроса.

data: {data1: "value1", data2: "value2", dataN: "valueN"}

dataType – ключевое слово идентифицирует данные пришедшие с сервера. Ключевое слово указывает, каким образом будет обработан полученный ответ, прежде чем он будет передан функции обратного вызова. Допустимые значения:

  • xml – ответ анализируется и обрабатывается как XML, в функцию обратного вызова передается дерево DOM;
  • html – ответ передается функции обратного вызова без обработки, все сценарии находящиеся в блоках <script> выполняются;
  • json – ответ обрабатывает как формат json, в функцию обратного вызова передаетcя объект формата json;
  • script – ответ обрабатывается как сценарий JavaScript, и после передается функцию обратного вызова;
  • text – ответ воспринимается как обычный текст;

dataType:"json"

Ресурс на стороне сервера должен содержать соответствующий заголовок content-type.

header("Content-Type: text/html; charset=utf-8");

Если параметр dataType опущен, то ответ не будет предварительно обработан.

contentType – строка указывающая тип запроса, по умолчанию application/x-www-form-urlencoded; charset=UTF-8

processData логическое значение: true – кодирует(по умолчанию), false - не кодирует передаваемые данные в URL формат

success – функция обратного вызова, исполняется если код статуса в ответе сервера сообщает об успехе. Первый параметр - ответ передаваемый сервером после обработки в соответствии с параметром dataType, второй параметр – код статуса.

Существует аналог параметра success, метод .done():

$.ajax({
 //Параметры запроса
}).done(function(data){ 
 //Код выполняющийся после успешного запроса
});

complete – функция обратного вызова, исполняется после успешного запроса, после выполнения success и error. Функция получает два аргумента XHR и строку сообщения о состоянии запроса ("success", "notmodified", "error", "timeout", "abort", or "parsererror").

beforeSend – функция вызываемая перед инициацией запроса.

error – функция обратного вызова выполняющаяся в случае ошибки. Функции передается три параметра: экземпляр XHR, строка сообщения о состояния и необязательный объект исключение, возвращаемый экземпляром XHR

error:function(XHR){
 alert(" Ошибка: "+XHR.status+ "  " + XHR.statusText);
}

statusCode – статус, который вернет сервер после запроса

statusCode: {
 404: function() {
  alert("Страница не найдена");
 }
}

global – параметр содержит логическое значение: true – разрешает (по умолчанию), false – запрещает глобальные функции, которые могут вызываться на различных этапах выполнение запроса.

Перечень глобальных функций

  • $.ajaxStart() – функция срабатывает после запуска Ajax, но перед созданием экземпляра XHR.
  • $.ajaxSend() – функция срабатывает после создания экземпляра XHR, но перед тем как запрос будет отправлен на сервер.
  • $.ajaxSuccess() – функция сработает после того как с сервера вернется ответ, с кодом об успешном запросе.
  • $.ajaxError() – Функция сработает, если ответ от сервера содержит код ошибки.
  • $.ajaxComplete() – функция сработает после того как будет получен ответ сервера, и после вызова функций обратного вызова
  • $.ajaxSuccess(),$.ajaxError().
  • $ajaxStop() – функция сработает после всех этапов обработки, и вызова всех функций обратного вызова.

$("displayStatus").ajaxSuccess(function(info){
 $(info.target).append("Запрос выполнен успешно")
});

acync – логическое значение: true – запрос выполняется как асинхронный (по умолчанию), false – запрос выполняется как синхронный;

timeout – Числовой параметр, определяет время ожидания ответа от сервера в миллисекундах, если в течении указанного времени ответа не последовало, то дальнейшее выполнение передается функции обработки ошибок error

timeout:1000

Пример

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Подгрузка контента jQuery.ajax()</title>

  <!--JQUERY-->
  <script src="js/jquery v1.7.2.js" type="text/javascript"></script>	

  <script type="text/javascript">
  $(document).ready(function(){
     $("#buttonUpload").click(function(){
       $.ajax({
         url: "uploadContent.php",
         type: "GET",
         cache:true,
         data: {data:$("#textUpload").val()},
         success: function(data){   
           $("#dataUpload").html(data);
         }
       });
     });
  });
  </script>

</head>
<body>

  <input type="text" id="textUpload" value="" />
  <button id="buttonUpload">Подгрузить</button>
  <br />
  <hr />
  <div id="dataUpload"></div>

</body>
</html>

 

Содержимое файла:

  • Внутри парного тега <HEAD> подключена библиотеку JQuery, и тут же располагается функция .ajax();
  • В теле документа располагаются: текстовое поле, данные из которого будут передаваться функцией .ajax() на обработку, кнопка BUTTON, при нажатии на которую будет вызываться функция .ajax(), и блок DIV, в который будут помещаться данные полученные из файла uploadContent.php;

 

Серверный файл 

Файл "uploadContent.php" находится на серверной стороне, функция $.ajax() через GET запрос посылает текст введенный пользователем, сценарий, находящийся в файле обрабатывает полученные данные, и результат возвращает обратно функции.

<?php
header("Content-Type: text/html; charset=UTF-8");
if($_SERVER["HTTP_X_REQUESTED_WITH"] == "XMLHttpRequest") {
 print  " DATA: ".$_GET["data"]; 
}
?>

Файл содержит функцию header, которая оправляет HTML шапку, а также суперглобальный массив $_SERVER["HTTP_X_REQUESTED_WITH"], который проверяет тип пришедшего запроса, если он соответствует Ajax запросу, т.е. XMLHttpRequest, то происходит дальнейшее выполнение сценария.

Функция для перекодировки текста из UTF8 в WIN1251. Скачать функцию.

В примерах использована библиотека JQuery версии v1.7.2, вы всегда можете скачать более новую зайдя на официальный сайт в раздел загрузок.