содержимое файла 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"});