AJAX not working in IE

spenoir · 04-20-2006, 11:26 AM

Anyone Know why my first ajax script doesn't work in IE. It works in Firefox and Opera. I've attached the xml, js and html in a zip.

Thanks in advance.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript">
var req=null;
var console=null;
var READY_STATE_UNINITIALIZED=0;
var READY_STATE_LOADING=1;
var READY_STATE_LOADED=2;
var READY_STATE_INTERACTIVE=3;
var READY_STATE_COMPLETE=4;

function initXMLHTTPRequest () {
    var o;
    try{
        o = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        try{
            o = new ActiveXObject("Microsoft.XMLHTTP");    
        }catch(e){
            o = false
        }
    }    
    if(!o && typeof XMLHttpRequest!='undefined'){
        o = new XMLHttpRequest();
    }
//    o.async=false;
    return o;
}
function sendRequest (url,params,HttpMethod) {
	if (!HttpMethod) {
	HttpMethod="GET";	
	}
	req=initXMLHTTPRequest();
	if (req) {
	req.onreadystatechange=onReadyState;
	req.open(HttpMethod,url,true);
	req.setRequestHeader ("Content-Type", "text/xml");
	req.send(params);
	}
}
function onReadyState() {
	var ready=req.readyState;
	var data=null;
	if (ready==READY_STATE_COMPLETE) {
		data=req.responseText;
		setDataXML(req);
	}
	else {
		data="loading...["+ready+"]";
	}

}

window.onload=function() {
	document.getElementById('writeroot');
	sendRequest("books.xml");
}

function setDataXML(req)
{
	var books = req.responseXML.getElementsByTagName('book');
	for (var i=0;i<books.length;i++)
	{
		var x = document.createElement('div');
		x.className = 'book';
		var y = document.createElement('h3');
		y.appendChild(document.createTextNode(getNodeValue(books[i],'title')));
		x.appendChild(y);
		var z = document.createElement('p');
		z.className = 'moreInfo';
		z.appendChild(document.createTextNode('By ' + getNodeValue(books[i],'author') + ', ' + getNodeValue(books[i],'publisher')));
		x.appendChild(z);
		var a = document.createElement('img');
		a.src = books[i].getElementsByTagName('cover')[0].getAttribute('src');
		x.appendChild(a);
		var b = document.createElement('p');
		b.appendChild(document.createTextNode(getNodeValue(books[i],'blurb')));
		x.appendChild(b);
		document.getElementById('writeroot').appendChild(x);
	}
}

function getNodeValue(obj,tag)
{
	return obj.getElementsByTagName(tag)[0].firstChild.nodeValue;
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>

<div id="writeroot"></div>

</body>
</html>

A1ien51 · 04-20-2006, 01:32 PM

I glanced at it real quick.

You should be doing the check for ActiveX after you do the check for the native XMLHttpRequest() object. Plus it is better o use object detection.

You also need to set the onreadystatechange after the open

req.open(HttpMethod,url,true);
req.onreadystatechange=onReadyState;

Now when it does not work when does it fail? Put debug statemens in the code to see where IE is not performing correctly. Does it die in the request, the XML function. ETC.

Eric

spenoir · 04-20-2006, 01:45 PM

The script doesn't give any error, it just doesn't display anything which makes it hard to debug

I've made those amends you have suggested but it doesn't seem to make any difference.
There can't be a lot wrong with it as IE doesn't give an error, just a very unhelpful blank screen.

A1ien51 · 04-20-2006, 03:11 PM

It is not hard to debug. Add alert statements in there and see where it stops working. I can not look at the code in detail until tonight, hopefully someone else around here can.

Eric

spenoir · 05-16-2006, 11:45 AM

I've added alert statements to this script from top to bottom and IE seems to read the entire script. Has anyone got any other ideas for getting this ajax to work in IE. I understand it could be the structure which I'm going to look at changing, as mentioned above by Eric.

many thanks

NancyJ · 05-16-2006, 12:28 PM

books has 0 length in ie.

KC-Luck · 05-16-2006, 05:36 PM

This is another case of, if you did this code on a server, it would work fine.
but if you run this via file: protocol, you have to use another line of code to enable the use of reponseXML.

Place the following code just before your setDataXML(req); and all should work fine for file: protocol.

Code:

if (!req.responseXML.documentElement && req.responseStream)
  req.responseXML.load(req.responseStream);

spenoir · 05-24-2006, 04:42 PM

Nice one KC-Luck, its working fine now in IE.
Thanks a million.

spenoir · 06-23-2006, 02:10 PM

Hi all,
I've added the var r to my script below. I'm trying to use it select 2 xml nodes at random:

Code:

function setDataXML(req)
{
	var r = Math.floor(Math.random() * 10) + 2;
	var books = req.responseXML.getElementsByTagName('book');
	
	if (!req.responseXML.documentElement && req.responseStream) {
  		req.responseXML.load(req.responseStream);
	}
	for (var i=0;i< books.length;i++)
	{
		var x = document.createElement('div');
		x.className = 'book';
		var y = document.createElement('h3');
		y.appendChild(document.createTextNode(getNodeValue(books[i],'title')));
		x.appendChild(y);
		var z = document.createElement('p');
		z.className = 'moreInfo';
		z.appendChild(document.createTextNode('By ' + getNodeValue(books[i],'author') + ', ' + getNodeValue(books[i],'publisher')));
		x.appendChild(z);
		var a = document.createElement('img');
		a.src = books[i].getElementsByTagName('cover')[0].getAttribute('src');
		x.appendChild(a);
		var b = document.createElement('p');
		b.appendChild(document.createTextNode(getNodeValue(books[i],'blurb')));
		x.appendChild(b);
		document.getElementById('writeroot').appendChild(x);
	}
}

I think that the for statement needs modifying something like following:

Code:

	for (var i=0;i< books.r;i++)

This doesn't work however.

I'm sure i'll get there in the end but any help would be great.

cheers