I'm rather new to Ajax. Let's say I have 2 pages www.example.com/index.html & www.example.com/clients.html. When a visitor clicks on a link on Index page, I wish to display on the index page itself, the contents of a < div > with specific Id on the Client.html page. Using the XMLHTTPRequest object, I understand that the response can be either Text or XML. I am not sure, how to handle the response, if it is HTML. Do I need to specifically set the mime-type override as Text/HTML ? Secondly, assuming I am somehow able to assign the contents of the response to a var, how do I use Javascript to read only the content of the specified div? Thanks for help in advance. Also, if there is an easier/better way to do this, please suggest.

Treat the retrieved document as an XML Node tree (which it is) and use

displayNode.innerHTML = XMLReadDocument.getElementById("id").innerHTML;

Thanks for the feedback. Just a query, would this work the same with all the major browsers? (IE5+, Moz/FF, Saf, Opera)?

Dunno, that will depend on how you are creating the request object.

Well, I've been trying this code, but without much success:

function linkOut(custdet) {
    var cust = custdet;
    var req;
    var url = "successstories.html#"+cust;
    //var url = "'"+"http://localhost/ninesec/successstories.html#"+custdet+"'";
    //alert(url);
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            req = new XMLHttpRequest();
        } 
        else if (window.ActiveXObject) { // IE
            try {
                req = new ActiveXObject("Msxml2.XMLHTTP");
            } 
            catch (e) {
                try {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                } 
                catch (e) { alert("There was an error creating the object "+e.description); }
            }
        }
    if (!req) {
            document.getElementById('LinkOut').innerHTML = "There was an error creating the request."
            return false;
        }
    req.onreadystatechange = function () { 
        if (req.readystate == 4) {
            if (req.status == 200) {
                var xmlResp = req.responseXML.documentElement;
                document.getElementById('LinkOut').innerHTML = xmlResp.getElementById(cust).innerHTML;
            } else {
                document.getElementById('LinkOut').innerHTML = "There was an error extracting the information."
            }
        }
    } 
    req.open('GET', url, true);
    req.overrideMimeType('text/xml');
    req.send(null);
}

On the Index page, the function linkOut is called when someone clicks the respective link. The firebug response header shows it is of the type

Content-Type - text/html

And the request header shows:

Accept -text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Can someone point where things are going wrong? Thanks for response.

Do we get a URI so we can see what happens (or not as the case maybe)

BTW requesting a URL with a document fragment marker won't do anything useful.

You may check out the pages at

http://www.ninesec.com/newweb/index.html

Basically, the Successstories.html page contains the descriptions of client successes in respective divs. The idea is that when someone clicks on the Client's name on Index page, only the content of the named div on Successstories.html page must be displayed in the specified div on the Index page. And if someone visits the Successstories.html page, he can view all of them together. So can you help modify the linkOut function suitably? Newbie to JavaScript & Ajax.

Thanks & regards,

Fix the unclosed elements, you are using a XHTML DTD and HTML code, so the source returned from "successstories.html" is NOT a well formed document, and as such will not be parsed.

Also fix the capitalisation, on *nix servers "successstories.html" is NOT the same as "SuccessStories.html" stick to all lowercase for URLs.
Your server is IIS, but the web, especially SEs happens to be case sensitive.

Well, I corrected all errors as per validator.w3c.com, for XHTML 1.0 Transitional, and the web pages are now W3C validated XHTML. However, the ajax call is still not working as expected.

2 CSS points:
there is no :onclick pseudoclass and 250 is NOT a valid value for font-weight.

readystate should be readyState (javascript is case sensitive)

corrected request code

function linkOut(custdet) {
	var cust = custdet;
	var req;
	var url = "successstories.html";
	if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            req = new XMLHttpRequest();
        } 
        else if (window.ActiveXObject) { // IE
            try {
                req = new ActiveXObject("Msxml2.XMLHTTP");
            } 
            catch (e) {
                try {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                } 
                catch (e) { alert("There was an error creating the object "+e.description); }
            }
        }
	if (!req) {
			document.getElementById('LinkOut').innerHTML = "There was an error creating the request."
			return false;
        }
	req.onreadystatechange = function () { 
		if (req.readyState == 4) {
			if (req.status == 200) {
				var xmlResp = req.responseXML;
				document.getElementById('LinkOut').innerHTML = xmlResp.getElementById(cust).innerHTML;
			} else {
				document.getElementById('LinkOut').innerHTML = "There was an error extracting the information."
			}
		}
	} 
	req.open('GET', url, true);
	req.overrideMimeType('text/xml');
	req.send(null);
}

PLUS the document you are reading MUST be a well formed document, so "successstories.html" needs to have ALL the XHTML warnings corrected