9.1 Объект $ и метод ajax в jQuery

У jQuery так же есть специальный глобальный объект для работы с сетью. Как ты можешь догадаться, называется он $. Да, вот такое имя. Зато просто и удобно.

Допустим, ты хочешь в своем JavaScript отправить запрос на API и обработать полученный ответ. Это можно сделать так:


$.ajax({
  type: "POST",
  url: "api.javarush.ru",
  data: {name: 'Bill', location: 'Radmond'},
  success: function(msg){
    alert( "Person found: " + msg );
  }
});

Все, это весь код. У объекта $ мы вызываем метод ajax(), куда передаем объект, который описывает все что нам нужно: и запрос, и ответ.

  • Поле type задает тип HTTP-запроса: GET или POST
  • Поле url задает url, на который будет отправлен запрос
  • Поле data задает данные запроса в формате JSON
  • Поле success задает функцию, которую нужно будет вызвать после того, как придет успешный ответ от сервера.

9.2 Полезные запросы

А ведь если не нужно передавать никаких данных, то запрос можно записать еще короче. Например, так можно записать простой POST-запрос:


$.post("ajax/test.html", function( data ) {
  $( ".result" ).html( data );
});

А знаешь что делает код $( ".result" ).html( data );? Попробуем догадаться…

Он находит в документе элемент с классом result, и добавляет ему внутрь HTML-код — данные data. Так за пару строчек ты можешь загрузить данные с сервера и добавить их в свою страницу. Ну не красота разве? :)

GET-запрос тоже можно написать в пару строк:


$.get("ajax/test.html"., function( data ) {
  $( ".result" ).html( data );
});

Хочешь загрузить и выполнить скрипт?


$.ajax({
  method: "GET",
  url: "test.js",
  dataType: "script"
});

Получить последнюю версию HTML-страницы?


$.ajax({
  url: "test.html",
  cache: false
})
  .done(function( html ) {
    $( "#results" ).append( html );
  });

В интернете есть очень хорошая документация по jQuery:

jQuery API

jQuery.ajax()

Кроме того, все распространенные вопросы легко гуглятся и есть на StackOverflow.