Home / Ajax / Stream records from database in one HTTP request using jQuery, Ajax and PHP

Stream records from database in one HTTP request using jQuery, Ajax and PHP

To stream records from database in one http request is a brilliant idea to make a process behave fast and reliable. This realtime loading of data is a robust method practised by well known websites like facebook, twitter, flipkart, makemytrip and many others. Breaking down large set of results into smaller bits and loading helps faster loading of data ultimately reducing time lag and server load. In this tutorial we will be using a plugin called pjstreamer developed by Manujith Pallewatte.

Advantage of using this method

Suppose if you have to fetch 1000 records at a time. You need write a query to fetch all of those records and feed it in an array and then push it back to the requester. What happens here?

  • The server works on fetch 1000 records that takes its own time
  • Meanwhile the user has to wait until the response is rendered on the screen
  • The user is least bothered about all 1000 results but specific to a set of records

In this method we try to achieve the same but in a more intuitive way.

  • Get one record at a time and push it to the requester
  • Put the response on the screen
  • Meanwhile another record would be fetched and pushed back
  • This also avoids server load when multiple users access same data

I believe this concept will go viral over the developers field very soon! Let us now jump to the coding part

The Markup

CSS

Do not bother about the CSS as I’ve used CSS from various source to make it look better.

Javascript

First get a copy of pjstreamer from github and extract it to your project folder. In the index page include the javascript file which you have extracted.

In the above code we first create a XMLHTTP object and make an AJAX request to process.php and the response received is parsed to JSON. The result is then formed as an HTML snippet and inserted in to the holder class. This continues until process.php tends to give out data.

PHP

In process.php we first include pjstreamer.php to use the class PJStreamer::startStream() which sets the conditions for data being sent out. Next, we write a query to fetch all records and put them in array. Then go into a loop and pull one record a time and send it back to the requester using the class PJStreamer::sendStream().

You can notice that I have used usleep() which means you are pausing the loop for a few microseconds. In this demo I have used 100000 micro-seconds which is only 1/10th of a second. You do not need to use sleep as it is only for demonstration purpose. You can also check your browser log for the response by using the shortcut keys ctrl + shift + j

Note: If you are trying to pullout a few thousand records at a time make sure to set max_execution_time to a desired value to stop being timed out! That is it!

Download   Preview

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Check Also

Weather forecast API using jQuery, Ajax and PHP

Weather forecast API is widely used as widgets in small blogs to huge news website …

  • dshizzle

    Doesn’t work. Browser tab loads for a few seconds before displaying *all* records at once. PHP 7.1.1

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!