请原谅我的困惑,因为我偶然发现了这一点,我是javascript和这类新手。如果我的代码是垃圾,也请原谅我,因为它是我发现的一些例子,以及我想出来的事情(并没有想出来)!
我正在尝试在Open Broadcaster软件中运行此html文件:
<html>
<head>
<link rel="stylesheet" href="css/stylesheet_twitter1.css" type="text/css" charset="utf-8">
<script src="js/jquery-2.0.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jstween-1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/countries.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var timestampOld;
var timestamp;
var mText4;
var xmlDoc;
var xhr = new XMLHttpRequest();
var animating = false;
var doUpdate = false;
function init() {
xhr.overrideMimeType('text/xml');
var timeout = this.window.setInterval(function() {
pollHandler();
}, 250);
$('#mText4').html('');
$('#board').tween({
top:{
start: '80',
stop: '0',
units: 'px',
time: 0,
duration: 0.8,
effect:'easeOut'
}
});
$.play();
}
</script>
</head>
<body onLoad="init()">
<script type="text/javascript">
function pollHandler()
{
loadData();
if (timestamp != timestampOld) {
doUpdate = true;
}
if (!animating && doUpdate) {
updateBoard();
}
}
function loadData() {
xhr.open('GET', 'streamcontrol.xml');
xhr.send();
xhr.onreadystatechange = function(){
xmlDoc = xhr.responseXML;
mText4 = getValueFromTag(xmlDoc,'mText4');
timestampOld = timestamp;
timestamp = getValueFromTag(xmlDoc,'timestamp');
}
}
function updateBoard() {
if ($('#mText4').html() != mText4) {
animating = true;
$('#mText4').tween({
opacity: {
start: 100,
stop: 0,
time: 0,
duration: 0.5,
effect: 'easeIn'
},
onStop: function(){
$('#mText4').html(mText4);
}
});
$('#mText4').tween({
opacity: {
start: 0,
stop: 100,
time: 0.5,
duration: 0.5,
effect: 'easeOut'
},
onStop: function(){
animating = false;
}
});
}
$.play();
doUpdate = false;
}
function getValueFromTag (xmlDoc,tag) {
if (xmlDoc.getElementsByTagName(tag).length != 0 ) {
if (xmlDoc.getElementsByTagName(tag)[0].childNodes.length == 0) {
return '';
} else {
return xmlDoc.getElementsByTagName(tag)[0].childNodes[0].nodeValue;
}
} else {
return '';
}
}
</script>
<div id="board">
<div id="mText4"></div>
</div>
</body>
</html>
它工作得很好,但是在这个(以及其他两个html文件)运行几个小时后,软件会崩溃。这导致我查看它创建的日志文件,我看到了很多次:
Uncaught TypeError: Cannot read property 'getElementsByTagName' of null @http://absolute/D:/obs%20stuff/browserfiles/Twitter1.html334
所以我在Firefox中运行它,然后抛出以下错误(再次,很多):
TypeError: xmlDoc is null
我确信streamcontrol.xml
不是空的。我觉得这些错误让我指向了一个好的方向,但经过两天多的集体尝试我在不同线程上看到的不同的事情两天后,我感到很茫然。
答案 0 :(得分:1)
onreadystatechange不仅会在您的请求成功完成时触发。您必须检查就绪状态是否已完成,并且处理程序中的状态是否成功。
检查here以了解一些使用详情。
通常,您需要检查xhr.readystate === 4
是否知道它有响应然后检查状态(xhr.status === 200
表示成功响应)