javascript - 处理js+javascript+处理

Question

我正在尝试使用处理 js 来连接 javascript-processing，但它不起作用。处理草图出现在网站上，但没有包含信息的图形。

JavaScript:

var base_url = "http://ws.audioscrobbler.com/2.0/";


var apikey = "***";

var base_request = "****";

var username;

var procura;
var getUserInfo;
var searching;
var log;

var proc;
var bound=false;

var listaArtistas = [];
var listaArtistasOther = [];




$(document).ready(function () {


    $("#pjs").hide();

    $("#go").click(function () {
        procura();


        //alert("go");

        $("#artists").click(function () {
            buscarArtistas("#search-text", false);
            buscarTracks();

            bindJavascript(listaArtistas);

            //alert("artists");
        });

        $("#compare").click(function () {
            buscarArtistas("#search-text", false);
            buscarArtistas("#search-user", true);
            //alert("compare");
        });
    });
});


function bindJavascript(listaArtistas){



       proc = Processing.getInstanceById('pjs');
       $("#pjs").show();


    if(proc!=null){

    proc.bindJavascript(this);
    proc.legenda(listaArtistas);
        bound=true;

    }else if(!bound){

        setTimout(bindJavascript,250);

    }

    bindJavascript();

}


function buscarArtistas(id, isOther) {
    username = $(id).val();
    searching();
    getUserTopArtists(username, isOther);
   // alert("buscarArtistas");
}

function buscarTracks() {
    username = $("#search-text").val();
    searching();
    getUserTracks();
    //alert("buscarTracks");

}



function procura() {
    username = $("#search-text").val();
    searching();
    getUserInfo();
    //alert("procura");
}

function getUserInfo() {
    var data = {
        api_key: apikey,
        method: "user.getInfo",
        user: username,
        format: "json"
    };
    $.ajax({
        url: base_url,
        data: data,
        success: processUserInfo
    });    
    //alert("getUserInfo");
}

function getUserTopArtists(user_, isOther) {
    var data_ = {
        api_key: apikey,
        method: "user.getTopArtists",
        user: user_,
        limit: 20,
        format: "json"        
    };    
    $.ajax({
        url: base_url,
        data: data_,
        async:   false,
        success: function (info) {
            processUserTopArtists(info, isOther);

            if (isOther) {
                comparar();
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {

        }
    });    
    //alert("getUserTopArtists");
}



function processUserInfo(info) {    
    if (info.error) {        
        log("User " + username + " doesn´t  exist or the field is empty<br/>Try again...");       
        return;
    }    
    username = info.user.name;
    var realname = info.user.realname,
        pais = info.user.country,
        age = info.user.age,
        genero = info.user.gender,
        playlist = info.user.playlists;
    $("#profile").html("Username: " + username + " <br>Name:" + realname + " <br> Country:" + pais + " <br> Age:" + age + " <br> Gender:" + genero + "<br>Playlists:" + playlist + "<br/><table></table>");    
    //alert("processUserInfo");
}

function processUserTopArtists(info, isOther) {


    $.each(info.topartists.artist, function(index, artist) {
        if (isOther) {
            listaArtistasOther[index] = artist.name;


        } else {

         listaArtistas[index] = artist.name;


            $("#artistas").append("Artist: " + artist.name + "<br/>");

           //proc.funcao(listaArtistas[index]);

        }


    });

    //alert("processUserTopArtists");    
}

function comparar() {

    //alert ("lista art " + listaArtistas);
    //alert ("lista art Other " + listaArtistasOther);

    $.each(listaArtistas, function(index, item) {
        var index = $.inArray(item, listaArtistasOther);
        if (index >= 0) {
            $("#artistas2").append("Name: " + item + "<br/>");
        }
    });

    //alert("comparar");
}

function getUserTracks() {    
     var data_ = {
        api_key: apikey,
        method: "user.getTopTracks",
        user: username,
        limit: 100,
        format: "json"        
    }; 

    // alert ("getUserTracks");

$.ajax({
        url: base_url,
        data: data_,
        success: function (info) {
        processUserTopTracks(info);
        }

    });    

    //alert("Estou aqui");
}

function processUserTopTracks(info){    
   $.each(info.toptracks.track, function(index, track) {
        var track = track.name;        
        $("#tracks").append("Track: " + track + "<br/>");
    });
    //alert("aqui");
}

function searching() {    
    $("#status").empty();
    //alert("searching");
}
function log(message) {
    $("#status").append(message + "<br/>");    
    //alert("log");
}

处理文件:

JavaScript js;

int planetsnum=4;
float ang=PI/4;
Stars [] star;
float [][] angsincs=new float [2][planetsnum];
color[] corplanetas=new color[planetsnum];


PFont font;
int totalStars=0;


 void legenda(String [] l){

    totalStars=0;

  String [] listaArtistas ={"",""};

     star= new Stars[totalStars];

   font = createFont("Courier New",12);


  for(int i=0; i<l.length; i++){



    listaArtistas[i]=l[i];

    star[i]= new Stars(new PVector(random(40,820),random(40,360)),20, planetsnum,listaArtistas[i],0);
totalStars++;



  }
   for(int w=0; w<planetsnum; w++){

     angsincs[0][w]=random(TWO_PI);
      angsincs[1][w]=random(0.00001, 0.0001);

      corplanetas[w]=color(random(50,255),random(50,255),random(50,255));
}


 }

void setup(){

size(900,400);


}

void draw(){

 background(0);


  for(int i=0; i<totalStars; i++){
    for(int j=0; j<totalStars; j++){

    if (j > i) {

    if(star[i].VerificaColisaoDeBolas(star[j])){
     star[j].localizacao.x=star[j].localizacao.x+ star[j].r;
      star[j].localizacao.y=star[j].localizacao.y+ star[j].r; 
}
}
}
}
 for(int i=0; i<totalStars; i++){
  star[i].displayStar();

   star[i].limites();

   for(int w=0; w<star[i].planetnum; w++){

   int raio=(w+1)*40;

     float a= star[i].localizacao.x+(raio/2)*cos(angsincs[0][w]);
    float b=star[i].localizacao.y+(raio/2)*sin(angsincs[0][w]);




    planetas(star[i].localizacao.x,star[i].localizacao.y,a,b,raio,corplanetas[w]); 


 angsincs[0][w]=angsincs[0][w]+angsincs[1][w];
    }
    }

    cimaEstrela();

 }


 void cimaEstrela(){

   PVector localizacaoRato = new PVector(mouseX, mouseY);


   for(int i =0; i<totalStars;i++){

    if(star[i].localizacao.dist(localizacaoRato)  <= star[i].r){

     star[i].d=255;


   }else{

     star[i].d=0;

   }
 }
 }


void planetas(float x,float y,float a1,float b1,int r2,color c){

  stroke(100);
      noFill();
      ellipse(x,y,r2,r2);

      fill(c);
      ellipse(a1,b1,10,10);
}

class Stars{   

  float r; 
  PVector localizacao;
  int planetnum;
  String s;
  int d;


 Stars(PVector tempXY, float tempR, int tempplanetnum, String temps, int tempd) {
    localizacao = tempXY;
   r=tempR;
   planetnum=tempplanetnum;
   d=tempd;
   s=temps;


  }

  void displayStar() {


  fill(255,d);
  text(s,localizacao.x+r, localizacao.y);


}

 boolean VerificaColisaoDeBolas(Stars outraStars) {
    float distanciaX = localizacao.dist((outraStars.localizacao));

    if (distanciaX < (r + outraStars.r)) {


      return true;
    }
    return false;
  }

  void limites() {

    if ((localizacao.x+(r)) > width) {
      localizacao.x = width - (r);

    }  
    else if ((localizacao.x-(r)) < 0) {
      localizacao.x = (r);

    }
    else if ((localizacao.y + (r)) > height) {
      localizacao.y = height - (r);

    }
    else if ((localizacao.y -(r)) < 0) {
      localizacao.y = r;

    }
  }

}

interface JavaScript {}

void bindJavascript(JavaScript script) {
js = script;
}

有什么想法如何做到这一点吗？提前致谢。

Answer 1

好吧，问题是，如果您通过 file://协议(protocol)在本地查看网站，则无法读取本地文件(又名发送 XMLHttpRequests，简称 XHR)。原因可能是因为否则很容易诱骗人们在本地打开网站，然后访问他们的所有文件，我猜。

有很多方法可以解决这个问题，最简单的方法是运行本地服务器，就像处理一样，例如在 JavaScript 模式下测试processing.js 草图时。处理还允许您定义自己的 html/js/ccc 来加载，而不是默认模板。所以也许这也是一个快速的解决方案。

通过在 JavaScript 模式下运行处理，您可以找到所需的所有选项。然后您将看到一个 JavaScript 菜单，您可以在其中定义模板和服务器设置。

另一种方法是将其上传到某个地方。 (这种方法的优点是允许您在不同的设备(例如智能手机/平板电脑等)或其他人上轻松测试它)除了您可以用来测试它的许多“传统”免费/付费网络托管服务之外，还有值得注意的替代方案是

• Google Drive/Dropbox 允许您将静态内容托管为网站
• tumblr 也托管静态内容，但维护起来比第一个选项麻烦一些
• Github 也可以做同样的事情，但到目前为止我自己从未尝试过，所以我无法告诉你具体如何设置。
• Heroku 为小型项目免费提供动态内容托管，以防您想要进行一些服务器端脚本编写。

另一个问题也可能是，如果您从另一个域请求文件，如果服务器不支持，XHR 也可能会失败，因为除非服务器特别允许，否则默认情况下它会在浏览器中被阻止。如果您从客户端脚本发送这些请求，这就是一个问题，因为这又是一个危险的领域，人们显然在过去进行了大量的黑客攻击。

这是一个相当复杂的主题，我无法公正地解释它，但如果您想了解更多相关信息，“CORS”和“XHR”是谷歌的好关键字。