Solved

How to Transfer large json from server to browser part by part

Posted on 2016-09-20
2
64 Views
Last Modified: 2016-09-27
HI,
In my web application i build a json out of a query. And sometimes its very huge.
I am displaying the data from json on the web page.
I make an ajax call and wait for the full response and then display it on the web page with scrollbar.
If the json size is small then this approach is fine but with large json the page just hangs waiting for the data to come up.
A single page can hold approx 10 elements from the json.
So i need some way to transfer the initial 10 elements of json quickly and then display it on page and the rest can come lazily which anyway the user will see only if he scrolls down.

I think there could be two approaches to it :
1) Send the initial 10 elements so that user can see it. And at the back keep waiting till the data is transfered and just append it to web page. and if the user scrolls meanwhile he just waits with a loading image showing

2) Other appraoch could be only when the user scrolls down do i make a call from say next 20 elements...and append it to the web page.

Please suggest which way is better and feasible.
Also how do i go about coding this in javascript and java.
how is such a problem solved.
Also any better approach ?

Thanks
0
Comment
Question by:Rohit Bajaj
  • 2
2 Comments
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
I have removed the Java EE tag as this question is not related to Java -- only to javascript.
0
 
LVL 21

Accepted Solution

by:
Kim Walker earned 500 total points
Comment Utility
This expert suggested creating a Gigs project.
My recommendation would be to make two separate ajax calls -- one for the initial 10 elements and another for the remaining elements. Depending on your database, it should be easy to limit the first call to the first 10 records and start the second call with the eleventh record. Both ajax calls could be made simultaneously but that might cause problems if the second completes before the first. The first ajax call could easily trigger the second call when it completes. Or the parent div could remain hidden until the first call completes and the first call prepends to the div while the second call appends.

Your proposed alternative of appending the additional records in chunks as the viewer scrolls the page is not a bad idea. It would be similar to the way Facebook works. But I am personally annoyed by the way Facebook pauses and jumps when scrolling. Your record rendering might not be as cumbersome as Facebooks though.

Either way, the solution to this would be complicated -- beyond the scope of this forum. I recommend EE Gigs to get an expert to assist in your project.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now