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

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
});

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..');
    }
});

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>
<% } %>