AJAX – Best Practices for Loading Data via AJAX

ajaxPHPsqltheory

I am using google maps and returning html/lat/long from my MySQL database

Currently

  1. A user picks a business category e.g; "Video Production".
  2. an ajax call is sent to a CodeIgniter controller
  3. the Controller then queries the db, and returns the following data via JSON
    1. Lat/Long of the marker
    2. HTML for the popup window
    3. this is approximately 34 rows in the database across two tables per business
  4. the ajax call receives this data and then plots the marker along with the html onto the map

The data that is returned from the controller is one big json object… This is done for all businesses that exist in the Video Production category (currently approx 40 businesses). As you can see, pulling this data for multiple categories (100s of businesses) can get very very taxing on the server.

My question is

Would it be more beneficial to modify the process flow as such:

  1. a user picks a business category e.g; "Video Production".
  2. an ajax call is sent to a CodeIgniter controller
  3. the controller then queries the database for the location base information
    1. lat/long
    2. level (used to change marker icon color)
    3. This would be a single row per business with several columns
  4. the ajax call receives this data and then plots the marker on the map
  5. when the user clicks a marker an ajax call is sent to a CodeIgniter Controller
  6. the controller queries the database for the HTML and additional data based on business_id

and if not, what are some better suggestions to this problem?

In summary this means rather than including the HTML and additional data along for each business, only submitting minimal location information and then re-query for that information when each business marker is clicked.

Potential Downsides

  1. longer load times when a user clicks a marker icon
  2. more code??
  3. more queries to the database

Best Answer

Unless you notice that this is causing some sort of performance issue, I would leave as is.

Generally, network round trips are the slowest item, and should be minimized as much as possible. I would only worry about such an optimization once you get to the point where there is an observable performance issue. Without profiling, it is impossible to tell which method will be truly faster, and it could be different for each user. JSON is a fairly terse format, and a lot of stuff can be condensed.

Also, if you do find that performance is an issue, you might want to look into client side templating (such as KnockoutJS, jQuery templates, Handlebars, Mustache, ...) for the popup window, assuming that the content is based off of a template. This may allow you to minimize the data sent.

Related Topic