How can I put the element of array in the txt file to the corresponding "div" of html file

Archive
1

In my last post http://www.tinyclr.com/forum/topic?id=10411&page=2#msg110067 , harleydk gave the me the methed of jquery to retrieve the element of array in txt file and to put the element of array to the corresponding “div” of html file. Thank you for harleydk’s help again!!! I have a very good webpag of heating system now (see picture 1 as follow). the 16 temperature(yellow color) run well in the webpage and the value of 16 temperature will be refreshed each 5 second.

I have also tried the method of AJAX XMLHttpRequest, I want to know, how the AJAX XMLHttpRequest works. In the picture 2, you can see a array in the above, the array is the content of txt file (data.txt), 16 temperature values are in the array and I can see that they are refreshed each 5 second. I can only retrieve the complete array of the txt file, but I don’t know how to put the 16 temperature-elements of array to the corresponding “div” of html file. Can you help me and give me some suggestion.

The codes of this picture-2-webpage is as follow:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Ajax</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<script type="text/javascript">

		    function Ajax() {
		        var $http,$self = arguments.callee;

		        if (window.XMLHttpRequest) {
		            $http = new XMLHttpRequest();
		        } else if (window.ActiveXObject) {
		            try {
		                $http = new ActiveXObject('Msxml2.XMLHTTP');
		            } catch (e) {
		                $http = new ActiveXObject('Microsoft.XMLHTTP');
		            }
		        }

		        if ($http) {
		            $http.onreadystatechange = function () {
		                if (/4|^complete$/.test($http.readyState)) {
		                    document.getElementById('ReloadThis').innerHTML = $http.responseText;
		                    setTimeout(function () { $self(); }, 5000);
		                }
		            };
		            $http.open('GET', 'data.txt', true);
		            $http.send(null);
		        }

		    }

		</script>

</head>

<body>
        <script type="text/javascript">
	    setTimeout(function () { Ajax(); }, 5000);
	    </script>

        <div style="background:url(TYP400101_PNG.dat) no-repeat;width:1512px;height:794px">
		<div id="ReloadThis">Default text</div>
        </div>

	</body>
</html>
2

I have finished my destination. I can use AJAX XMLHttpRequest ro retrieve the data from a txt file. but I still have a problem. The follow is the homepage html codes:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Ajax</title>
        <link rel="stylesheet" type="text/css" href="index_styling.css" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<script type="text/javascript">

		    function Ajax() {
		        var $http, $self = arguments.callee;

		        if (window.XMLHttpRequest) {
		            $http = new XMLHttpRequest();
		        } else if (window.ActiveXObject) {
		            try {
		                $http = new ActiveXObject('Msxml2.XMLHTTP');
		            } catch (e) {
		                $http = new ActiveXObject('Microsoft.XMLHTTP');
		            }
		        }

		        if ($http) {
		            $http.onreadystatechange = function () {
		                if (/4|^complete$/.test($http.readyState)) {

		                    var JSONObject = JSON.parse($http.responseText);

		                    document.getElementById('T1').innerHTML = "T1: " + JSONObject.T1;
		                    document.getElementById('T2').innerHTML = "T2: " + JSONObject.T2;
		                    document.getElementById('T3').innerHTML = "T3: " + JSONObject.T3;
		                    document.getElementById('T4').innerHTML = "T4: " + JSONObject.T4;
		                    document.getElementById('T5').innerHTML = "T5: " + JSONObject.T5;
		                    document.getElementById('T6').innerHTML = "T6: " + JSONObject.T6;
		                    document.getElementById('T7').innerHTML = "T7: " + JSONObject.T7;
		                    document.getElementById('T8').innerHTML = "T8: " + JSONObject.T8;
		                    document.getElementById('T9').innerHTML = "T9: " + JSONObject.T9;
		                    document.getElementById('T10').innerHTML = "T10: " + JSONObject.T10;
		                    document.getElementById('T11').innerHTML = "T11: " + JSONObject.T11;
		                    document.getElementById('T12').innerHTML = "T12: " + JSONObject.T12;
		                    document.getElementById('T13').innerHTML = "T13: " + JSONObject.T13;
		                    document.getElementById('T14').innerHTML = "T14: " + JSONObject.T14;
		                    document.getElementById('T15').innerHTML = "T15: " + JSONObject.T15;
		                    document.getElementById('T16').innerHTML = "T16: " + JSONObject.T16;

		                    setTimeout(function () { $self(); }, 5000);
		                }
		            };
		            $http.open('GET', 'data.txt', true);
		            $http.send(null);
		        }

		    }

		</script>

	</head>
	<body>

		<script type="text/javascript">
		    setTimeout(function () { Ajax(); }, 5000);
		</script>
<div style="background:url(TYP400101_PNG.dat) no-repeat;width:1512px;height:794px">
		<div id="T1"></div>
        <div id="T2"></div>
        <div id="T3"></div>
        <div id="T4"></div>
        <div id="T5"></div>
        <div id="T6"></div>
        <div id="T7"></div>
        <div id="T8"></div>
        <div id="T9"></div>
        <div id="T10"></div>
        <div id="T11"></div>
        <div id="T12"></div>
        <div id="T13"></div>
        <div id="T14"></div>
        <div id="T15"></div>
        <div id="T16"></div>
</div>
	</body>
</html>

the data.txt is as follow:

{ "T1": "P1_", "T2": "P2_", "T3": "P3_", "T4": "P4_", "T5": "P5_", "T6": "P6_", "T7": "P7_", "T8": "P8_",
  "T9": "P9_", "T10": "P10_", "T11": "P11_", "T12": "P12_", "T13": "P13_", "T14": "P14_", "T15": "P15_", "T16": "P16_" }

I use Win7.
The above codes can only run in firefox and google chrome, the 16 temperature value will be refreshed every 5 second(see picture, it is running in firefox). but the codes can’t in IE9 and it stops in IE9. I have also tried the codes in IE8(Computer is Vistasystem), but it stops, doesn’t refresh.

I checked the codes and tried many times, I find that:

if I chang the

$http.open('GET', 'data.txt', true);

like this:

$http.open('GET', 'data.txt' + '?' + new Date().getTime(), true);

After adding the

+ new Date().getTime()

, the webpage can run in firefox, google chrome and IE9 three webbrowser now, but I can’t find any “Data Time” in mywebpage.

I don’t know why, can you tell me what is the problem.

3

I don’t know the exact way to deal with this, but it seems to me to now be a caching problem - the browser is saying that unless the URL is different, there’s no need to re-download it. Because you added the extra portion to your request that is “different” each time, it just hands it off and makes the request; otherwise it just gives you the same as you had before

4

@ andre.m -

actually I got the codes from WebDeveloper.com Forums , I have made some changes to pass my project.

The Registered User thraddash has written the example codes for IE7, IE8, FF, Chrome, etc etc…

I has also fund that it is just “changing the url to a page relative to the domain”, but the method make the webpage run in IE9. If I don’t write “+ new Date().getTime()”, the webpage can not run in IE9.

5

Thank you for your suggestion, I always learn html and javascript from http://w3schools.com, It is really a good webpage for me.

6

I have tried the debugging of IE, but I haven’t fund the problem. Actually I don’t know how to debug the IE and find the bug correctly.

I found some interesting Using XMLHttpRequest - Web APIs | MDN

the chapter “Cross-site XMLHttpRequest” and “Bypassing the cache”. I guess this refers to my problem.

7

@ andre.m -

…sorry, I don’t know, I guess, just guess…

I haven’t found the problem, so … I guess. :stuck_out_tongue:

8

I mean I must write

$http.open('GET', 'data.txt' + '?' + new Date().getTime(), true);

in my project, so that the webpage can run/refreshed in Firefox, google chrome and IE.

If I write

$http.open('GET', 'data.txt', true);

, the webpage can olny run/refreshed in Firefox and google chrome.

I think, the “Bypassing the cache”( Using XMLHttpRequest - Web APIs | MDN ) refers to my problem, that’s why I need write “+ ‘?’ + new Date().getTime()” for xmlhttprequest.

9

It is the “bypassing the cache” issue that you saw in the Mozilla link you sent earlier.

It is SAFE to use some form of value after “?” to make the URL unique, you don’t necessarily need the time value there you could simply make it a counter you increment each time.

So you have an acceptable workaround here. I’m not sure what more you might want? Remember, all this is doing is passing from your browser to your Fez a value that you don’t use in your Fez, you don’t need to code anything special for it on the Fez end.