jQuery AJAX - Метод load()

jQuery метод load() - это простой, но мощный метод AJAX.

Метод load() загружает данные с сервера и помещает их в выбранный элемент.

Синтаксис:

Обязательный параметр URL определяет URL, откуда следует загрузить данные.

Необязательный параметр data определяет набор данных, посылаемых на сервер во время запроса. Данные должны определяться в виде объекта из пар "ключ/значение".

Необязательный параметр callback определяет имя функции, которая будет вызвана, когда метод load() закончит свою работу.

Вот содержимое файла-примера "demo_test.txt":

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

В следующем примере загружается содержимое файла "demo_test.txt" в элемент с идентификатором "div1":

$("#div1").load("demo_test.txt"); 

Также можно добавлять селектор jQuery в параметр URL, осуществляя частичную вставку данных, полученных от сервера. Т.е. проводить их фильтрацию по селектору.

В следующем примере загружается содержимое элемента с идентификатором id="p1" в файле "demo_test.txt" в элемент с идентификатором "div1":

$("#div1").load("demo_test.txt #p1"); 

Необязательный параметр callback определяет функцию обратного вызова, которая будет запускаться, когда метод load() закончит свою работу. Эта функция может иметь следующие параметры:

• responseTxt – содержит полученный контент, если запрос удался
• statusTxt – содержит статус запроса
• xhr – содержит объект XMLHttpRequest

В следующем примере по окончании работы метода load() на экран выводится окно с сообщением. Если метод load() завершился успешно, то будет выведено сообщение "Внешние данные успешно загружены!", если же запрос не удался, то будет выведено сообщение с ошибкой:

$("button").click(function(){
  $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
     if(statusTxt == "success")
       alert("Внешние данные успешно загружены!");
     if(statusTxt == "error")
       alert("Error: " + xhr.status + ": " + xhr.statusText);
   });
});