Робота з мережею через jQuery

1. Об'єкт $ та метод ajax у jQuery

jQuery також має спеціальний глобальний об'єкт для роботи з мережею. Як ти можеш здогадатися, називається він $. Так, саме таке ім'я. Зате просте та зручне.

Припустимо, ти хочеш у своєму JavaScript надіслати запит на API та обробити отриману відповідь. Це можна зробити так:

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

Усе – це весь код. У об'єкта $ ми викликаємо метод ajax(), куди передаємо об'єкт, який описує все, що нам потрібно: і запит, і відповідь.

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

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.

JavaScript та jQuery