AJAX

Help me out with this imple code pls

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: May 2006

Posts: 60

Reputation: kaushik259106 is an unknown quantity at this point

Solved Threads: 0

kaushik259106 kaushik259106 is offline

Offline

Junior Poster in Training

Help me out with this imple code pls

Jan 13th, 2008

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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
Line: 32
Char: 1
Error: Object Expected
Code: 0
URL: http://localhost:8090/jsp-examples/dates/index.html
Line: 32
Char: 1
Error: Object Expected
Code: 0
URL: http://localhost:8090/jsp-examples/dates/index.html

Error in firefox is:

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

getData is not defined

The Blog For Geeks

•

Join Date: Jun 2006

Posts: 7,622

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 468

~s.o.s~

Offline

Failure as a human

Re: Help me out with this imple code pls

Jan 13th, 2008

> 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:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!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>
 
<!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>

Last edited by ~s.o.s~; Jan 13th, 2008 at 3:55 am.

I don't accept change; I don't deserve to live.

•

Join Date: Nov 2007

Posts: 3,760

Reputation: nav33n is a jewel in the rough

Solved Threads: 332

nav33n

Offline

Senior Poster

Re: Help me out with this imple code pls

Jan 13th, 2008

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.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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<b></b>: 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

Last edited by nav33n; Jan 13th, 2008 at 3:56 am.

Ignorance is definitely not bliss!

*PM asking for help will be ignored*

•

Join Date: May 2006

Posts: 60

Reputation: kaushik259106 is an unknown quantity at this point

Solved Threads: 0

kaushik259106 kaushik259106 is offline

Offline

Junior Poster in Training

Re: Help me out with this imple code pls

Jan 13th, 2008

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..

The Blog For Geeks

•

Join Date: Nov 2007

Posts: 3,760

Reputation: nav33n is a jewel in the rough

Solved Threads: 332

nav33n

Offline

Senior Poster

Re: Help me out with this imple code pls

Jan 13th, 2008

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

Ignorance is definitely not bliss!

*PM asking for help will be ignored*

•

Join Date: Jun 2006

Posts: 7,622

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 468

~s.o.s~

Offline

Failure as a human

Re: Help me out with this imple code pls

Jan 13th, 2008

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. ;-)

Last edited by ~s.o.s~; Jan 13th, 2008 at 8:28 am.

Attached Thumbnails

I don't accept change; I don't deserve to live.

•

Join Date: May 2006

Posts: 60

Reputation: kaushik259106 is an unknown quantity at this point

Solved Threads: 0

kaushik259106 kaushik259106 is offline

Offline

Junior Poster in Training

Re: Help me out with this imple code pls

Jan 14th, 2008

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

Last edited by kaushik259106; Jan 14th, 2008 at 6:12 am.

The Blog For Geeks

•

Join Date: Dec 2008

Posts: 3

Reputation: egbert is an unknown quantity at this point

Solved Threads: 0

egbert

Offline

Newbie Poster

Re: Help me out with this imple code pls

Dec 6th, 2008

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 line
XMLHttpRequestObject.status == 200
to
XMLHttpRequestObject.status == 0

2 If instead of the line
onclick = "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>

Quick Reply to Thread

Show Printable Version

Other Threads in the JavaScript / DHTML / AJAX Forum

Previous Thread: Current Java probs on my personal site
Next Thread: Moving DIVs with Javascript

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes