PDA

View Full Version : Ajax Beginner

sysout
09-23-2009, 03:43 AM
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</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 Using Ajax</h1>
<form>
<input type="button" value="Display Message" onclick="getData('data.txt', 'targetDiv')" />
</form>
<div id="targetDiv"><p>The Fetched Data will go here</p></div>
</body>
</html>


I can't trace the error :(
data.txt : Ajax
FWDrew
09-23-2009, 04:00 AM
Works for me, I just tested it out on my server without any issue. This may be better suited for the JS section.
sysout
09-23-2009, 05:12 AM
yeah, it works.
So ajax must works on server side? I used .php just now.
Before : I used .html -> not working :(

Thanks palz ^^
Fou-Lu
09-23-2009, 05:38 AM
yeah, it works.
So ajax must works on server side? I used .php just now.
Before : I used .html -> not working :(

Thanks palz ^^

Sounds like you're testing by double clicking the file (ie: via file:// context instead of http:// context). IE will disable that ActiveX by default (unless its changed since IE6 which wouldn't suprise me). The only thing the server cares about is if the request is to a server processed page. And even then, it functions no differently from a standard page bar syntactically correct data is returned (XML).
Moving from PHP to JS.
seco
09-23-2009, 07:40 AM
jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#clickme").click(function(){
$.ajax({
url: "page.html",
cache: false,
success: function(html){
$("#psn").html(html);
}
});
});
});
</script>
<title>Untitled Document</title>
</head>

<body>
<a href="#" id="clickme"> click me
</a>
<div id="psn"></div>
</body>
</html>
sysout
09-26-2009, 06:03 AM
nice help palz ^^
smisisri
09-28-2009, 09:12 AM
That's a very interesting topic. But this field is still new to me. It will be grateful if you give me some more information about it. Thanks in advance.
__________________
Data entry-Virtual Assistant (http://****************)