Load API results through ajax

Question

I'm wondering that how API results can load as response comes.

similar functionality

I think using ajax from database we can get. But here from API(live results) SOAP API.

any suggestions?

EDIT

My current ajax function is

$.ajax({
    type: "get",
    url: "<?=base_url()?>search/showresults",
    cache: false,               
    data:datastring,
    beforeSend:function(){
           $('#resultloader').show();
    },
    success: function(response){
        $('#resultloader').hide(500);
        $('#showflightresults').html(response);
    },
    error: function(){                      
         //alert('Error while Sending request..');
    }
});

Thank you

Grampositive

You should loop function which connect to Your data source. Use setTimeout feature in JS. Each async request (for example jquery $.ajax, have in callback function parameter data - which is response from API you use can use on Your website). – Slide

@Slide i have edited my question check it – Grampositive

@Slide Can you please give example – Grampositive

Answer 1

Try setting dataType as xml and processData as false and check.

$.ajax({
    type: "get",
    url: "<?=base_url()?>search/showresults",
    cache: false,               
    data:datastring,
    processData: false,
    dataType:"xml",
    beforeSend:function(){
           $('#resultloader').show();
    },
    success: function(response){
        $('#resultloader').hide(500);
        $('#showflightresults').html(response);
    },
    error: function(){                      
         //alert('Error while Sending request..');
    }
});

EDIT:-

You need to iterate through php array.

var arrayFromPHP = <?php echo json_encode($arrayPHP) ?>;

$.each(arrayFromPHP, function (i, elem) {
    // do your stuff
});

Consortium

can you please give one example – Grampositive

Actually what i'm doing is: i'm calling showresults method in search controller, then i'm requesting api results and resopnse is coming in xml format and converting to php array and then loading view. Now what changes i have to do? – Grampositive

@NareshKamireddy So are you getting the data from the api now? – Consortium

Yes i'm able to get data from api in xml format but converting it into php array and then loading view(Codeigniter). – Grampositive

where i have to iterate? in controller? – Grampositive

@NareshKamireddy Iterate in the JavaScript and append html depending upon your requirement. – Consortium

let us continue this discussion in chat – Grampositive

Answer 2

try use this one

formData = {
    param1: param1
}
$.ajax({
    type: "get",
    url: "<?=base_url()?>search/showresults",
    cache: false,               
    data: formData,
    dataType: "xml",
    beforeSend:function(){
           $('#resultloader').show();
    },
    success: function(data){
        $('#resultloader').hide(500);
        $('#showflightresults').html(data);
    },
    error: function(){                      
         //alert('Error while Sending request..');
    }
});

Tedtedd

can you please give one example – Grampositive

the concept still same. you can test my app here. github.com/datomnurdin/service-finder-mobile – Tedtedd

you can run locally but you need to use ripple chrome extension to allow external web service – Tedtedd

i think it is in java i don't understand – Grampositive

Answer 3

What I do is process and store the results on the server in a background thread that reads from a message queue. In our case, this is for insurance quotes. As each carrier's insurance quote is finished, its premium is stored in our database.

On the client side, we call the server using a timer loop. See Ben Alman - doTimeout

You can see this in action at Autoquoter.com. Just use an illinois zip code and enter some dummy info to get a quote (zipcode=60010 for example). You can view the source for our client side code.

Here is our server side code. Each message is an xml serialized insurance carrier.

           var queue = new QueueManagerSoapClient("QueueManagerSoap");
            var messages = queue.RemoveAll(session.Id);
            if (messages.Any())
            {
                var serial = new XmlSerializer(typeof(Carrier));
                foreach (var message in messages)
                {
                    var carrier = serial.Deserialize(new StringReader(message)) as Carrier;
                    found = carrier != null;
                    if (found)
                    {
                       session.Carriers.Add(carrier);
                    }

                }
                session.SaveChanges();                    
            }
            return View("ResultView",session.Carriers);

UPDATED:

There are three components to make this work.

First you'll need to launch an asynchronous request when your web page is loaded. This request would load a page that performs your search. It should store results into your database as they are received, or add them to a message queue service. You'll need to mark the search as completed.

<%
    var wc = new WebClient();
    wc.DownloadStringAync(new Uri("http://baseurl/search/submitrequest"));
%>

Secondly, add a timer to your web page that performs an ajax load periodically (every 10 seconds for example)

var interval = setInterval(function() {
                  $('#resultsDiv').load("/search/showresults");
               },10000);

Lastly, you'll need to terminate the interval when all of the results have been stored in the database. You could add something like this at the bottom of the search results page.

<% if ( isFinished ) { %>
    <script type="text/javascript">
         interval.stop();
    </script>
<% } %>

Jeremyjerez

how i can make it use for me> – Grampositive

I'm editing my answer to describe this in more detail @Grampositive – Jeremyjerez