Help me out with this imple code pls

Question

kaushik259106 0 Junior Poster in Training

16 Years Ago

Guys,
I was going through the book called Ajax for Dummies and got the following example.

<html>
<head>
<title>Ajax at work</title>
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open(“GET”, dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<H1>Fetching data with Ajax</H1>
<form>
<input type = "button" value = "Display Message"
onclick = "getData('http://localhost:8090/jsp-examples/dates/data.txt',
'targetDiv')">
</form>
<div id="targetDiv">
<p>The fetched data will go here.</p>
</div>
</body>
</html>

It requires me to put a data file which exists in http://localhost:8090/jsp-examples/dates/data.txt

But when i execute i get errors.
Not able to figure out why.
Error in IE is

Line: 32
Char: 1
Error: Object Expected
Code: 0
URL: http://localhost:8090/jsp-examples/dates/index.html

Error in firefox is:

getData is not defined

javascript

4 Contributors
7 Replies
189 Views
10 Months Discussion Span
Latest Post 15 Years Ago Latest Post by egbert

~s.o.s~ 2,560 Failure as a human

16 Years Ago

> XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);

If this is how your code looks in your Text Editor / IDE, you need to change the special character ” to double quotes ("). Avoid copy / pasting the code from your ebook into the editor since it might introduce such special characters.

A sample working snippet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0"> <!-- disable caching -->
    <title>Ajax Example</title>
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript">
        function getXmlHttpRequest() {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            /*@cc_on @*/ 
            /*@if (@_jscript_version >= 5)
            try {
                return new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                } catch (E) {
                    return null;
                }
            } @end @*/ 
        }
        else {
            return null;
        }
    }
    function getData(datasource, target) {
        var xhr = getXmlHttpRequest();
        xhr.open("GET", datasource, true);
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status == 200) {
                    document.getElementById(target).innerHTML = xhr.responseText;
                }
                else {
                    alert("Some problem occured);
                }
            }
        }
        xhr.send(null);
    }
    </script>
</head>
<body>
<form id="frm" name="frm" action="#">   
<div id="frmContainer">
    <div id="tgt"></div>
    <p></p>
    <input type="button" onclick="getData('data.txt', 'tgt');" value="Get Data">
</div>
</form>
</body>
</html>

nav33n 472 Purple hazed!

16 Years Ago

Umm.. Change “ ” to " ". Put data.txt in the same folder where you have the ajax script. I don't know much of ajax, but, the following code worked for me without any errors.

<html>
<head>
<title>Ajax at work</title>
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200 ) { 
	obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<H1>Fetching data with Ajax</H1>
<form>
<input type = "button" value = "Display Message"
onclick = "javascript: getData('data.txt',
'targetDiv')">
</form>
<div id="targetDiv">
<p>The fetched data will go here.</p>
</div>
</body>
</html>

Cheers,
Naveen

Edit: SOS, you beat me by a minute :P

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

kaushik259106 0 Junior Poster in Training · Answer 1 · 2008-01-13T13:59:21+00:00

ya sos it was copy problem.. thanks for quick response..so which ide are you guys use for js.. since am using myEclise and it didnt showed any error.. :(

nav33n 472 Purple hazed! Team Colleague Featured Poster · Answer 2 · 2008-01-13T14:20:34+00:00

If you are using firefox, you can use Error console. Error console lists all the errors(javascript & css) encountered in your page.

~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster · Answer 3 · 2008-01-13T18:24:38+00:00

Yes, using Firefox as your development browser along with some useful plugins like Web Development and Firebug, you can cut down a lot on your development time.

And it doesn't depend on the IDE, really. It's more about experience and observation. I pinned down the problem the moment I saw those weird quotes. And you should be aware and quite competent with the IDE. In the screenshot I am posting, compare the two statements, one which has the weird quotes and the one which has the right kind of quotes. Don't you see a highlighting difference?

And which Eclipse are you using by the way? For web development using Java, you should be using WTP instead of the normal version which is not HTML/CSS/JS aware.

PS: > Edit: SOS, you beat me by a minute
And that too with a well indented code. ;-)

kaushik259106 0 Junior Poster in Training · Answer 4 · 2008-01-14T16:08:28+00:00

Ya thats true.. you need to know your ide better.. am learning..Thanks for these infos. :) am using myEclipse 6.0.1 it has eclipse 3 i hope.. i installed the standalone

egbert 0 Newbie Poster · Answer 5 · 2008-12-06T21:00:46+00:00

Hi everyone

I've also been looking at the same code from the 'Ajax for Dummies' book (page 67). I'm running the code samples on an XAMPP installation with both files in the C:\xampp\htdocs folder which (appears) to have been set up as 'localhost'. However, there are 3 odd things about this code.

1 It will not work as stated unless I change the lineXMLHttpRequestObject.status == 200
toXMLHttpRequestObject.status == 0

2 If instead of the lineonclick = "javascript: getData('data.txt', 'targetDiv')" (which works) I put - as suggested in the book -onclick = "javascript: getData('http://localhost/data.txt',
'targetDiv')" - it does not work. It's as if it doesn't recognise local host.

3 If I move the html file and the data.txt file together to any folder outside of the local host altogether, it still works! I thought AJAX was only supposed to work out of a server environment?

Can anyone enlighten me?

<html>
<head>
<title>Ajax at work</title>
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200 ) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<H1>Fetching data with Ajax</H1>
<form>
<input type = "button" value = "Display Message"
onclick = "javascript: getData('data.txt',
'targetDiv')">
</form>
<div id="targetDiv">
<p>The fetched data will go here.</p>
</div>
</body>
</html>