AJAX code issue

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
samir_gambler
Forum Newbie
Posts: 19
Joined: Wed Mar 31, 2010 9:03 am

AJAX code issue

Post by samir_gambler »

Hi,
I am new to AJAX and I was trying to display words for a particular time using XML and AJAX. Though my code is working in firefox but is not working in internet explorer. It seems there is some issue in my code. Can anyone please analyze the code. I am attaching the source code.

JAVA SCRIPT

Code: Select all

window.onload = initAll;
var xhr = false;
var dataArray = new Array();
var formField = "reload";
var url = "words.xml";
var IntervalId = 0;

function initAll() {
	document.getElementsByTagName("form")[0].onsubmit = showData;
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	}
	else {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) { }
		}
	}

	if (xhr) {
		xhr.onreadystatechange = setDataArray;
		xhr.open("GET", url, true);
		xhr.send(null);
	}
	else {
		alert("Sorry, but I couldn't create an XMLHttpRequest");
	}
}

function setDataArray() {
	var tag1 = "word";
	var tag2 = "name";

	if (xhr.readyState == 4) {
		if (xhr.status == 200) {
			if (xhr.responseXML) {
				var allData = xhr.responseXML.getElementsByTagName(tag1);
				for (var i=0; i<allData.length; i++) {
					dataArray[i] = allData[i].getElementsByTagName(tag2)[0].firstChild.nodeValue;
				}
			}
		}
		else {
			alert("There was a problem with the request " + xhr.status);
		}
	}
}

function showData() {
		document.getElementById("popups").innerHTML = "";
		document.getElementById("popups").innerHTML = dataArray.pop();
		IntervalId = setInterval ( "changeText()", 1000 )
	}
	
function changeText ( )
{
	if (dataArray.length==0)
	{
		clearInterval (IntervalId );
		document.getElementById("popups").innerHTML ="";
	}
	else
	{
		document.getElementById("popups").innerHTML = dataArray.pop();
	}
}
HTML

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title>SSB TEST</title>
	<link rel="stylesheet" rev="stylesheet" href="script.css" />
	<script type="text/javascript" src="script.js">
	</script>
</head>
<body>
	<h1>SSB TEST</h1>
    <form action="#">
		<p>Click here to start a sentence making test</p>
		<input type="submit" value="Start" />
	</form>
    <br>
    <div id="popups"> </div>
</body>
</html>
XML

Code: Select all

<?xml version="1.0"?>
<choices xml:lang="EN">
	<word>
		<name>consignee</name>
	</word>
	<word>
		<name>revenue stamp</name>
	</word>
	<word>
		<name>spliff</name>
	</word>
	<word>
		<name>telephotograph</name>
	</word>
	<word>
		<name>halting</name>
	</word>
	<word>
		<name>wych</name>
	</word>
	<word>
		<name>ader</name>
	</word>
	<word>
		<name>labradoodle</name>
	</word>
	<word>
		<name>unrivaledly</name>
	</word>
	<word>
		<name>scabrous</name>
	</word>
</choices>
Thanks & regards,
Samir
samir_gambler
Forum Newbie
Posts: 19
Joined: Wed Mar 31, 2010 9:03 am

Re: AJAX code issue

Post by samir_gambler »

The issue was with form used in HTML, instead of form I used simple html button and the problem was solved.
Post Reply