Upadating DIV tag with AJAX

Okay, so I've been getting into AJAX lately and I have this code:

<script>
function callback(serverData, serverStatus) { // Called automatically when we get data back from server
if(serverStatus == "200")
{
alert(serverData); // Display an alert box with the recieved data
}
else
{
alert('Error: File not found');
}
}

function ajaxRequest()
{
var AJAX = null; // Initialize the AJAX variable.
if (window.XMLHttpRequest) { // Does this browser have an XMLHttpRequest object?
AJAX=new XMLHttpRequest(); // Yes -- initialize it.
} else { // No, try to initialize it IE style
AJAX=new ActiveXObject("Microsoft.XMLHTTP"); // Wheee, ActiveX, how do we format c: again?
} // End setup Ajax.
if (AJAX==null) { // If we couldn't initialize Ajax...
alert("Your browser doesn't support AJAX."); // Sorry msg.
return false // Return false, couldn't set up ajax
}
AJAX.onreadystatechange = function() { // When the browser has the request info..
if (AJAX.readyState==4 || AJAX.readyState=="complete") { // see if the complete flag is set.
callback(AJAX.responseText, AJAX.status); // Pass the response to our processing function
} // End Ajax readystate check.
}
var url='notajax.html'; // This is the URL we will call.
AJAX.open("GET", url, true); // Open the url this object was set-up with.
AJAX.send(null); // Send the request.
}


</script><br>
<a href="#" onClick="ajaxRequest()">Click Here</a><br>
<div id='edit'>This is the div I want to edit.</div>

Notajax.html
Hello World!
What I would like to know is how I can get "hello world!", which should be inside my "serverData" variable into my "edit" div. I know it has something to do with appendChild() but everything I've tried so far hasnt worked.

You need to create a text node.
Inside your callback() function, try...

document.getElementById('edit').appendChild(document.createTextNode(serverData));

Okay that works... One more question. How do I get it to replace "This is the div I want to edit."?

after your readystate complete do an innerHTML on the document id 'edit'


here is an even simpler way... find a decent AJAX library (google mootools, XHR.js or prototype) and you can do an XHR request in 2-3 lines of code...

I dont understand what you mean, can you explain it a little more please?

The first hint Bobafart gave was to use something like:

document.getElementById('edit').innerHTML="This is the <span style='color:red;'>new</span> text.";

As you can see, innerHTML is all of the html inside of the <div> element. Thus you can add other html elements (like my <span>) inside this string. The only problem (sort-of) is that innerHTML is not compliant with the W3C standards. The W3C consortium is a group that is trying to standardize web languages. Since innerHTML is not (currently) compliant, the script may fall apart in the future if future browsers decide to become completely compliant. However, all major browsers to date recognize innerHTML (eg IE, Firefox, Netscape, etc...) so it may be a moot point to worry about this. There are other compliant DOM methods for achieving the same result (search out a good DOM tutorial to learn about these), but innerHTML is easier, faster (according to quirksmode), and does not fall prey to the "hidden text-node" that affects some browsers but not others.

I believe that Bobafart's other hint was to find a .js library on the web that already contains many useful AJAX functions. Since I haven't seen these, I can only assume that there is a function that you would provide an id for the div you want changed, a file on the server that the AJAX calls, and perhaps other parameters; and the function will then make the AJAX call and change the innerHTML of the provided div. I guess it depends more on your own curiosity and desire to learn. If you want some quick AJAX code to stick into some project you are working on, then getting one of these libraries may be the way to go. If you are using AJAX scripts to learn more about this technique, then writing these sample scripts and really understanding how everything works will probably serve you better.