Ajax Class >> Not passing responseText

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Ajax Class >> Not passing responseText

Post 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!
devendra-m
Forum Contributor
Posts: 111
Joined: Wed Sep 12, 2007 3:16 am

Re: Ajax Class >> Not passing responseText

Post 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]
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Ajax Class >> Not passing responseText

Post 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?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: Ajax Class >> Not passing responseText

Post by Jonah Bron »

Hm. That's funny. I'll test it again.
pickle wrote:why not just use one of them?
Learning experience? :mrgreen:
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: Ajax Class >> Not passing responseText

Post 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!
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: Ajax Class >> Not passing responseText

Post 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;
    }
}
Post Reply