Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,102
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question Error on Ajax loading

    I use the following code to load an external text file...
    Code:
    var myAjax = {
      TextInformation : '',
    
      myAjaxIO : function (U, V) { //LA MOD String Version. A tiny ajax library.  by, DanDavis
        var X = !window.XMLHttpRequest 
    	  ? new ActiveXObject('Microsoft.XMLHTTP') 
    	  : new XMLHttpRequest();
    
        X.open(V ? 'PUT' : 'GET', U, false );
    //  X.open(V ? 'PUT' : 'GET', U, true);
    
        X.setRequestHeader('Content-Type', 'text/html');
        X.send(V ? V : '');
        return X.responseText;
      },
      doLoad : function (filename) { this.TextInformation = this.myAjaxIO(filename); },
      getTextInfo : function () { // alert(this.TextInformation);  // for testing purposes
        return this.TextInformation }
    }
    I appears to load the information correctly, but lately, when I load a text file, I get the following error...

    Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.
    For more help XMLHttpRequest Standard
    When I change the "x.open" statement from false to true per the recommendation (area highlighted in red),
    the error goes away, but the text information does not load.
    No error but no data either

    How do I get rid of the error message in the error console?
    Has something changed in the ajax world that I'm not accounting for?
    The error does not appear fatal, but I don't know all possible consequences.
    Last edited by jmrker; 06-23-2014 at 08:31 PM.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    If you set it to true (which is asynchronous), you need to wait until the response is ready.

    Code:
    var myAjax = {
      TextInformation : '',
    
      myAjaxIO : function (U, V, successCallback, errorCallback) { //LA MOD String Version. A tiny ajax library.  by, DanDavis
        var X = !window.XMLHttpRequest 
    	  ? new ActiveXObject('Microsoft.XMLHTTP') 
    	  : new XMLHttpRequest();
    
        X.open(V ? 'PUT' : 'GET', U, true);
        X.onreadystatechange = function() {
          if (X.readyState === 4) {
            if (X.status === 200) {
              successCallback && successCallback(X.responseText);
            }
            else {
              errorCallback && errorCallback(X); 
            }
          }
        }
    
        X.setRequestHeader('Content-Type', 'text/html');
        X.send(V ? V : '');
        return X.responseText;
      },
      doLoad : function (filename) {
        this.myAjaxIO(filename, false, function(response) {
          this.TextInformation = response;
        }, function(xmlHttp) {
          alert('Error ' + xmlHttp.status);
        });
      },
      getTextInfo : function () { // alert(this.TextInformation);  // for testing purposes
        return this.TextInformation 
      }
    }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,102
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Well, that made a lot of sense, but the end result is the same - no errors and no display

    Here is the code you provided in a simple program (substitute your own text file on a server)
    or try it at a temporary link at: Ajax test page

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Ajax test page </title>
    </head>
    <body>
      <button onclick="myAjax.doLoad('http://www.nova.edu/~rumsey/JS/Cartoon.txt')">Load</button>
      <button onclick="document.getElementById('debug').innerHTML=myAjax.getTextInfo()">Show</button>
      <button onclick="document.getElementById('debug').innerHTML=''">Clear</button>
      <div id="debug"></div> 
    
    <script type="text/javascript">
    var myAjax = {
      TextInformation : '',
    
      myAjaxIO : function (U, V, successCallback, errorCallback) { 
        var X = !window.XMLHttpRequest 
    	  ? new ActiveXObject('Microsoft.XMLHTTP') 
    	  : new XMLHttpRequest();
        X.open(V ? 'PUT' : 'GET', U, true);
        X.onreadystatechange = function() {
          if (X.readyState === 4) {
            if (X.status === 200) {
              successCallback && successCallback(X.responseText);
            }
            else {
              errorCallback && errorCallback(X); 
            }
          }
        }
    
        X.setRequestHeader('Content-Type', 'text/html');
        X.send(V ? V : '');
        return X.responseText;
      },
      doLoad : function (filename) {
        this.myAjaxIO(filename, false, function(response) {
          this.TextInformation = response;
        }, function(xmlHttp) {
          alert('Error ' + xmlHttp.status);
        });
      },
      getTextInfo : function () { // alert(this.TextInformation);  // for testing purposes
        return this.TextInformation 
      }
    }
    </script>
    
    </body>
    </html>
    Any ideas as to why I'm screwing up?

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Why use a library ?

    <button onclick="download()">click to download</button>
    <div id="dsply"></div>
    <script>
    function download(){
    req = new XMLHttpRequest;
    req.open("get","text.txt",true);
    req.onreadystatechange = function() {
    if (req.readyState === 4){
    dsply.innerHTML = req.responseText;
    }
    }
    req.send();
    };
    </script>

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,102
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Quote Originally Posted by DaveyErwin View Post
    Why use a library ?

    <button onclick="download()">click to download</button>
    <div id="dsply"></div>
    <script>
    function download(){
    req = new XMLHttpRequest;
    req.open("get","text.txt",true);
    req.onreadystatechange = function() {
    if (req.readyState === 4){
    dsply.innerHTML = req.responseText;
    }
    }
    req.send();
    };
    </script>
    Well, to tell the truth, I didn't think I was using a library.
    I thought I was creating an object to load and hold multiple files of text.
    At least that was my goal.
    Then I could access them with an object name ('myAjax', etc.)

    I'll try incorporating your bit of code into my earlier post.
    Thank for the input.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You are not using a library.

    Anyway, you have a syntax error. You're missing the closing bracket } for the function.

    Code:
    doLoad : function (filename) { this.myAjaxIO(filename) { this.TextInformation = response; } },
    Wait, that line doesn't make any sense. That's still wrong. I think this is what you need:
    Code:
    var myAjax = {
      TextInformation : '',
      myAjaxIO : function (filename){
        var ajax = this;
        var req = new XMLHttpRequest;
        req.open("get",filename,true);
        req.onreadystatechange = function() {
          if (req.readyState === 4 && req.status === 200) {  ajax.TextInformation =  req.responseText; }
        }
        req.send();
      },
      doLoad : function (filename) { this.myAjaxIO(filename); },
      getTextInfo : function () { // alert(this.TextInformation);  // for testing purposes
        return this.TextInformation;
      }
    }
    Last edited by glenngv; 06-24-2014 at 08:19 PM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by jmrker View Post
    Well, to tell the truth, I didn't think I was using a library.
    I let this part confuse me.
    myAjaxIO : function (U, V) { //LA MOD String Version. A tiny ajax library. by, DanDavis

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,102
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Quote Originally Posted by DaveyErwin View Post
    I let this part confuse me.
    myAjaxIO : function (U, V) { //LA MOD String Version. A tiny ajax library. by, DanDavis
    That's OK, I stopped that approach several suggestions ago.
    I was just giving credit to the person from which I found the code in post #1.

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,102
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by glenngv View Post
    ...

    I think this is what you need:
    Code:
    var myAjax = {
      TextInformation : '',
      myAjaxIO : function (filename){
        var ajax = this;
        var req = new XMLHttpRequest;
        req.open("get",filename,true);
        req.onreadystatechange = function() {
          if (req.readyState === 4 && req.status === 200) {  ajax.TextInformation =  req.responseText; }
        }
        req.send();
      },
      doLoad : function (filename) { this.myAjaxIO(filename); },
      getTextInfo : function () { // alert(this.TextInformation);  // for testing purposes
        return this.TextInformation;
      }
    }
    That last suggestion seems to have done it.
    No errors and correct display.

    I'll post my final code if others desire to see the resolution.
    I'll study on this some more as ajax functions still appear to confuse me at times.

    Thank you very much.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •