Skip navigation
mr. modus
mr. modus
Currently Being Moderated

Speed of Ajax & CF vs. Spry JSON & JS : Very Disappointed - Please comment.

Feb 11, 2008 9:57 AM

I have an app that formerly used JS to make an Ajax call to a CF page. The CFServer would create the HTML for me and return it to the ajax call then the ajax call sets the innerHTML of a div with the returned code. It works fine but I started to wonder if I'd be better off having CF create a JSON structure and return it then have JS parse the JSON data into the HTML for me. I got very excited thinking it would 1) be faster and 2) be less bandwidth usage which would translate into less cost to run the app.

So I spent the last two days changing my JS code to Spry.Data.JSONDataSet and to parse the HTML and my CF code to create a JSON dataset rather than HTML. After two days of messing around I finally get it all working and much to my shegrin I find it takes almost 5x longer for my regular calls (100 records or so) and even more for large calls over 500 records so. And if my JSON dataset is too big (over 1000 records) I just end up getting Spry load errors.

So my question is... why bother using Spry and JS in the first place? I was under the impression that using JS to create my HTML would be way faster and am VERY dissapointed to find out that I was wrong. Am I doing something wrong or is that just the way it is? I have a VERY fast computer so it's certainly not a resource matter.

Here's my JS code that parses the JSON dataset into HTML. Am I just doing something wrong?

function createCustomerHTML(rows) {
// Create var to hold orders.
var customers = rows[0].customer;

//Create var to hold customer HTML.
var custHTML = "";

custHTML += "<br><span style=\"font-family:arial;font-size:12px\">Double-click a Customer</span>";
custHTML += "<table width=\"100%\" cellpadding=\"5\" cellspacing=\"0\" border=\"0\" id=\"CS_Results\">";

var rowOne = "border-top:1px solid black;";

//Loop through customer records.
for(var a=0; a<customers.length; a++) {
custHTML += "<tr>";
custHTML += "<td class=\"csTD\" style=\"" + rowOne + "\">" + customers[a].Name + "</td>";
custHTML += "<td class=\"csTD\" style=\"" + rowOne + "\">" + customers[a].Address + " </td>";
custHTML += "<td class=\"csTD\" style=\"" + rowOne + "\">" + customers[a].Location + "</td>";
custHTML += "<td class=\"csTD\" style=\"" + rowOne + "border-right:1px solid black;\"><nobr>" + customers[a].Phone + "</nobr></td>";
custHTML += "</tr>";

rowOne = "";
}
custHTML += "</table>";

// Add HTML to searchResults.
document.getElementById("searchResults").innerHTML = custHTML;
}
255 Views   1 Reply   Latest reply: xspiderx1, Feb 27, 2012 9:51 AM
 
Replies
  • xspiderx1
    Currently Being Moderated
    1. xspiderx1,
    Feb 27, 2012 9:51 AM   in reply to mr. modus
    Report

    I'm curious why you are doing string concatenation when you could use a spry region with your dataset?

    Are you doing a search and returning the results as ajax? In any case, you can use a spry region with a table and have spry itself handle creating the rows of the table. I do that with my app, though I use XML and not JSON, but it goes very fast.

    Take a look at the documentation here on how to use a spry region with a dataset. The example is xml, but it should work with json.

    http://labs.adobe.com/technologies/spry/articles/data_set_overview/

     

    Here's some HTML that I copied out of the article.

     

    <div id="Specials_DIV" spry:region="dsSpecials">

    <table id="Specials_Table">

    <tr>

    <th>Item</th>

    <th>Description</th>

    <th>Price</th>

    </tr>

    <!--User clicks to reset the current row in the data set-->

    <tr spry:repeat="dsSpecials" spry:setrow="dsSpecials">

    <td>{item}</td>

    <td>{description}</td>

    <td>{price}</td>

    </tr>

    </table>

    </div>

     

    So, you don't need to concatenate your variable then insert it into the dom.

    Just give spry your html, add in variables in curly braces, and let spry render it.

     

    Here's some snippets of my site:

    <div id="custs" spry:region="dsCustomers">

    <table spry:state="loading"><tr><td valign="middle"><img src="icons/throbber-active.gif" height="13px" width="15px"><b>Loading items ...</b></td></tr></table>

    <table spry:state="ready" spry:if="{ds_RowCount} == 0"><tr><td><b>No results! Try a different search.</b></td></tr></table>

     

    So what I'm doing is if the table is loading, I just want to show the 'loading icon'. If there are no results, then just show that there are no results. If there are results though, you can follow the example as above.

     

    A simpler example using the spry json dataset is here: http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSe tSample.html

    They are using simple spans, but you can create a table and use the dataset to iterate over the rows. Take a look at example 7 here.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)