I've been working with HTML and javascript to create graphical web pages to display data from my Siemens S7 1500 PLC. I've been using a $.getJSON mand to successfully read values from the PLC when the web page that requests the information is served up by the PLC web server and in the same directory as the file with the JSON structure and all of the desired values.

I have a PC connected to my PLC via ethernet and wish to run a web page locally on the PC and read the values served up by a page from the PLC web server.

My current code for reading the values when the data to be read is in the same directory on the web server looks like:

<script type="text/javascript">
$(document).ready(function(){

    $.ajaxSetup({ cache: false });

    setInterval(function() {
        $.getJSON("inputs.htm", function(data){

            // Variable Declaration
            engineSpeed =                       data.engineSpeed;
            engineFuelLevelScaled =             data.engineFuelLevelScaled;
            powerEndDischargePressurePSI =      data.powerEndDischargePressurePSI;
            powerEndDischargeFlowRateBBLM =     data.powerEndDischargeFlowRateBBLM;
            powerEndSuctionPressurePSI =        data.powerEndSuctionPressurePSI;
        });

    },1000);
});

</script>

The "inputs.htm" file is simply:

{
"engineSpeed" : ":="WebData".engineSpeed:",
"engineFuelLevelScaled" : ":="WebData".engineFuelLevelScaled:",
"powerEndDischargePressurePSI" : ":="WebData".powerEndDischargePressurePSI:",
"powerEndDischargeFlowRateBBLM" : ":="WebData".powerEndDischargeFlowRateBBLM:",
"powerEndSuctionPressurePSI" : ":="WebData".powerEndSuctionPressurePSI:"
}

where "WebData" is a data block being updated with the values on my PLC.

I'm happy with how this has worked, but when I try to run a page locally to look at the "inputs.htm" page, it hasn't worked.

My PLC has the IP address 172.17.2.11 and I've changed the $.getJSON to:

$.getJSON("http://172.17.2.11/awp/GeminiOnline/inputs.htm", function(data){

and

$.getJSON("172.17.2.11/awp/GeminiOnline/inputs.htm", function(data){

though neither have worked. I know these are the correct web addresses as I can go to either of them and read the values I'm trying to access.

I have set the permissions on the web server of my PLC to allow all users full access so the login is no longer required. I'm wondering if there is a step I'm missing or some limitation of the $.getJSON structure that is preventing me from reading like this.

Any input would be appreciated. If you have any other methods by which I could read the current PLC values in a page hosted locally on the PC that would also be helpful.

Thanks in advance.

I've been working with HTML and javascript to create graphical web pages to display data from my Siemens S7 1500 PLC. I've been using a $.getJSON mand to successfully read values from the PLC when the web page that requests the information is served up by the PLC web server and in the same directory as the file with the JSON structure and all of the desired values.

I have a PC connected to my PLC via ethernet and wish to run a web page locally on the PC and read the values served up by a page from the PLC web server.

My current code for reading the values when the data to be read is in the same directory on the web server looks like:

<script type="text/javascript">
$(document).ready(function(){

    $.ajaxSetup({ cache: false });

    setInterval(function() {
        $.getJSON("inputs.htm", function(data){

            // Variable Declaration
            engineSpeed =                       data.engineSpeed;
            engineFuelLevelScaled =             data.engineFuelLevelScaled;
            powerEndDischargePressurePSI =      data.powerEndDischargePressurePSI;
            powerEndDischargeFlowRateBBLM =     data.powerEndDischargeFlowRateBBLM;
            powerEndSuctionPressurePSI =        data.powerEndSuctionPressurePSI;
        });

    },1000);
});

</script>

The "inputs.htm" file is simply:

{
"engineSpeed" : ":="WebData".engineSpeed:",
"engineFuelLevelScaled" : ":="WebData".engineFuelLevelScaled:",
"powerEndDischargePressurePSI" : ":="WebData".powerEndDischargePressurePSI:",
"powerEndDischargeFlowRateBBLM" : ":="WebData".powerEndDischargeFlowRateBBLM:",
"powerEndSuctionPressurePSI" : ":="WebData".powerEndSuctionPressurePSI:"
}

where "WebData" is a data block being updated with the values on my PLC.

I'm happy with how this has worked, but when I try to run a page locally to look at the "inputs.htm" page, it hasn't worked.

My PLC has the IP address 172.17.2.11 and I've changed the $.getJSON to:

$.getJSON("http://172.17.2.11/awp/GeminiOnline/inputs.htm", function(data){

and

$.getJSON("172.17.2.11/awp/GeminiOnline/inputs.htm", function(data){

though neither have worked. I know these are the correct web addresses as I can go to either of them and read the values I'm trying to access.

I have set the permissions on the web server of my PLC to allow all users full access so the login is no longer required. I'm wondering if there is a step I'm missing or some limitation of the $.getJSON structure that is preventing me from reading like this.

Any input would be appreciated. If you have any other methods by which I could read the current PLC values in a page hosted locally on the PC that would also be helpful.

Thanks in advance.

• javascript
• html
• json
• plc
• siemens

Share Improve this question Follow edited Dec 23, 2018 at 8:44 ZF007 3,74188 gold badges3232 silver badges5252 bronze badges asked Sep 16, 2015 at 19:48 Ryan YRyan Y 10111 gold badge11 silver badge66 bronze badges 8

• what about CORS? you can't fetch stuff from a "foreign" website. – Marc B Commented Sep 16, 2015 at 19:53
• you can use JSONp if you can't set headers in that webserver, just wrap ex, "console.log(" and ")" around the "page" contents you already have, then point a script tag at the server instead of using ajax. – dandavis Commented Sep 16, 2015 at 19:58
• @dandavis I'm relatively certain I can't set the headers for my web server. Could you elaborate on how to do what you said or do you have a link that might be able to help me out? Thanks. – Ryan Y Commented Sep 16, 2015 at 23:29
• you're close. modify your ajax according to learn.jquery./ajax/working-with-jsonp, then literally replace { with callback({ and } with }); on inputs.htm and you should be up and running – dandavis Commented Sep 17, 2015 at 1:13
• @dandavis Thanks for your help! – Ryan Y Commented Sep 21, 2015 at 17:00

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 3

I did end up solving my problem, though it required a pletely different method of attacking it. It wasn't liking my cross domain requests and try as I might to get JSONp to work, I couldn't quite manage it. With the help of a colleague we developed the following:

<script>
    function httpGet(theUrl)
    {
    // Calls the initial request
        xmlhttp = new XMLHttpRequest();
        var date = new Date();
        xmlhttp.open("GET", theUrl + "?" + date.getTime(), false ); // Note that the + "?" + data.getTime() is used to trick the browser from using the cached results from a previous page request
        xmlhttp.send(); 

        // Sets a timing interval
        setInterval(function(){
        // If the request was successful, then parse the string and start a new request
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                // Extract the JSON String
                var jsonString = xmlhttp.responseText;
                data = $.parseJSON(jsonString);
                //YOUR CODE CAN GO HERE, USING THE DATA AS YOU WOULD REGULARLY
            }
        }, 1000);
    }

    httpGet("http://172.17.2.10/awp/GeminiOnline/inputs.htm");

Anyways, using the XMLHttpRequest() and the other functions I was able to read the data from my other page, just like I had with the .getJSON() from before.