JQuery and Ajax to get the response Line by Line

Question

I am making an Ajax call through jQuery as follows.

  $.ajax({
       type:"GET",
       cache:false,
       url:"SomeURL",
       data:{
            input : some_var,
       },    // multiple data sent using ajax.
       async: false,
       success: function (response) {
         console.log("Success");
         $("#progress-textarea").append(response + "\n");
       },//sucess
       failure: function (response) {
          console.log("Failure");
          $("#progress-textarea").append("Failed to Execute " + final_command + "\n");
       }//fail if anything wrong happens 
 });

Lets say I get the following response,

This is line 1
// Performing some action that takes time..
This is line 2
// Performing some action that takes time..
This is line 3
// Performing some action that takes time..
This is line 4
// Performing some action that takes time..
This is line 5
// Performing some action that takes time..
This is line 6
// Performing some action that takes time..
This is line 7
// Performing some action that takes time..
This is line 8
// Performing some action that takes time..
This is line 9
// Performing some action that takes time..
This is line 10

I am getting the response in one go, all together. I am appending the response to a textbox to show some progress of execution. How can I implement the Ajax call so as to get the response line by line and append each line into the textarea immediately?

Possible duplicate of [JQuery ajax progress via xhr](https://stackoverflow.com/questions/22502943/jquery-ajax-progress-via-xhr) — ADreNaLiNe-DJ, Mar 07 '18 at 11:01
I am guessing you make multiple AJAX calls. If so, the 'actions that take time' just take no time to finish. — jerkan, Mar 07 '18 at 11:10
What I guess you are searching for is **streaming response**. This [GIST](https://gist.github.com/sohelrana820/63f029d3aa12936afbc50eb785c496c0) link may help you. — vedbhawsar, Mar 07 '18 at 11:13

AL-zami · Answer 1 · 2018-03-07T18:15:30.557

You can use promise api to generate this behavior.Here is the idea. You first fetch text data using ajax request.The ajax is designed to return a promise.Then use promise chain to split the data by each line and print them out after a certain amount of delay to mimic a delay

    function fetch(){
        return new Promise((resolve,reject)=>{
            let http = new XMLHttpRequest()
            http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200){
                   resolve('this is line 1\nthis is line 2') // suppose this is your response from server
                }
            }
            http.open('GET','sample.txt',true)
            http.send()
        })
    }

    fetch()
    .then(data=>data.split('\n'))
    .then(delay())
    .then(delay())

    function delay(){
        return function(data){
            return new Promise(resolve=>{         
               setTimeout(()=>{console.log(data[0]);data.shift();resolve(data)},2000)
            })
        }  
    }

data=>data.split('\n') is an arrow function, it has been passed to the 'then' method of promise as a callback. I hope that's what you asked if I understand you correctly — AL-zami, Dec 07 '18 at 06:29

JQuery and Ajax to get the response Line by Line

1 Answers1