[RISOLTO] Controllo da web con JSONP e jQuery

finora ho utilizzato arduino come webserver per leggere lo stato dei sensori caricando le pagine html da SD ma è molto lento, ora sto provando a far comunicare arduino con una pagina web tramite jsonp ma non riesco a capire cosa sbaglio, la risposta è sempre una pagina bianca

pagina html

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <script type="text/javascript" src="jquery-1.4.min.js"></script>
  <script type="text/javascript">
   $(document).ready(function(){
   $.getJSON("http://192.168.1.100?callback=?", function(data){
    for(i=0; i<5; i++){
      var content = data.Analog[i].valore;
      content += '
';
      $('div.pinA').append(content);
    }
    for(i=0; i<8; i++){
      var content = data.Digital[i].valore;
      content += '
';
      $('div.pinD').append(content);
    }
  });
});
</script>
</head>
<body>
   <!--  contenuto html -->
				<div class="pinA">
				</div>
				<div class="pinD">
				</div>
</body>

lato server invece ho

client.print('

leggistato({
	"Analog": [
    {"valore":100},
    {"valore":101},
    {"valore":102},
    {"valore":103},
    {"valore":104}
  ],
  "Digital": [
    {"valore":0},
    {"valore":0},
    {"valore":0},
    {"valore":0},
    {"valore":0},
    {"valore":0},
    {"valore":0},
    {"valore":0}
  ]
})

');

pablos: Non ho capito cosa hai fatto, questa pagina html dove si trova? Sul PC? Se è così non funziona, la pagina deve trovarsi sull'host.

Si la pagina si trova sul pc, ho letto che usando jsonp si possono fare richieste json anche su domini diversi, o mi sbaglio?

pablos: È possibile in alcuni casi usando protocolli adeguati... Puoi mettere il link di quello che hai letto?

Eccolo http://www.cosenonjaviste.it/jsonp-e-jquery-conosciamoli-meglio/

Ciao,

devi verificare (o aggiungere) che la risposta di arduino contenga l’header HTTP “Access-Control-Allow-Origin: *” e che il mime type della risposta sia “application/javascript”

Bye, Ste

Ilste: Ciao,

devi verificare (o aggiungere) che la risposta di arduino contenga l'header HTTP "Access-Control-Allow-Origin: *" e che il mime type della risposta sia "application/javascript"

Bye, Ste

Come posso farlo?

Ciao,

con chrome premi F12, poi selezioni network e fai la richiesta jsonp. selezioni l'url del jsonp e poi il tab headers e li puoi vedere quali headers sono stati mandati da arduino.

Bye, Ste

Ilste: Ciao,

con chrome premi F12, poi selezioni network e fai la richiesta jsonp. selezioni l'url del jsonp e poi il tab headers e li puoi vedere quali headers sono stati mandati da arduino.

Bye, Ste

Non c'è nessun riferimento ad allow origin. Comunque dalla console leggo "referenceerror leggistato is not defined"

Dopo svariati tentativi son riuscito a risolvere il problema. :D

Però come non ce lo dici ... ::)

pablos:
Però come non ce lo dici … ::slight_smile:

Certo, ecco i codici funzionanti, come dicevi tu ho dovuto mettere la pagina html su un sito internet.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>test jsonp</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
   <script>
$(document).ready(function() {
  setInterval(getArduino,1000);
});
function getArduino() {
  $.getJSON("http://192.168.1.150/&callback=?", leggistato);
}
function leggistato(data) {
  //console.log(data);
  var content = 'A0: '+data.Analog[0].valore;
  $('div.pinA').html(content);
}
</script>
</head>
<body>
   <!--  contenuto html -->
    analog
 <div class="pinA">
 </div>
</body>
</html>

Arduino

#include <SPI.h>
#include <Ethernet.h>
// size of buffer used to capture HTTP requests
#define REQ_BUF_SZ 50
// MAC address from Ethernet shield sticker under board
byte mac[] = { 0x90, 0xA2, 0xDA, 0x0F, 0x9D, 0x6A }; //Creao un array di byte per specificare il mac address
IPAddress ip(192, 168, 1, 150); //creo un array di byte per specificare l'indirizzo ip
EthernetServer server(80);  // create a server at port 80
EthernetClient client;
char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string
char req_index = 0;              // index into HTTP_req buffer
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
void setup()
{
  pinMode(10, OUTPUT); // disable Ethernet chip
  digitalWrite(10, HIGH);
  Serial.begin(9600);       // for debugging
  Ethernet.begin(mac, ip); // initialize Ethernet device
  server.begin(); // start to listen for clients
}
//setup pin ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
void loop()
{
  client = server.available();  // try to get client
  if (client) {  // got client?
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {   // client data available to read
        char c = client.read(); // read 1 byte (character) from client limit the size of the stored received HTTP request
        // buffer first part of HTTP request in HTTP_req array (string) leave last element in array as 0 to null terminate string (REQ_BUF_SZ - 1)
        Serial.print(c);
        if (req_index < (REQ_BUF_SZ - 1)) {
          HTTP_req[req_index] = c;          // save HTTP request character
          req_index++;
        }
        // last line of client request is blank and ends with \n respond to client only after last line received
        if (c == '\n' && currentLineIsBlank) {
          // display received HTTP request on serial port
          Serial.println("---richiesta GET---");
          Serial.println(HTTP_req);
          // send a standard http response header
          client.println(F("HTTP/1.1 200 OK"));
          if (StrContains(HTTP_req, "callback")) {
            client.println(F("Content-Type: text/javascript"));
            client.println(F("Connection: close"));
            client.println();
            client.print(F("leggistato({\"Analog\":["));
            for (int i=0; i<16; i++) {
              client.print(F("{\"valore\":"));
              client.print(analogRead(i));
              if (i<15) {  client.print(F("},"));  }
              else {  client.print(F("}"));  }
            }
            client.print(F("]});"));
            client.println();
          }
          req_index = 0; // reset buffer index and all buffer elements to 0
          StrClear(HTTP_req, REQ_BUF_SZ);
          break;
        }
        if (c == '\n') { // every line of text received from the client ends with \r\n
          currentLineIsBlank = true; // last character on line of received text starting new line with next character read
        }
        else if (c != '\r') {
          currentLineIsBlank = false; // a text character was received from client
        }
      } // end if (client.available())
    } // end while (client.connected())
    delay(1); // give the web browser time to receive the data
    client.stop(); // close the connection
  } // end if (client)
}
// sets every element of str to 0 (clears array) ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
void StrClear(char * str, char length) {
  for (int i = 0; i < length; i++) {
    str[i] = 0;
  }
}
// searches for the string sfind in the string str, returns 1 if string found, returns 0 if string not found ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
char StrContains(char * str, char * sfind) {
  char found = 0;
  char index = 0;
  char len;
  len = strlen(str);
  if (strlen(sfind) > len) {
    return 0;
  }
  while (index < len) {
    if (str[index] == sfind[found]) {
      found++;
      if (strlen(sfind) == found) {
        return 1;
      }
    }
    else {
      found = 0;
    }
    index++;
  }
  return 0;
}

Perchè su un sito internet ? anche sul browser di un qualunque pc va bene.

Hai fastweb in fibra, bene, sei riuscito anche a fare i forward con quei router maledetti :) Togli quell'ip dall'html, 2.xxx.xxx.xxx meglio non farlo sapere per la tua privacy.

ciao