Photon: Send and recieve HTTP GET/POST

Hi guys,
at the moment I'm working on a way to configure my Photon local without using the cloud. I just want to make some easy settings like switch the LED type from RGB to RGBW or just W.

Therefor I establish a TCP connection and I created an config.html file which sends GET requests like this on button click:

<input id="RGB" type=button value="RGB" onclick=loadXMLDoc(value)>

the loadXMLDoc() looks like this:

function loadXMLDoc(str) {
var http = new XMLHttpRequest();
var url = "http://192.168.178.28?" + str;
var params = str;
http.open('GET', url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function() {
if(http.status == 200) {
window.alert(http.responseText);}

Everything works as expected. I can trace the request with Wireshark. On the Photon side I can simply parse for the parameter and send back an HTTP response like this:

client.println("HTTP/1.1 200 OK\r\n");
client.println("Content-Type: text/html; charset=UTF-8");
client.println("\r\n");

In the next step I want to send data from my Photon to my config.html file. I tried the same response as seen above and simply added

client.println("Placeholder for Data");

I expected to see my data like this in the html:

window.alert(http.responseText)

But it is always empty no matter what I try to send. Do you guys know how to solve this?

I guess in the response header you should to tell your client that there actually will be some data content by stating the Content-Length in the entity header portion.
You also don’t want an extra blank line after HTTP/1.1 200 OK since that would terminate the header prematurely.

Try

  char rspText[]  = "Placeholder for Data";

  client.println("HTTP/1.1 200 OK");  // mark the lack of \r\n here to avoid early termination
  client.println("Content-Type: text/html; charset=UTF-8");
  client.printlnf("Content-Length: %d", strlen(rspText));
  client.println("\r\n");
1 Like

Thank you for your help @ScruffR But I'm somehow still struggling with this.

char rspText = "Placeholder for Data";
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/plain");
client.printlnf("Content-Length: %d", strlen(rspText));
client.println();
client.print(rspText);

The code above does exactly what I want. I can trace the response with Wireshark and see exactly the string as I send it. My problem is how to save this string on the html side using javascript?
Also I changed my load function into this:

function loadXMLDoc(str) {
var url = "http://192.168.178.37?" + str;
var http = new XMLHttpRequest();
http.onreadystatechange = function() {
if (http.readyState === 4) {
window.alert(http.response);}}
http.open('GET', url, true);
http.send();
}

The window.alert(http.response) is executed but it is empty. So there must be an response because the http.readyState is correct. But http.response which I think should contain my string from rspText is still empty. Is there any other way I can solve this?

Ok I finally solved this problem it was all about CORS problems. I had to Disable Local File Restrictions in Safari…

1 Like