AJAX and IE

So what's the solution with AJAX and Internet Explorer?

www.gbgrafix.com

My website doesn't work properly because I used AJAX for loading the picture bar and the main div.

 

Can you write your site problem in details...

 

This doesn't seem to work with IE8 nor Google Chrome

function createRequest(){
	var req = false;
	try {
		req = new ActiveXObject('Msxml2.XMLHTTP');
	} catch (e2) {
	try {
		req = new ActiveXObject('Microsoft.XMLHTTP');
	} catch (e3) {
		try {
			req = new XMLHttpRequest();
		} catch (e1) {
			req = false;
			}
		}
	}
	return req;
}
function bodyOnload(){
	fillNav();
	//fillHomeMainDiv();
	parseXML();
}
/*****************************************************************/
function getit(aid, aurl){
	var req = createRequest();
	if(req){
		req.onreadystatechange = function(){
			var c = document.getElementById(aid);
			if(req.readyState){
				if(req.readyState == 4){
					if(req.status == 200){
						c.innerHTML = req.responseText;
					}
				}
			}
		}
	req.open('GET', aurl, true);
	req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	req.send(null);
	}
}

Code (markup):

 

erm - there are plenty of ajax libraries that can abstract all ajax properly in a cross-browser fashion and deal with this. the question in my opinion is, do you want to be building up your site navigation through ajax in the first place? google won't crawl the site that way - if it can't find links in the body text, it won't run your ajax for you and grab the links from there. i would strongly suggest changing your code to simply include the html required via something like

include_once("./getfiles/Navigation.php");

PHP:

instead.

if you plan on using advanced javascript etc, then i suggest getting a framework like mootools (www.mootools.net/download)

then your ajax code would go like so:

// create a compatibility layer with your current code
var getit = function(el, url) {
    var target = $(el);
    if (target)
        target.load(url);
    // see http://mootools.net/docs/core/Request/Request.HTML#Element:load
};

window.addEvent("domready", function() {
    // equivalent of your fillnav function as you would do from scratch
    new Request({
        method: "get",
        url: "http://www.gbgrafix.com/getFiles/navigation.php",
        update: $("navbar")
    }).send();

    // OR call your function instead
    fillNav(); 
});

Code (javascript):

you really don't need to define functions for all possible scenarios you have, all you need is to assign click events to the load method. for instance:

$("illustratorButton").addEvents({
    click: function() {
         $("navbar").load("getfiles/illustrator.php");   
    }
});

Code (javascript):

it can be automated in full as well, if you store the urls into the elements themelves... anyway, if you want to go this route, i would be happy to show you a working scalable example that won't have you spending 2 hrs each time you want to modify your site.

anyway, failing that--not sure what the problem is with your existing code, works in FF 3.5 and IE7, i don't have IE8 but you can also force IE7 compatibility mode:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

this leaves you to fix chrome... or post some meaningful errors. could be that you get an exception due to the xml parsing.

 

I've heard about frameworks but what does it do?

Now I'm confused. What's the purpose of AJAX if some browsers won't accept it?

 

the vast majority of browsers support ajax but they do so in their own way. as you can see from your code, it tries 3 "known" methods of instantiating an XMLhttp object, hoping one will stick.

frameworks are basically libraries which do all that for you--they have been created with the idea of setting the field level for the developer so they don't need to worry about HOW the browser does ajax (or any number of other things) by providing a common interface that can deal with it. this is the 'abstraction' layer that you use.

as you can see from my example, mootools provides an interface to doing the requests and updating elements. similarly, in jquery (another very popular framework), you'd set about doing an ajax request by simply doing

$("#someid").load("page.php"); // straight text fetch

Code (javascript):

or a more complex one:
http://php4every1.com/tutorials/jquery-ajax-tutorial/

anyway - ajax IS a pretty solid base but you need to be careful in how you use it. don't code your site to use ajax for its own sake - think about user experience and google also. for your site, you won't be able to bookmark or link to any subpage because they dont get to have their own url. the 'back' button won't work and will chuck them off the site etc. i'd seriously consider going back to the drawing board on this (heh, pun intended since you are a great illustrator)

good luck

 

http://www.mootools.net/download

Which link do you recommend? There are so many!

 

I like jQuery to do the things above.

But if you want to use mootools, use "JSMin" variant.

 

Your code seems fine in my IE8 (after I toggled off DISSABLE SCRIPT).

By the way...
1) Why req = false twice? Better notify your visitor by something like below:

2) You dont need the red line below:

3) And the red line below is required only for POST method:

Regards,

 

I said IE8 but it's actually IE6, the worst. I changed the whole method and got rid of AJAX.