Jump to content

Starting AJAX

shadowayex

By shadowayex
in JavaScript

Recommended Posts

shadowayex Invested Member

shadowayex

Posted
Posted

I looked through the AJAX tutorial and I'm trying a simple one myself. But alas, it does not work. Here's what I have:testajax.php:

<?phpinclude('PHP_Files/connect.php');?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>Test</title><script type="text/javascript">function getObject() {    var object=null;    try {        // Firefox, Opera 8.0+, Safari        object=new XMLHttpRequest();    }    catch (e) {        //Internet Explorer        try {            object=new ActiveXObject("Msxml2.XMLHTTP");        }        catch (e) {            object=new ActiveXObject("Microsoft.XMLHTTP");        }    }    return object;}function stateChanged() {    if (object.readyState==4 || object.readyState=="complete") {        document.getElementById("txtHint").innerHTML=object.responseText;    }}function tryIt() {    getObject()    if (object==null) {        alert("Browser does not support HTTP Request");        return    }    object.onreadystatechange=stateChanged    object.open("GET","testajaxphp.php",true)    object.send(null)}</script></head><body><input type="button" name="button" onclick="tryIt()" value="Try It" /></body></html>

testajaxphp.php:

<?php$uzer = mysql_query("SELECT * FROM users WHERE Username = '$user'");$uzer = mysql_fetch_array($uzer);$uzer = $uzer['Username'];$date = date(U);$date = date('g:i A \o\n F jS, Y', $date);echo 'It is ' . $date . ' where ' . $uzer . ' lives.';?>

I'm really trying hard to learn and understand AJAX and from what I saw in the tutorial, this shouldn't be wrong. But evidently it is. So could anyone let me know where my mistake it? Or maybe show me a better way to write this, because I'm kind of confused about what is doing what on there.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

I'd say half of all first timers make this mistake. Your http object, which you call 'object,' needs to be global. Declare it outside a function, not inside one.Also, the text you echo in your PHP file needs a content header, probably plain text.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted
Oh... content header? I'm not familiar with what that is. if you could point me in the right direction that would be great.
Just put this in your PHP before you echo any content back to your client doc:header("Content-type: text/plain");
Link to comment
Share on other sites
shadowayex Invested Member

shadowayex

Posted
  • Author
Posted

I added the stuff, but it still doesn't work. My new files look like:testajax.php:

<?phpinclude('PHP_Files/connect.php');?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>Test</title><script type="text/javascript">var object=null;function getObject() {    try {        // Firefox, Opera 8.0+, Safari        object=new XMLHttpRequest();    }    catch (e) {        //Internet Explorer        try {            object=new ActiveXObject("Msxml2.XMLHTTP");        }        catch (e) {            object=new ActiveXObject("Microsoft.XMLHTTP");        }    }    return object;}function stateChanged() {    if (object.readyState==4 || object.readyState=="complete") {        document.getElementById("txtHint").innerHTML=object.responseText;    }}function tryIt() {    getObject()    if (object==null) {        alert("Browser does not support HTTP Request");        return    }    object.onreadystatechange=stateChanged    object.open("GET","testajaxphp.php",true)    object.send(null)}</script></head><body><input type="button" name="button" onclick="tryIt()" value="Try It" /></body></html>

testajaxphp.php:

<?php$uzer = mysql_query("SELECT * FROM users WHERE Username = '$user'");$uzer = mysql_fetch_array($uzer);$uzer = $uzer['Username'];$date = date(U);$date = date('g:i A \o\n F jS, Y', $date);header("Content-type: text/plain");echo 'It is ' . $date . ' where ' . $uzer . ' lives.';?>

If there's no mistake in that, could it be a setting on my server I need to change?

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

1. It didn't occur to me before, but "object" is probably a reserved word, so you might not be able to use it as a variable name. Try something like myObject or myHTTPObject.2. Let's simplfy things. Instead of echoing a SQL query, echo "Hello World." Just comment out all the SQL and date() stuff for now.3. Again, just to check things, instead of assigning your response text to something's innerHTML, just alert it. You might not even be receiving any text, so an alert in that function would be a good test anyway.4. I don't actually see an element with the id "txtHint". If you're going to put text there, you ought to have one.

Link to comment
Share on other sites
shadowayex Invested Member

shadowayex

Posted
  • Author
Posted

Heh, after I fixed all the errors you mentioned and everything, I noticed something else that was causing it not to work, a little typing error in a path >_<. But you did help a lot with the other things as well. Thanks. I'm starting to understand AJAX much better now and I can probably expand on my own from here. Thanks for all your help and I'll probably be back with more questions.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...