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
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;**
}
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
system
Closed
4
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.