5

The problem:

I have a jquery ajax (post) based website, where the website doesn't refresh every time user navigates to another page. Which means I have to pull data with ajax and present it to the user. Now for pulling small text data, this system works great. However once the text data is huge (let's say over 200,000 words), the load time is quite high (especially for mobile users). What I mean to say is, ajax tries to load full text information and displays it after it is done loading all text. So the user has to wait quite a bit to get the information.

If you look at a different scenario, let's say wikipedia. There are big pages in wikipedia. However, a user doesn't feel he/she has to wait a lot because the page loads step by step (top to bottom). So even if the page is large, the user is already kept busy with some information. And while the user is processing those, rest of the page keeps loading.

Question:

So is it possible to display, via ajax, information on real time load? Meaning keep showing whatever is loaded and not wait for the full document to be loaded?

pewpewlasers
  • 3,025
  • 4
  • 31
  • 58
  • 2
    As far as I know the content of Wikipedia pages is parted to categories. Maybe using separate call to load parts of contents would do the job? Also take a look [here](http://stackoverflow.com/questions/2753982/how-to-load-an-ajax-jquery-request-response-progressively-without-waiting-for). – Michał Mar 20 '14 at 06:28
  • @Michał if php (or other server side language) is serving the data directly (no js involved), i think the problem in the question doesn't occur. The problem is mainly for when user has to pull data via ajax. However, loading parts could be a solution, but I am not sure if it is sustainable. It could add complexity while trying to cover all scenarios. – pewpewlasers Mar 20 '14 at 06:34
  • http://stackoverflow.com/questions/7740646/jquery-ajax-read-the-stream-incrementally – Ivarpoiss Mar 20 '14 at 09:18
  • you can use oboejs, but only for streaming objects from JSON-structured files –  Mar 21 '14 at 06:43
  • if you want to stream HTML you need a comet server or take a look at this which illustrates a simple alternative - not tested, but needs some changes on the server ( the content type is octet-stream): http://www.binarytides.com/ajax-based-streaming-without-polling/ –  Mar 21 '14 at 06:57
  • @Michał Thanks for your answer. Based on your answer, I found this website that uses ajax to load more content. https://naya.com.np/?p=post.71a58e8cb75904f24cde464161c3e766 I might use this. – pewpewlasers Mar 26 '14 at 16:25

1 Answers1

1

Ajax (xmlhttprequest) is a really great feature in html5, for the same thing, ajax is better than socket, by that, I mean non-persistant connection but as soon as the connection is persistant (impossible for xmlhttprequest)socket is fastest.

The simplest way is to use web socket is socket.io but you need a JavaScript server to use this library and there is one host where you can get one for free with admin tools: heroku.

You can use PHP server if you dont want to use JavaScript server with the socketme library but it is a bit more complex.

Also, you can think diferently, you try to send a lot of data. 200 000 words is something like 70ko (I try a lorem ipsum), the upload speed is relative to data and connection speed/ping. You can compress by any way your data before sending and uncompress server-side. There is probably thousand way to do this but I think the simpliest way is to find a JavaScript library to compress/uncompress data and simply use your jquery ajax to send what's compressed.

EDIT — 21/03/14:

I misunderstood the question, you want to display the current upload progress ? Yes, it is possible by using the onprogress event, in jQuery you must follow this simple exemple: jQuery ajax progress

Jordan
  • 3,776
  • 3
  • 22
  • 28