Асинхронный AJAX-запрос с помощью jQuery

Question

Как я могу сделать следующее с помощью jQuery?

var xmlhttp;

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementByID('statusDisplay').innerHTML = xmlhttp.responseText; // show loaded content
    } else if (xmlhttp.readyState >= 1 && xmlhttp.status == 200) /* if(xmlhttp.readyState>=2 && xmlhttp.status==200) */ {
        document.getElementByID('statusDisplay').innerHTML = '<img src="ajax_load.gif" />'; // show ajax loading image
    }
}
xmlhttp.open("GET", "path/to/file.php", true);
xmlhttp.send();

В основном меня интересует, как я могу получить readyStatea и статус и как я могу получить текст ответа из этих функций (более или менее так):

$.ajax({url: 'path/to/file.php', async: true, success: function(){
    // how can I get the responseText here?
}, whileLoading: function(){
    // does such a parameter actually exist?
}});

Заранее спасибо!

Answer 1

jQuery не поддерживает "нативный" (jQuery'ish) доступ к readyStates.

Здесь нет interactive обратный вызов, например, который может представлять readyState===3,

В любом случае, у вас есть доступ к responseText в success callback от .ajax()

$.ajax({
   url:      'some.pl',
   dataType: 'text',
   type:     'GET',
   success:  function(data){
      // data represents xhr.responseText here
   }
});

Во всяком случае, .ajax() метод возвращает XMLHttpRequest который вы можете получить доступ в случае необходимости.

var myxhr = $.ajax({});
myxhr._onreadystatechange = myxhr.onreadystatechange;

myxhr.onreadystatechange = function(){
    myxhr._onreadystatechange();
    if(myxhr.readyState === 3) {}  // or whatever
};

Это возможное решение этой проблемы. Но в целом вы будете иметь все необходимые данные и информацию в ajax event callbacks,
Кроме того, XMLHttpRequest object перешел во множество обратных вызовов, как beforeSend, error а также success,

См. http://api.jquery.com/jQuery.ajax/ для получения дополнительной информации.

Answer 2

Чтобы ответить на ваш первый вопрос, функция успешного обратного вызова принимает несколько параметров, один из которых возвращает данные, поэтому:

$.ajax({url: 'path/to/file.php', async: true, success: function(data){
    // data
}, whileLoading: function(){
    // there is no whileLoading callback function
}});

Чтобы ответить на ваш второй вопрос, такой функции обратного вызова во время загрузки нет. См. Документацию для получения дополнительной информации: http://api.jquery.com/jQuery.ajax/

Answer 3

Начиная с jQuery 1.5, $.ajax() возвращает объект jqXHR.

Это означает, что:

Однако механизм onreadystatechange не предусмотрен, так как success, error, complete и statusCode покрывают все мыслимые требования.

и решение Энди будет работать дольше.

Я не знаю способа доступа к объекту XMLHttpRequest из jqXHR. Поэтому, если вы хотите реагировать на изменения в ходе запроса и используете jQuery 1.5, похоже, что вы лучше всего полагались на методы jqXHR.

Answer 4

$.ajax() возвращает сгенерированный XmlHttpRequest, так что вы можете получить к нему доступ, например:

var xhr = $.ajax({url: 'path/to/file.php', async: true, success: function(data){
    // use data here for the response
}});
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    $('#statusDisplay').html(xhr.responseText);
  } else if (xhr.readyState >= 1 && xhr.status == 200) {
    $('#statusDisplay').html('<img src="ajax_load.gif" />');
  }
};

Это то, что вы, вероятно, хотите beforeSend и data (первый параметр) в success, как это:

$.ajax({
  url: 'path/to/file.php', 
  beforeSend: function() { 
    $('#statusDisplay').html('<img src="ajax_load.gif" />');
  },
  success: function(data) {
    $('#statusDisplay').html(data);
  }
});