Reading a JSON structure from a web server page on

Question

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 command 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.

Answer 1

I did end up solving my problem, though it required a completely 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.