Ajax's Onreadystatechange Return Uncaught Typeerror

JavaScript
1

Am a newbie to ajax and am trying create a simple ajax webpage but I run into this problem

> Uncaught TypeError: Cannot set property 'onreadystatechange' of undefined
>     at window.onload (test.js:4).

And this is the test.js page code I created

 window.onload = function(){
     'use strict';
     var ajax = getXMLHttpRequestObject();
     ajax.onreadystatechange = function(){
         if(ajax.readyState == 4){
             if((ajax.status >= 200 && ajax.status < 300) || (ajax.status == 304)){
                 document.getElementById('output').innerHTML = ajax.responseText;
             }else{
                 document.getElementById('output').innerHTML = 'Error ' + ajax.statusText;
             }
         }
     };
         document.getElementById('btn').onclick = function(){
             ajax.open('GET', 'resources/test.txt', true);
             ajax.send(null);
         };
 }
 function getXMLHttpRequestObject(){
     var ajax = null;
     if(window.XMLHttpRequest){
         ajax =  new XMLHttpRequest();
     }else if(window.ActiveXObject){
         ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0');
     }    
 }

while this is the html page called test.html

<body>
  <div><button type="button" id="btn">Run the test</button><br>
    <p id="output"></p>
  </div>
  <script src ="js/test.js"></script>
</body>

Meanwhile, am trying to run it on XAMPP

2

I have been able to fix it. And I just returned the var ajax at the end of the function like this.

window.onload = function(){
     'use strict';
     var ajax = getXMLHttpRequestObject();
     ajax.onreadystatechange = function(){
         if(ajax.readyState == 4){
             if((ajax.status >= 200 && ajax.status < 300) || (ajax.status == 304)){
                 document.getElementById('output').innerHTML = ajax.responseText;
             }else{
                 document.getElementById('output').innerHTML = 'Error ' + ajax.statusText;
             }
         }
     };
         document.getElementById('btn').onclick = function(){
             ajax.open('GET', 'resources/test.txt', true);
             ajax.send(null);
         };
        **return ajax;**
 }

function getXMLHttpRequestObject(){
     var ajax = null;
     if(window.XMLHttpRequest){
         ajax =  new XMLHttpRequest();
     }else if(window.ActiveXObject){
         ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0');
     }    
     **return ajax;**
 }
3

Encapsulate all the ajax function inside IIFE Funciotn (see Medium.com link)

Althought instead of

var ajax = getXMLHttpRequestObject();

Set

var ajax =new XMLHttpRequest();

For more info MDN link

 (function(){
     'use strict';
     var ajax =new XMLHttpRequest();     
     ajax.onreadystatechange = function(){
         if(ajax.readyState == 4){
             if((ajax.status >= 200 && ajax.status < 300) || (ajax.status == 304)){
                 document.getElementById('output').innerHTML = ajax.responseText;
             }else{
                 document.getElementById('output').innerHTML = 'Error ' + ajax.statusText;
             }
         }
     };
         document.getElementById('btn').addEventListener('click',function(){
      
             ajax.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
             ajax.send(null);
         });

 function getXMLHttpRequestObject(){
     var ajax = null;
     if(window.XMLHttpRequest){
         ajax =  new XMLHttpRequest();
     }else if(window.ActiveXObject){
         ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0');
     }
     }
 
})();

You can see the JSFiddle sample here

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.