reading REST API response calls in JQuery

Official Hardware Classic Yún
1

Hi,
I am using the REST API on my Yun to make a servo move remotely i.e. if the get request includes a keyword move the servo x amount and then back again.
I have a webpage hosted on a separate domain where I'm using JQuery to pick up the button press on the HTML and do the GET request to my Yun which is exposed through my firewall with port forwarding.
All is working great.
What I'm struggling with is to get a response from the Yun and to process this in JQuery to present back to the originating website that the call was successful.
I've seen some guidance that I have have to code the HTTP response manually which I've done, and also cross domain issue with JQuery which seems to be where I"m stuck.
Has anyone implemented something similar or have any guidance they can share?
Thanks in advance!

2

http://forum.arduino.cc/index.php?topic=217756.msg1591479#msg1591479

In this demo I have used AngularJS, but you can choose your favorite technology (JQuery, Zepto, Backbone, and so on) since you will just need to make a GET request to move a servo.

3

Thanks sonnyyu - I appreciate the continued help!
Where I think my project is different from yours is that I'm making the call to the servo over the web, not my lan.
The web page is hosted by a third party and makes the get call to my Yun.
The Yun turns the servo x degress and then turns it back and I can't physically see it to know if the request was successful.

If you were in another room and moved one of the slider controls on your web page how would you know if the request was successful and the servo had moved?
I can't see in your code where an output is provided to client, I can only see the get call.
Thanks

4

It is not my code, It is Fabio Biondi's.

Javascript debug:

Firefox: JavaScript Debugger and Profiler : Firebug

Chrome: Debugging JavaScript - Chrome DevTools — Go

At your javascript code insert "console.log()" or "alert()"

Post your further question at javascript forum.

5

What I'm struggling with is to get a response from the Yun and to process this in JQuery to present back to the originating website that the call was successful.
I've seen some guidance that I have have to code the HTTP response manually which I've done, and also cross domain issue with JQuery which seems to be where I"m stuck.

To make Cross-domain jQuery.Ajax call need Cross-Origin Resource Sharing turn on.
Linino use uHTTPd as web server, I doubt it supports Cross-Origin Resource Sharing, upgrade it to Apache might be the way to go.

Header set Access-Control-Allow-Origin "*"
6

Plan B: JSONP

  • JSONP
  • JQuery
  • PHP
  • Arduino C
7

I've resolved this with JSONP

HTTP header in the Sketch:

client.println("Status:200");
client.println("Content-Type: application/javascript");
client.println();
client.println("myFunction({'response':'yes'})");

JQuery:

$.ajax({
	url: "http://myurl.org/arduino/x",
	dataType: "jsonp",
	jsonp: 'jsonp',
	jsonpCallback:'myFunction'
    }).done(function(e) {
	 $('.output').text(e.response + " - It looks like I was able to do that");
    }).fail(function() {
	 $('.output').text("Nope - I couldn't do it");
    });
  });

The formatting of the JSONP data in the header and the jsonpCallback parameter were the missing parts.
Works like a charm now.

Thanks again for the help

8

OP does very nice job. The jsonp seem to be the way to go.

Here are two more backup plans:

Plan C:
Setting up a reverse proxy on web server, will allow the browser to use relative paths for the Ajax requests, while the server would be acting as a proxy to any remote location( Arduino Yun).

Plan D:
iframe, use document.domain = "arduinolocal.com";