Ajax beginner in trouble

santrooper · 08-01-2007, 12:56 PM

Hello all,
I have just strted learning ajax, I am trying to implement it using the object oriented model, but it is not working.....
I am submiting my code below
Please help, any body please do........
------------
ajaxObject.js
------------
//==JavaScript Document==//
function sanAjax(){
var xmlHttpRequestObj=null;

////////////////////////////////////////////////////////
this.xmlHttpRequestInit=function(){
var xmlhttpObj=null;
try{
// Firefox, Opera 8.0+, Safari
xmlhttpObj=new XMLHttpRequest();
}
catch (e){
// Internet Explorer
try{
xmlhttpObj=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlhttpObj=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
alert('Your brwser is VERRRRRRY OLDDDDD !! Please let it resr and get a new one.');
return(false);
}
}
}
return xmlhttpObj;
}
//////////////////////////////////////////////////////
this.actionOnStateChange=function() {
alert(this.xmlHttpRequestObj);
if(this.xmlHttpRequestObj.readyState == 4){
if(this.xmlHttpRequestObj.status >= 400 && this.xmlHttpRequestObj.status < 500){
alert('sdsdsdsdsd');
}
else if(this.xmlHttpRequestObj.status >= 500 && this.xmlHttpRequestObj.status < 600){
alert('yyyyyyyyyyyyyyyyyyyy');
}
else{
alert('Helloooooooooooooooooo');
//document.getElementById(targetid).innerHTML=this.xmlHttpRequestObj.responseText;
}
}
}
//////////////////////////////////////////////////////
this.sanAjaxInit();
}
/////////////////////////////////////////////////////////////////
sanAjax.prototype.sanAjaxInit=function(){
this.xmlHttpRequestObj=this.xmlHttpRequestInit();

if(this.xmlHttpRequestObj == null){
alert("Your browser is not supporting Ajax!");
return;
}

if(this.xmlHttpRequestObj.overrideMimeType){
this.xmlHttpRequestObj.overrideMimeType('text/xml');
}
}
/////////////////////////////////////////////////////////////////
sanAjax.prototype.sendRequests=function(){
if (this.xmlHttpRequestObj==null){
alert("Browser does not support HTTP Request");
return;
}
else{
alert(this.xmlHttpRequestObj);
this.xmlHttpRequestObj.onReadyStateChange=this.actionOnStateChange;
}
this.xmlHttpRequestObj.open("GET",'index.php',true);
//ajaxObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
this.xmlHttpRequestObj.send(null);
}
---------
index.php
---------
<html>
<head>
<title>::Ajax Test::</title>
<script language="javascript" type="text/javascript" src="ajax_includes/ajaxObject.js"></script>
<script language="javascript" type="text/javascript">
var xmlHttp=null;
function createAjaxObj(){
//xmlHttp=new ZaxasRequest();
xmlHttp=new sanAjax();
}
function changeContent(){
xmlHttp.sendRequests();
}
</script>
</head>
<body onLoad="createAjaxObj()">
<div id="contDiv">
<form name="subNam" id="subNam">
<input type="text" name="cNam" id="txtname">
<input type="button" onClick="changeContent()" value="send">
</form>
</div>
</body>
</html>

rwedge · 08-01-2007, 09:16 PM

One error is onreadystatechange does not have capital letters.
You may have more errors, but that's a start.

A1ien51 · 08-02-2007, 03:34 PM

As already mentioned, you have camel case for onreadystatechange when it should all be lower.

Code:

this.xmlHttpRequestObj.onReadyStateChange=this.actionOnStateChange;

I have a feeling you also would need to use a closure:

Code:

var this_ = this;
this.xmlHttpRequestObj.onreadystatechange= function(){this_.actionOnStateChange();}

Eric