What's a clean way to handle ajax success callbacks through a chain of object methods?

So, I'm trying to improve my javascript skills and get into using objects more (and correctly), so please bear with me, here.

So, take this example: http://jsfiddle.net/rootyb/mhYbw/

Here, I have a separate method for each of the following:

  • Loading the ajax data
  • Using the loaded ajax data

Obviously, I have to wait until the load is completed before I use the data, so I'm accessing it as a callback.

As I have it now, it works. I don't like adding the initData callback directly into the loadData method, though. What if I want to load data and do something to it before I use it? What if I have more methods to run when processing the data? Chaining this way would get unreadable pretty quickly, IMO.

What's a better, more modular way of doing this?

I'd prefer something that doesn't rely on jQuery (if there even is a magical jQuery way), for the sake of learning.

(Also, I'm sure I'm doing some other things horribly in this example. Please feel free to point out other mistakes I'm making, too. I'm going through Douglas Crockford's Javascript - The Good Parts, and even for a rank amateur, it's made a lot of sense, but I still haven't wrapped my head around it all)

Thanks!

Answers


I don't see a lot that should be different. I made an updated version of the fiddle here. A few points I have changed though:

  • Use the var keyword for local variables e.g., self.
  • Don't add a temporary state as an object's state e.g., ajaxData, since you are likely to use it only once.
  • Encapsulate as much as possible: Instead of calling loadData with the object ajaxURL, let the object decide from which URL it should load its data.

One last remark: Don't try to meet requirements you don't have yet, even if they might come up in the future (I'm referring to your "What if...?" questions). If you try, you will most likely find out that you either don't need that functionality, or the requirements are slightly different from what you expected them to be in the past. If you have a new requirement, you can always refactor your model to meet them. So, design for change, but not for potential change.


Need Your Help

How to apply an ng-class when data is added dynamically (?)

javascript angularjs ionic-framework animate.css

I have an application running with Ionic/Angular, all I need is to apply a class which is from the animate.css library, I have here this function which is the one working once you call

Grails: Trying to use tablesorter

jquery grails tablesorter

This is probably a really dumb question but I am trying to use table sorter with a Grails project and I have the jquery.tablesorter.js file copied into the 'js' directory of my Grails project and h...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.