The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> issues with XMLHttpRequest [was "test"]
gc-malcolm
post Jun 13 2018, 05:07 AM
Post #1





Group: Members
Posts: 8
Joined: 8-May 18
Member No.: 26,641



Sorry about the name it should be " issues with XMLHttpRequest" but I had some issues creating this post and tried to make a shorter test post then found I couldn't delete that ……...

I am hoping that there is Sherlock out there that can say I know what this is!

Background

I am creating a management program for iSpy alerts for my own use and have created an example php that uses XMLHttpRequest to read file size and read file content. The php has a recursive function that runs on a timeout that triggers a check of the file size and then a read of the file. The content of the file is written to a text area on the web page.

Sometimes it works and sometimes NOT. I have found that in Firefox, Edge and Chrome my php will often display data that is incorrect, that is, the data is from an earlier read, the file being read can be edited and saved but the output from the php does not match the most recent content in the file. Once this occurs it seems to then not work in any browser Chrome Firefox or Edge until I edit the php save that and restart the weeb page, at which point it MAY come good, muck around for a bit, editing saving and it ultimately it works again until it eventually breaks.

The browser and web server are on the same machine. There is no intent to try and make this work over the wider internet, I understand that reading (writing) files on the Client side could be somewhat .ah. bad

I have attached file_ops_example.php that intermittently triggers this "issue".

Environment

PHP Dev Server and Apache
webspace c:\localweb called edsa-localweb which is hard coded in the file_ops_example.php and would need to be changed for other environments should you wish to try it
a text file alert.txt in the localweb directory ( only needs to contain a single character )


Method
in a browser launch file_ops_eample.php and a text box is displayed on the web page, a javascript function is run in the php that recursively triggers a read of the alert.txt file every second and echos the content to the web page text box

repeat
edit alert.txt and change the content of the file ( it only needs to be one or more characters in my final app its only reading a time stamp nnnnnnnnnnn )

eventually the content being displayed may stop being what you are putting in the text file and it will be something from earlier

change the browser and try the new browser the information displayed by the browser may or may not be correct, but probably incorrect


I found that I can fix the issue in Edge by editing the function checkStatus in file_ops_eample.php and removing the // in front of the line debug... saving the file and tehn refeshing the web page in the browser this puts some extra text on the screen ( a file size) then add the // to the debug line save and refresh the browser and hey presto it's ok again, until it breaks.

Conclusion

I suspect that this is a security issue that is triggered after some time and that the saving of the php with a different filesize somehow resolves some conflict. Or it could be voodoo.

Ultimately I want to use Chrome ( where this problem manifests the most ) Why chrome? Because I am able to display video from a camera in chrome, not in other browsers, and I can cast chrome sticking the web page on a television, "flashing Warning Will Robinson". (the flashing warning is not demonstrated in the sample program )

So, I hope that my explanation has been detailed enough and that someone can offer a "fix", or a reason for what's happening.


alert.txt
anytext (typically nnnnnnnnn for seconds )

file_ops_example.php

CODE





<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="css/style_a.css">

<meta charset="utf-8">
<title>file_ops</title>    

<!--
About manage parse file and determine
-->

<body>

<br><br><br><br><br>read file and write it to text box<br><br><br><br>

<form name ="myform2">
<textarea name="txt_file_content" cols="50" rows="20"></textarea>


<script>

var seconds =  new Date() * 1;

var previous_seconds = seconds;



// ==========================================  
function checkStatus()
{
    root = "http://127.0.0.1/edsa-localweb/";
    
    alert_file = root + "alert.txt";    

    var fileSize = getFileSize(alert_file);

    var timestamp = "";

    //debug("fileSize = " + fileSize);   //   uncomment this line and save to ""fix "" the bug/issue
                                          // refresh the web page

    if (fileSize > 0)
    {
        timestamp = readTextFile(alert_file);
        var time_string = "";
        appendToLog(timestamp );
    
    }

}    
// ==========================================
function getFileSize(file)
{

    var fileSize = '';
    var http = new XMLHttpRequest();
    http.open("GET", file, false); // false = Synchronous
    http.onreadystatechange = function ()
    {
        if(http.readyState === 4)
        {
            if(http.status === 200  )
            {    
                fileSize = http.getResponseHeader('content-length');
            }
        }
    }
    http.send(null);
    http.abort();
    return   fileSize;
}
// ==========================================
function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    allText = "";

    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                allText = rawFile.responseText;        
            }
        }
    }
    rawFile.send(null);
    rawFile.abort();
    return allText;
}
// ==========================================
function appendToLog(mytext)
{
    document.myform2.txt_file_content.value += "\n" + mytext;
    document.myform2.txt_file_content.scrollTop = document.myform2.txt_file_content.scrollHeight +5;
    

}
// ==========================================
function debug(mystring)
{
    document.myform2.txt_file_content.value += "\ndebug "+ mystring;
}


// ==========================================
function instance()
{
    // accurate timer  
    //  https://www.sitepoint.com/creating-accurate-timers-in-javascript/
    // so forget about the accuracy for the momeent and just run every second ish

    checkStatus();
    
    // call yourself again for a futher 1 second
    window.setTimeout(instance,1000);
}
// this next line calls instance which is recursive  and that inturn calls checkStatus()  
window.setTimeout(instance,1000);




</script>

</body>

</html>


This post has been edited by Christian J: Jun 13 2018, 07:50 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
gc-malcolm
post Jun 13 2018, 02:39 PM
Post #2





Group: Members
Posts: 8
Joined: 8-May 18
Member No.: 26,641





I tried posting the whole lot but I got a message saying something to the effect it needs a post.

So I then created a test post, saying "this is a test", that was a bad move, users can't delete posts.

So then I put my original text in the "test post".

Then I couldn't change the title.

Thanks for changing the name for me.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 03:37 AM