Успешная обработка поведения в Ext.Ajax.request

Question

Я работаю над проектом extjs 4. В этом проекте я должен общаться обратно и четвертый между js а также php файлы. Поэтому для вызова php из js я использую Ext.Ajax.request.

var dirs = [];

Ext.Ajax.request(
{
    url: 'text.php',
    method: 'GET',
    success: function(response) 
    {
        dirs = JSON.parse(response.responseText);

    },
    failure: function(response) 
    {
        alert('server-side failure with status code ' + response.status);
    }
});

// Creating dropdown list menu
document.write("<select class='select'>");
for (var i = 0; i < dirs.length; i++)
{
    document.write("<option>" + dirs[i] + "</option>");
}
document.write("</select>");

PHP-код является следующим:

<?php

$filepath = "scenarios";
$dirs = array();
$files = array();

$scenes = array_diff(scandir($filepath), array('..', '.'));

for ($i = 2; $i < count($scenes)+2; $i++)
{
    if (strpos($scenes[$i], '.'))
    {
        array_push($files, $scenes[$i]);
    }
    else
    {
        array_push($dirs, $scenes[$i]);
    }
}

if (count($dirs) > 0)
{
    echo json_encode($dirs);
}
else
{
    echo json_encode("You do nat have any projects. Please create new project.");
}   

?>

Теперь проблема появляется в той части, где я хочу создать список меню из полученного dirs object, В DOM firebug dirs = ["google","yahoo"], но в цикле dirs.length возвращает 0???

Также, когда я ставлю alert(dirs.length) перед циклом for он показывает 0, затем правильно генерирует меню списка... странно????

Answer 1

Вызов запроса является асинхронным, что означает, что после вызова Ext.Ajax.Request следующей инструкцией является ваш цикл. Но вы еще не получили данные с сервера. Вам нужно поместить цикл в коллбэк успеха, чтобы убедиться, что вы выполните его после получения данных с сервера.

var dirs = [];

Ext.Ajax.request(
{
    url: 'text.php',
    method: 'GET',
    success: function(response) 
    {
        dirs = JSON.parse(response.responseText);
        // Creating dropdown list menu
        document.write("<select class='select'>");
        for (var i = 0; i < dirs.length; i++)
        {
          document.write("<option>" + dirs[i] + "</option>");
        }
        document.write("</select>");

    },
    failure: function(response) 
    {
        alert('server-side failure with status code ' + response.status);
    }
});

Также, когда я помещаю alert (dirs.length) перед циклом for, он показывает 0, а затем правильно генерирует меню списка... странно????

Это потому что alert остановите поток выполнения вашей программы, пока вы не нажмете "ок". Данные, вероятно, поступают с сервера в течение этого времени, и dir переменная заполняется ими.

Answer 2

Я не вижу отправляемых заголовков - что требуется большинством браузеров:

header('content-type: application/json; charset=utf8;');
if(sizeof($dirs) > 0){
   echo json_encode(array('success' => true, 'data' => $dirs));
}
else {
   echo json_encode(array('success' => false, 'error' => 'You do not have any projects.' ));
} 

JavaScript:

var xhr = new Ext.data.Connection();
xhr.request({
   url: '/text.php',
   method: 'GET',
   headers: {'Accept':'application/json'},
   success: function(response, opts) {
      var obj=Ext.decode(response.responseText);
      var html='';
      Ext.each(obj.data, function(v,i){html+='<option>'+v+'</option>';});
      html='<select>'+html+'</select>';
      console.info(html);
   }
});

Генерация HTML должна находиться в функции обратного вызова - иначе это не имеет никакого смысла вообще.

Не видя возвращаемого JSON - трудно сказать, что с ним не так.

Вниз голосование, не оставляя комментария, почему именно действительно хромает.