...

View Full Version : Good Source



jcdevelopment
11-30-2007, 04:58 PM
Im trying my hardest to learn and apply ajax, the only problem is that i cant find a good source(book) or a great website tutorial. If anyone can suggest something i would really appreciate it.


Thanks guys

rpgfan3233
11-30-2007, 10:22 PM
That's probably because the concept is fairly simple. Here are the steps involved:
Get an XMLHttpRequest object (IE6 and older uses ActiveX, other browsers use a native XMLHttpRequest control, except for IE7 which can use either one).
The readyState property changes to 4 when it is ready, so a function/method is attached to the onreadystatechange event. When it changes to 4, make sure the status property is set to 200 (OK).
After creating the function and have it do something, you then create the actual AJAX query to start the process via the open() method, where you pass GET|PUT, the filename and whether communication should be asynchronous (true) or synchronous (false). In case you don't get the sync/async thing, asynchronous means communicating while other things are being processed at the same time.
Now you send the query to the server via the send() method. For GET, you normally send null and for PUT, you might send some parameters, such as "userId=40&postId=20839" or something.
In the function attached to onreadystatechange, you would, as previously stated, check to make sure the readyState is 4 and the status is 200. If it is, then you would do something. Now usually you want to have some form of output, hence the reason AJAX would be used. You can use the responseText to get the text version of the response or you can parse the XML response yourself after using the responseXML property and DOM methods.

Here is a quick example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>AJAX Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<div id="page_container">
<form action="" method="GET">
<textarea cols="80" rows="25" id="tArea">Click the button below to begin</textarea>
<br>
<input type="button" value="Get Response Text" onclick="ajaxExecute()">
</form>
</div>
<script type="text/javascript">
function getXMLHttpRequest ()
{
var ajaxRequest;
try {
//Opera 8+, Safari, Firefox, IE7
ajaxRequest = new XMLHttpRequest();
}
catch (e) {
try {
//IE versions with MSXML 2.0 properly installed
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
//more for IE in case the above fails
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
// ajaxRequest is 'undefined'
}
}
}
return ajaxRequest;
}

function getResponseText (xmlHttp)
{
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
document.getElementById('tArea').value = xmlHttp.responseText;
}
else {
document.getElementById('tArea').value = 'Error - Status code: ' + xmlHttp.status;
}
}
else {
document.getElementById('tArea').value = "Waiting for response...";
}
}

function ajaxExecute ()
{
var xhr = getXMLHttpRequest();
if (xhr != 'undefined' && xhr != null) {
document.getElementById('tArea').value = 'Starting...';
xhr.onreadystatechange = function () { getResponseText(xhr); }
xhr.open("GET", "/", false); //get index.html or index.php or whatever from the root document directory
xhr.send(null);
}
}
</script>
</body>
</html>The above works in the latest versions of IE, Opera, Firefox and the Safari 3 Windows beta.

If you want more information, you might take a look at the XMLHttpRequest (http://wikipedia.org/wiki/XMLHttpRequest) entry on Wikipedia.

jcdevelopment
11-30-2007, 10:59 PM
Thank you, that helps some and points me to the right way, thank you



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum