loadStrings() in Javascript error

Question

Я пытаюсь создать простую веб-приложение, используя перспективную библиотеку p5.js, но я застрял и не знаю, как двигаться вперед. Для меня это действительно загадка, почему следующие строки не работают. Я просто пытаюсь загрузить простой текстовый файл, и я не могу. Он продолжает говорить, что он пуст, когда, очевидно, это не так. Я не делаю ничего отличного от шоу default example на веб-сайте p5js.

Фактически я также попробовал пример по умолчанию, заменив строку для загрузки: http://quarx.asfa.gr/data.txt и ничего. Мой сервер показывает, что он отправляет строку ... Я не знаю, что делает p5js. Есть идеи? Ниже приведен код.

var result; 
var processedResult; 

function setup() { 
    createCanvas(windowWidth, windowHeight); 
    var URL = "http://quarx.asfa.gr/data.txt"; 
    result = loadStrings(URL, getHistoryState); 
} 

function draw() { 
    background(0); 
    ellipse(50, 50, 80, 80); 
    textSize(50); 
    text(processedResult, 300,300); 
} 

function getHistoryState() { 
    processedResult = result; 
} 

Answer 1

необходимо загрузить ваши данные из того же домена, что и ваш скрипт/страница, размещенная на.

взгляните на Same-Origin-Policy. особенно this table:

Answer 2

Функция, которая рисует текст, draw(), вызывается с помощью API сразу после setup(), поэтому наиболее вероятно, до обратного вызова (getHistoryState()) имел возможность установить любое значение processedResult.

Либо добавить draw() в конце getHistoryState() как таковой:

function getHistoryState() { 
    processedResult = result; 
    draw(); 
} 

или просто избавиться от getHistoryState(), чтобы в конечном итоге с:

var result; 

function setup() { 
    createCanvas(windowWidth, windowHeight); 
    var URL = "http://quarx.asfa.gr/data.txt"; 
    result = loadStrings(URL, draw); 
} 

function draw() { 
    background(0); 
    ellipse(50, 50, 80, 80); 
    textSize(50); 
    text(result, 300,300); 
} 

Но в обоих случаях draw() мы будем называть дважды (после setup(), а затем через обратный вызов). Если это не то, что вы хотите, переименуйте draw() на что-то другое (или добавьте инструкцию в начале draw() для возврата, если processedResult/result по-прежнему пуст).