Page 1 of 1

Ajax Class >> Not passing responseText

Posted: Fri Feb 29, 2008 6:58 pm
by Jonah Bron
Hello, world!

Here I am, trying to make an Ajax class (just a little something to make my life easier), and lo and behold, it doesn't work. I've been testing, and got it down to this:

Code: Select all

function CAjax(){
    this.load = false;
    this.rText = false;
    this.rXML = false;
    this.rHTML = false;
    this.getAjax = function (){
        var ajx = false;
        try {
            ajx = new XMLHttpRequest();
        }catch (e){
            try {
                ajx = new ActiveXObject('Msxml2.XMLHTTP');
            }catch (e){
                ajx = new ActiveXObject('Microsoft.XMLHTTP');
            }
        }
        return ajx;
    }
    this.connect = function (url, method, fields){
        method = method ? method : 'get';
        method = method.toLowerCase();
        var ajx = this.getAjax();
        if (ajx){
            if (method=='get'){
                ajx.open('GET', url+'?'+fields, true);
                ajx.onreadystatechange = function (){
                    this.load = ajx.readyState;
                    if (ajx.readyState==4){
                        this.rText = ajx.responseText;//This is the line
                    }
                }
                ajx.send(null);
            }
        }else{
            return false;
        }
    }
}
 
var ajax = new CAjax();
ajax.connect('url', 'get', false);
There is a button that alerts the value of this.rText. It alerts "undefined".
It's supposed to pass the responseText to the class variable rText, but it doesn't.
Have been testing, and figured it probably would be a quick fix for you Javascript gurus.

Thanks!

Re: Ajax Class >> Not passing responseText

Posted: Sun Mar 02, 2008 11:09 pm
by devendra-m
~pickle | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


can you give complete code.when I tested your code is working.

test.php

Code: Select all

 
<script language="JavaScript" src="ajx.js">
</script>
<script>
function test_click()
{
    var ajax = new CAjax();
    ajax.connect('ajxtest.php', 'get', false);
}
 
</script>
<input type="button" id="test" value="click" onClick="test_click()">
 
ajxtest.php

Code: Select all

 
<?
    print('test in ajax');
?>
ajx.js

Code: Select all

 
  function CAjax(){
     this.load = false;
     this.rText = false;
     this.rXML = false;
     this.rHTML = false;
     this.getAjax = function (){
         var ajx = false;
         try {
             ajx = new XMLHttpRequest();
         }catch (e){
             try {
                 ajx = new ActiveXObject('Msxml2.XMLHTTP');
             }catch (e){
                 ajx = new ActiveXObject('Microsoft.XMLHTTP');
             }
         }
         return ajx;
     }
     this.connect = function (url, method, fields){
         method = method ? method : 'get';
         method = method.toLowerCase();
         var ajx = this.getAjax();
         if (ajx){
             if (method=='get'){
                 ajx.open('GET', url+'?'+fields, true);
                 ajx.onreadystatechange = function (){
                     this.load = ajx.readyState;
                     if (ajx.readyState==4){
                         this.rText = ajx.responseText;//This is the line
                         document.getElementById('test').value=this.rText;
                     }
                 }
                 ajx.send(null);
             }
         }else{
             return false;
         }
     }
 }
  
// var ajax = new CAjax();
// ajax.connect('url', 'get', false);
 
 

~pickle | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Re: Ajax Class >> Not passing responseText

Posted: Mon Mar 03, 2008 9:53 am
by pickle
I haven't looked at your code, but I'm wondering why you're re-inventing the wheel? There are lots of libraries out there with AJAX support - why not just use one of them?

Re: Ajax Class >> Not passing responseText

Posted: Mon Mar 03, 2008 2:12 pm
by Jonah Bron
Hm. That's funny. I'll test it again.
pickle wrote:why not just use one of them?
Learning experience? :mrgreen:

Re: Ajax Class >> Not passing responseText

Posted: Mon Mar 03, 2008 2:48 pm
by Jonah Bron
Okay, tested it again. I think I narrowed down the problem: this is having problems. It seems that

Code: Select all

if (ajx.readyState==4){
    this.rText = ajx.responseText;
    ...
is working with a different this than it's supposed to. I suspect that this is because it is in a function, inside a function. Is there a way to pass this into the onreadystatechange sub-function?

Thanks for your help!

Re: Ajax Class >> Not passing responseText

Posted: Mon Mar 03, 2008 6:25 pm
by Jonah Bron
Thanks for your help. I ended up re-writing it in a different manner, with more of an OOP sense, and chaining :mrgreen:

Code: Select all

function AJAX(){
    //-----------
    // Private variables
    //-----------
    var _URL = false;
    var _PARAMS = false;
    var _METHOD = 'GET';
    var _AJAX = getAjax();
    var _THIS = this;
    
    //-----------
    // Private functions
    //-----------
    function getAjax(){
        var ajax = false;
        try {
            ajax = new XMLHttpRequest();
        }catch (e){
            try {
                ajax = new ActiveXObject('Msxml2.XMLHTTP');
            }catch (e){
                try {
                    ajax = new ActiveXObject('Microsoft.XMLHTTP');
                }catch (e){
                    onNoAjax();
                }
            }
        }
        return ajax;
    }
    function onLoading(){
        _THIS.onLoading();
    }
    function onLoad(){
        _THIS.onLoad();
    }
    function onNoAjax(){
        _THIS.onNoAjax();
    }
    
    //-----------
    // Public events
    //-----------
    this.onLoading = function (){};
    this.onLoad = function (){};
    this.onNoAjax = function (){};
    //-----------
    // Public functions
    //-----------
    this.setURL = function (url){
        _URL = url;
        _THIS = this;
        return this;
    }
    this.setMethod = function (method){
        _METHOD = method;
        _THIS = this;
        return this;
    }
    this.setParams = function (params){
        _PARAMS = params;
        _THIS = this;
        return this;
    }
    this.send = function (){
        _THIS = this;
        onLoading();
        if (_AJAX){
            if (_METHOD.toUpperCase()=='POST'){
                _AJAX.open('POST', _URL, true);
                _AJAX.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                _AJAX.setRequestHeader('Content-length', _PARAMS.length);
                _AJAX.setRequestHeader('Connection', 'close');
                _AJAX.onreadystatechange = function (){
                    if (_AJAX.readyState==4){
                        onLoad();
                    }
                }
                _AJAX.send(_PARAMS);
            }else{
                _AJAX.open('GET', _URL+'?'+_PARAMS, true);
                _AJAX.onreadystatechange = function (){
                    if (_AJAX.readyState==4){
                        onLoad();
                    }
                }
                _AJAX.send(null);
            }
        }else{
            onNoAjax();
        }
    }
    this.getText = function (){
        _THIS = this;
        return _AJAX.responseText;
    }
    this.getXML = function (){
        _THIS = this;
        return _AJAX.responseXML;
    }
    this.getHTML = function (){
        _THIS = this;
        return _AJAX.responseHTML;
    }
}