On a website I am working on I am trying to load another page into a div on the the page the user does his work from. What I have works correctly in FireFox, but not in IE. I've rummaged Google for quite a bit and found similar problems, but no set solutions.

Here is the JavaScript I have to load a URL into a Div:
function setResponseHtml(pUrl, pDiv) {
var lHttp = getHTTPObjectHtml();
var lUrl = pUrl;
lUrl = lUrl.replace("+","%2b");
if (isBusy) {
lHttp.onreadystatechange = function () {}
lHttp.abort();
}

lHttp.open("GET", lUrl , true);
lHttp.onreadystatechange = function() { getHttpResponseText(pDiv, lHttp); };

if (window.XMLHttpRequest) { // Mozilla check
if (!isBusy) {
isBusy = true;
lHttp.send(null);
}
} else { // IE Check
isBusy = true;
lHttp.send(null);
}
}

function getHTTPObjectHtml() {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
return http_request;
}

function getHttpResponseText(pDiv, pHttp) {
var lHttp = pHttp;

if (lHttp == null) // just in case!
lHttp = gHttp;

if (lHttp.readyState == 4) {
isBusy = false;

var status = "";
try {
status = lHttp.statusText;
if (lHttp.status == 200) {
var htmlDocument = lHttp.responseText;
document.getElementById(pDiv).innerHTML = htmlDocument;
}
} catch(e) {
status = "Trouble accessing it";
document.getElementById(pDiv).innerHTML = e.message;
}
} else {
if (getAjaxLoadingMessage() != '' && getAjaxLoadingMessage() != null) {
// only display a loading message if it is defined
setVisible(pDiv, true);
document.getElementById(pDiv).innerHTML = getAjaxLoadingMessage();
}
return;
}
}

var gAjaxLoadingMessage = 'Loading...';

function setAjaxLoadingMessage(pMessage) {
gAjaxLoadingMessage = pMessage;
}

function getAjaxLoadingMessage() {
return(gAjaxLoadingMessage);
}

This is called from the HTML via: setResponseHtml(urlString, divString);
urlString is a string containing the URL that I wish to load in the div, and divString a string containing the id of the div I wish to load the URL into.

I've tested my code on IE before and it worked properly with a very small file with nothing in except for a couple words. I think the problem may go back to these pages, both the one the users calls the function from and the page to be loaded, contain SharePoint Web Parts. That is the only difference I can think of between the original pages I used to test the code and the pages I am working with now.

An error occurs in IE when trying to load the Div, the error being "[object Error]" and the error message being "Unknown runtime error" if I print e and e.message respectively from the getHttpResponseText function.

This is the section of code where the error occurs:
try {
status = lHttp.statusText;
if (lHttp.status == 200) {
var htmlDocument = lHttp.responseText;
if (gAjaxForeground) {
setVisible(pDiv, true);
}
document.getElementById(pDiv).innerHTML = htmlDocument;
}
} catch(e) {
status = "Trouble accessing it";
document.getElementById(pDiv).innerHTML = e.message;
}

I can't figure out exactly why the error is happening, nor how to correct it. If I change the line "document.getElementById(pDiv).innerHTML = htmlDocument;" to "document.getElementById(pDiv).innerHTML = 'Any text here';" I recieve no errors, so apparently IE doesn't like setting the innerHTML of the page to be loaded to the statusText. Why that is and how to fix it is what I'm hoping to find out.

Sorry for this not-so-straight answer. I'm not familiar with JavaScript, especially on their different implementation on different browsers.

I've encountered the same problem a couple times. My (for tests) browsers is not just IE and Firefox, but also Opera (9+) and now (since a project back) also Safari for Windows.

I think all problems related to Ajax implementation on different browsers can be solved by using Sarissa. Here I think is a good sample (view the source), and the article:

http://www.yourhtmlsource.com/examp...
http://www.yourhtmlsource.com/javas...

The sample is about form submission, but I get a lot of enlightment from it.

Other than using Sarissa, you also have to:

- create the JavaScripts in strict-DOM-mode (or something like that)

- not using innerHTML

- use XML (not obj.responseText).

Those, solved all of my Ajax problems, especially when one doesnt work on IE and IE only says "object expected" without further details.

The above method is not possible for fetching "a full HTML page" I know, but maybe in that case it's best to not use Ajax?

Why do we use Ajax? To remove the visitor's frustration when they need to load pages while there's only a small amount of data being transfered.

Not just for tests or proof or concept IMO :-)

Sample of a good use of Ajax IMO: In sites like Digg, where some comments are hidden, and shown when visitor clicks.

The visitors'll know that they can't press the "back" button (which sometimes become a problem on Ajax sites), bandwidth saved (not all comments shown on every pageload), and visitors don't have to wait long when they want to see a particular comment.

---
JakartaSpot.com