содержимое файла ajax.php
<?php echo '<p class="ajax">Этот абзац загружен с помощью AJAX</p>', '<pre>GET variables: ', print_r($_GET, TRUE), '</pre>', '<pre>POST variables: ', print_r($_POST, TRUE), '</pre>'; ?>
$.ajax()
Это низкоуровневая функция для передачи запросов AJAX, вызывается без селектора, поскольку не применяется к объекту jQuery. Все операции AJAX выполняются глобальными функциями, не зависящими от DOM.
Полный список параметров см по адресу http://api.jquery.com/jQuery.ajax
самые употреляемые:
- data - данные, передаваемые удаленному сценарию. Записываются либо в виде строки запроса (key1=val1&key2=val2), либо в формате JSON ({"key1":"val1","key2":"val2"})
- dataFilter(data, type) - с возможностью отфильтровать поступающие данные
- dataType - с описанием ожидаемых данных. В его отсутствие jQuery сама делает разумные предположения. Доступные типы данных: "xml", "html", "script", "json", "jsonp" и "text".
- error(XMLHttpRequest, textStatus, errorThrown) - функция обратного вызова, выполняемая в случае возникновения ошибки запроса. (объект XMLHttpRequest, строка состояния запроса и код ошибки)
- success(data, textStatus, XMLHttpRequest) - выполняется в случае успешного запроса (данные, возвращаемые удаленным сценарием, строка состояния запроса, объект XMLHttpRequest)
- type - Тип отправляемого запроса. По умолчанию - GET, но доступен и POST. Еще возможны PUT и DELETE, но их правильная работа во всех браузерах не гарантируется.
Пример отправки POST запроса и загрузки его результатов в абзац #bar
$.ajax({
"type" : "POST",
"url" : "ajax.php",
"data" : "var1=val1&var2=val2",
"success" : function(data){
$("#bar")
.css("background","teal")
.html(data);
}
});
$.ajaxSetup()
Устанавливает значения параметров по умолчанию для вызовов AJAX
Пример: по умолчанию все запросы отправляем файлу ajax.php поссредством POST и загружаем именно в #bar
$.ajaxSetup({
"type" : "POST",
"url" : "ajax.php",
"success" : function(data){
$("#bar")
.css("background","teal")
.html(data);
}
});
Теперь будет достаточно передать новые данные в новом запросе
$.ajax({
"data" : {
"newvar1" : "value1",
"newvar2" : "value2"
}
});
Установленные по умолчанию значения можно переопределить в последующих вызовах
$.ajax({
"type" : "GET",
"data" : {
"newvar1" : "value3",
"newvar2" : "value4"
}
});
Использование прямых методов AJAX
Это оболочки, служащие для вызова функции $.ajax() с заранее установленными значениями ряда параметров
$.get() и $.post()
Принимают 4 аргумента: URL, необязательные передаваемые данные, необязательная фуункция обратного вызова, выполняемая в случае успешного запроса, параметр dataType
//пример запроса get
$.get("ajax.php", function(data){
$("#bar")
.css("background","teal")
.html(data);
});
//пример запроса post
$.post("ajax.php", {"var1":"value1"}, function(data){
$("#bar")
.css("background","teal")
.html(data);
});
$.getJSON()
прямой метод для загрузки данных в формате JSON
Аргументы: URL, необязательные данные, необязательная функция обратного вызова
содержимое файла json.php
{"var1":"котяра пьяный","var2":"собака-мобака"}
пример запроса
$.getJSON("json.php", function(data){
$("#bar")
.css("background","#eee")
.html(data.var1+" , "+data.var2);
});
$.getScript()
Аргументы: URL и необязательная ФОВ
содержимое файла script.php
alert("Этот сценарий был загружен с помощью AJAX.");
пример запроса
$.getScript("script.php");
$.load()
в отличие от глобальных функций $.get() и $.post() - это метод. Имеет неявную функцию обратного вызова, заменяющую html в элементах, отобранных селекторм, на содержимое, возвращенное из удаленного файла.
$("#bar").load("ajax.php", {"var1":"value1"});