AJAX в jQuery

Сегодня технология AJAX используется практически на всех ресурсах интернета. Спектр её применения необычайно широк и технологичен. Основная задача AJAX это обмен данными между сайтом и сервером без традиционной перезагрузки страницы.

GET запрос

Нам нужно обратиться к файлу test.php с парамертром testdata и значением test и получить ответ сервера:

$.ajax({
  // куда пойдет запрос
  url: "/test.php",
  // метод передачи
  method: "get",
  // тип данных в ответе (xml, json, script, html)
  dataType: "html",
  // параметры передаваемые в запросе
  data: { testdata: "test" },
  // функция которая будет выполнена после успешного запроса
  success: function (data) {
    // в переменной data содержится ответ от test.php
    alert(data);
  },
});

Тоже самое, используя сокращенный метод:

$.get('/test.php', {testdata: 'Test'}, function(data){
    alert(data);
});

Запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр cache: false:

$.ajax({
  url: "/test.php",
  method: "get",
  cache: false,
});

POST запрос

$.ajax({
  url: "/test.php",
  method: "post",
  dataType: "html",
  data: {testdata: 'test'},
  success: function (data) {
    alert(data);
  },
});

Тоже самое, используя сокращенный метод:

$.post("/test.php", { testdata: "Test" }, function (data) {
  alert(data);
});

POST запросы ни когда не кэшируются.

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

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

{login: 'ЗНАЧЕНИЯ_ПОЛЯ', password: 'ЗНАЧЕНИЯ_ПОЛЯ'}

serialize можно применить только к тегу form и полям формы:

html<div class="form_container">
  <div id="message"></div>
    <form id="form">
    <input type="text" name="login">
    <input type="text" name="password">
    <input type="submit" name="send" value="Отправить">
    </form>
</div>

js$("#form").on("submit", function(){
  $.ajax({
    url: '/handler.php',
    method: 'post',
    dataType: 'html',
    data: $(this).serialize(),
    success: function(data){
      $('#message').html(data);
    }
  });
});

phpif (empty($_POST['login'])) {
  echo 'Укажите логин';
} elseif (empty($_POST['password'])) {
  echo 'Укажите пароль';
} else {
  echo 'Авторизация...';
}

Отправка HTTP заголовков

Через AJAX можно отправить заголовки HEAD, они указываются в параметре headers:

$.ajax({
  url: "/index.php",
  method: "get",
  dataType: "html",
  headers: { Token_value: 123 },
  success: function (data) {
    console.dir(data);
  },
});

В PHP они будут доступны в массиве $_SERVER, ключ массива переводится в верхний регистр с приставкой HTTP_:

<?php
// 123
echo $_SERVER['HTTP_TOKEN_VALUE'];

Обработка ошибок

Через параметр error задается callback функция, которая будет вызвана в случаи если запрашиваемый ресурс отдал 404, 500 или другой код:

$.ajax({
  url: "/index.php",
  method: "get",
  dataType: "json",
  success: function (data) {
    console.dir(data);
  },
  error: function (jqXHR, exception) {
    if (jqXHR.status === 0) {
      alert("Not connect. Verify Network.");
    } else if (jqXHR.status == 404) {
      alert("Requested page not found (404).");
    } else if (jqXHR.status == 500) {
      alert("Internal Server Error (500).");
    } else if (exception === "parsererror") {
      alert("Requested JSON parse failed.");
    } else if (exception === "timeout") {
      alert("Time out error.");
    } else if (exception === "abort") {
      alert("Ajax request aborted.");
    } else {
      alert("Uncaught Error. " + jqXHR.responseText);
    }
  },
});

Синхронный запрос

По умолчанию запросы выполняются асинхронно. Это значит что, запрос не задерживает выполнение программы пока ждет результатов, а работает параллельно. Чтобы включить синхронный режим нужно добавить параметр async: false:

var text = "";
$.ajax({
  url: "/index.php",
  method: "get",
  dataType: "html",
  async: false,
  success: function (data) {
    text = data;
  },
});
// в переменной будет результат из index.php
alert(text);