SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax Book - Code problem

    Hi all,

    I just got into the build your own Ajax Web Applications book, have implemented the code and cannot get a correct run out of it... here's the code:

    Code:
    // JavaScript Document
    function Ajax() {
    	this.req = null;
    	this.url = null;
    	this.method = 'GET';
    	this.async = true;
    	this.status = null;
    	this.statusText = '';
    	this.postData = null;
    	this.readyState = null;
    	this.responseText = null;
    	this.responseXML = null;
    	this.handleResp = null;
    	this.responseFormat = 'text', // 'text', 'xml', or 'object'
    	this.mimeType = null;
    }
    
    this.init = function(){
    	if (!this.req) {
    		try {
    				//try to create object for firefox, safari, ie7 etc...
    				this.req = new XMLHttpRequest();
    		}
    		catch (e) {
    			try {
    				//try to creeate object for later version of IE.
    				this.req = new ActiveXObject('MSXML2.XMLHTTP');
    			}
    		catch (e) {
    			try {
    				//try to create object for earlier versions of IE.
    				this.req = new ActiveXObject('Microsoft.XMLHTTP');
    			}
    		catch (e) {
    				//could not create an XMLHttpRequest object.
    				return false;
    			}
    		}
    	  }
    	}
    	return this.req;
    };
    
    this.doReq = function() {
    	if(!this.init()) {
    			alert('Could not create XMLHttpRequest object.');
    			return;
    	}
    	this.req.open(this.method, this.url, this.async);
    	if (this.mimeType) {
    		try{
    			req.overrideMimeType(this.mimeType);
    		}
    		catch(e) {
    			//couldn't override MIME type
    		}
    	}
    	var self = this; //fix loss of scope in inner function
    
    this.req.onreadystatechange = function() {
    	if(self.req.readyState ==4){
    		switch(self.responseFormat) {
    			case 'text':
    				resp = self.req.responseText;
    				break;
    			case 'xml':
    				resp = self.req.responseXML;
    				break;
    			case 'object':
    				resp = req;
    				break;
    	}
    	if(self.req.status >= 200 && self.req.status <=299) {
    		self.handleResp(resp);
    	}
    	else {
    		self.handleErr(resp);
    	}
    	}
    };
    	this.req.send(this.postData);
    };
    
    this.setMimType = function(mimeType) {
    	this.mimeType = mimeType;
    };
    
    this.handleErr = function() {
    	var errorWin;
    	try {
    		errorWin = window.open('', 'errorWin');
    		errorWin.document.body.innerHTML = this.responseText;
    	}
    	catch (e) {
    		alert('An error occurred, but the error message cannot be ' 
    			  + 'displayed. This is probably because of your browser\'s '
    			  + 'pop-up blocker.\n'
    			  + 'Please allow pop-ups from this website if you want to '
    			  + 'see the full error messages. \n'
    			  + '\n'
    			  + 'Status Code: ' + this.req.status + '\n'
    			  +' Status Description: '+ this.req.statusText);
    	}
    };
    
    this.setHandlerErr = function(funcRef) {
    		this.handleErr = funcRef;
    }
    
    this.setHandlerboth = function(funcRef) {
    	this.hndleResp = funcRef;
    	this.handleErr = funcRef;
    };
    
    this.abort = function(){
    	if(this.req) {
    		this.req.onreadystatechange = function(){ };
    		this.req.abort();
    		this.req = null;
    	}
    };
    
    this.doGet = function(url, hand, format) {
    	 this.url = url;
    	 this.handleResp = hand;
    	 this.responseFormat = format || 'text';
    	 this.doReq();
    };
    I am getting an error in my ajaxtest.html file that says, doGet is not a function, but I can see clearly that it is. Here is my ajaxtest.html file:

    HTML Code:
    <!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" />
    <title>AJAX Tutorial</title>
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript">
    	var hand = function(str) {
    		alert(str);
    	}
    	var ajax = new Ajax();
    	ajax.doGet('fakeserver.php', hand, 'text');
    </script>
    </head>
    <body>
    </body>
    </html>
    I have the fakeserver.php set up:

    PHP Code:
    <?php
    header
    ('Content-Type: text/plain');
    sleep(rand(312));
    print 
    'ok';
    ?>
    A solution would be awesome!

    Thanks in advance!

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    You have defined the functions outside of the constructor so "this" no longer refers to "Ajax". Either move them inside the Ajax constructor function or replace this with Ajax on the front of the function definitions.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •