Reading IMP inputs in browsers using AJAX and effects of various browsers

General
1

I noticed that the browsers have a large effect on how the AJAX code is supported. Does anyone have any idea why this code will work in Firefox and IE11, but not Chrome or IE10? I get an error response of 0 using IE10. I think Chrome just doe snot support AJAX extensions from local files.

function poll(){
// Construct an ajax() GET request.
// http://www.w3schools.com/jquery/ajax_ajax.asp
console.log(“Poll called”)
$.ajax({
type: “get”,
cache: false,
jsonp: false,
//crossDomain:true,
//processData: false,
url: “https://agent.electricimp.com/”+externalURL, // URL of our imp agent.
dataType: “json”, // Expect JSON-formatted response from agent.
success: function(agentMsg) { // Function to run when request succeeds.

                    // jQuery find "pin1" id and overwrite its data with "pin1" key value in agentMsg
                   	$("#pin1").html(agentMsg.input1);             
                    $("#pin2").html(agentMsg.input2);
                   
                    $("#vin").html(agentMsg.voltage);
		$("#out1").html(agentMsg.out1);
		$("#out2").html(agentMsg.out2);
                  //  updateBG(agentMsg.pin5);    // Try this if you have a photocell connected to pin 5
		 console.log("OK")
                },
                error: function(err) {
                  console.log("err = " + err.status)
		
                }

            });
        }
2

Bellancal - You’re likely seeing this issue because of cross domain issues. To resolve this, the web server you’re making the request to (i.e. your agent’s http.onrequest handler) needs to add the following headers to the response object:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Methods: POST, PUT, GET, OPTIONS

Here’s a quick example:

`
http.onrequest(function(req, res) {
// Add acccess control headers for cross domain AJAX requests
res.header(“Access-Control-Allow-Origin”, “*”)
res.header(“Access-Control-Allow-Headers”, “Origin, X-Requested-With, Content-Type, Accept”);
res.header(“Access-Control-Allow-Methods”, “POST, PUT, GET, OPTIONS”);

res.send(200, http.jsonencode({ "message": "OK" }));

});
`

3

Thanks for feedback but that still did not solve problem . I will need to try on a few other computers to see what browser settings could be causing the issue. I am sure it is on the PC side since it works from other PC and my Andriod phone. If I change the response dataType to “jsonp” then I can see the request at least go out using IE10 but then I get format errors.

4

Can you provide your agent code (at least your HTTP handler)?

I just tested the javascript you have with and without adding the access control headers to my http.onrequest handler. Without them, the request fails in Chrome… but when I add them it succeeds.

5

Here is the HTTP handler

function requestHandler(request, response) {
// “Access-Control-Allow-Origin: " allows cross-origin resource sharing
response.header(“Access-Control-Allow-Origin”, "”);
response.header(“Access-Control-Allow-Headers”, “Origin, X-Requested-With, Content-Type, Accept”);
response.header(“Access-Control-Allow-Methods”, “POST, PUT, GET, OPTIONS”);

// First, construct a JSON table with our received pin values.
local pinTable = {
“input1”: “”+_input1+"", // e.g.: “pin1” : “1"
“input2”: “”+_input2+”",
“voltage”: “”+_voltage+"" + " V", // e.g.: “voltage” : “3.274 V”
“out1”: “”+_out1+"",
“out2”: “”+_out2+"",
“LastIMP”: “”+_LastAction+"",
“LastChange”: “”+_LastChange+""
}

// the http.jsonencode(object) function takes a squirrel variable and returns a
// standardized JSON string. - https://electricimp.com/docs/api/http/jsonencode/
local jvars = http.jsonencode(pinTable);
response.send(200,jvars)

}//end function

6

I ran your JS against your Squirrel code, and everything is working on my machine :confused:

Test webpage
`

Test `

Agent Code:
`
http.onrequest(function(req, response) {
// “Access-Control-Allow-Origin: " allows cross-origin resource sharing
response.header(“Access-Control-Allow-Origin”, "”);
response.header(“Access-Control-Allow-Headers”, “Origin, X-Requested-With, Content-Type, Accept”);
response.header(“Access-Control-Allow-Methods”, “POST, PUT, GET, OPTIONS”);

// First, construct a JSON table with our received pin values.
local _input1, _input2, _voltage, _out1, _out2, _LastAction, _LastChange;

local pinTable = {
    "input1": ""+_input1+"", // e.g.: "pin1" : "1"
    "input2": ""+_input2+"",
    "voltage": ""+_voltage+"" + " V", // e.g.: "voltage" : "3.274 V"
    "out1": ""+_out1+"",
    "out2": ""+_out2+"",
    "LastIMP": ""+_LastAction+"",
    "LastChange": ""+_LastChange+""
}

// the http.jsonencode(object) function takes a squirrel variable and returns a
// standardized JSON string. - https://electricimp.com/docs/api/http/jsonencode/
local jvars = http.jsonencode(pinTable);
response.send(200,jvars)

});
`

When I load the page and look at the JS console I see the following messages:

test.html:14 Poll called 2015-09-11 13:17:13.187 test.html:34 OK

If I remove the Access-Control headers from my reponse headers I get the following when I load the page (which seems consistent with what you described):

test.html:14 Poll called 2015-09-11 13:19:45.041 test.html:1 XMLHttpRequest cannot load https://agent.electricimp.com/RO5HOrveo4I1?_=1442002784980. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 2015-09-11 13:19:45.043 test.html:37 err = 0

7

What browser are you using? It works on Edge(IE11) but not if I go back to IE10 or prior. FireFox works OK but not Chrome. Weird. But thanks for taking time to review.

8

Well you did help me to get Chrome working with your example above. I was using a different src link : src=“http://code.jquery.com/jquery-1.9.1.min.js”

When I changed to : src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js” now Chrome works for me.

SO looks like IE is still having CORS issues unless you use IE11

9

I must warn you I am a relative beginner and sometimes barely know what I am doing … ; ) but I have had some code that is stable and working for a long time now - maybe a little over a year.

I have this line

jQuery.support.cors = true;

in the javascript of my web page

and my sources are:

`

`

it is a distant memory now but I think I had found a suggestion to leave http or https from the path.

10

Thanks - seems still to not work in IE10 - are you using IE11?

11

I don’t use any version of IE. However, I just tried my page in IE10, which is installed on my Win7 PC, and my page does not load. I set IE10 back to defaults. IE10 shows various syntax errors and my Highcharts object does not load.

12

I was able to make some progress after some more investigation. I did manage to get all browsers (Chrome, Firefox, IE11, IE10) working using the suggestions above and by adding these lines in the HTML:

`

jQuery.support.cors = true; `

The first line seems to force the script to run in IE11 mode even when opened with browser IE10. Not sure if this will work with ALL lower versions of IE (9,8 etc) but at least 10 works now.

Thanks a bunch for all the suggestions - hope this saves someone some time!