I'm learning jQuery, and I'm trying to find a simple code example that will poll an API for a condition. (ie, request a webpage every few seconds and process the results)
I'm familiar with how to do AJAX in jQuery, I just can't seem to find the "proper" way of getting it to execute on a "timer".
jQuery.Deferred() can simplify management of asynchronous sequencing and error handling.
polling_active = true // set false to interrupt polling
function initiate_polling()
{
$.Deferred().resolve() // optional boilerplate providing the initial 'then()'
.then( () => $.Deferred( d=>setTimeout(()=>d.resolve(),5000) ) ) // sleep
.then( () => $.get('/my-api') ) // initiate AJAX
.then( response =>
{
if ( JSON.parse(response).my_result == my_target ) polling_active = false
if ( ...unhappy... ) return $.Deferred().reject("unhappy") // abort
if ( polling_active ) initiate_polling() // iterative recursion
})
.fail( r => { polling_active=false, alert('failed: '+r) } ) // report errors
}
This is an elegant approach, but there are some gotchas...
then()
to fall through immediately, the callback should return another thenable object (probably another Deferred
), which the sleep and ajax lines both do.function make_call()
{
// do the request
setTimeout(function(){
make_call();
}, 5000);
}
$(document).ready(function() {
make_call();
});
I created a tiny JQuery plugin for this. You may try it:
$.poll('http://my/url', 100, (xhr, status, data) => {
return data.hello === 'world';
})
function poll(){
$("ajax.php", function(data){
//do stuff
});
}
setInterval(function(){ poll(); }, 5000);
Here's a helpful article on long polling (long-held HTTP request) using jQuery. A code snippet derived from this article:
(function poll() {
setTimeout(function() {
$.ajax({
url: "/server/api/function",
type: "GET",
success: function(data) {
console.log("polling");
},
dataType: "json",
complete: poll,
timeout: 2000
})
}, 5000);
})();
This will make the next request only after the ajax request has completed.
A variation on the above that will execute immediately the first time it is called before honouring the wait/timeout interval.
(function poll() {
$.ajax({
url: "/server/api/function",
type: "GET",
success: function(data) {
console.log("polling");
},
dataType: "json",
complete: setTimeout(function() {poll()}, 5000),
timeout: 2000
})
})();
(function poll() {
setTimeout(function() {
//
var search = {}
search["ssn"] = "831-33-6049";
search["first"] = "Harve";
search["last"] = "Veum";
search["gender"] = "M";
search["street"] = "5017 Ottis Tunnel Apt. 176";
search["city"] = "Shamrock";
search["state"] = "OK";
search["zip"] = "74068";
search["lat"] = "35.9124";
search["long"] = "-96.578";
search["city_pop"] = "111";
search["job"] = "Higher education careers adviser";
search["dob"] = "1995-08-14";
search["acct_num"] = "11220423";
search["profile"] = "millenials.json";
search["transnum"] = "9999999";
search["transdate"] = $("#datepicker").val();
search["category"] = $("#category").val();
search["amt"] = $("#amt").val();
search["row_key"] = "831-33-6049_9999999";
$.ajax({
type : "POST",
headers : {
contentType : "application/json"
},
contentType : "application/json",
url : "/stream_more",
data : JSON.stringify(search),
dataType : 'json',
complete : poll,
cache : false,
timeout : 600000,
success : function(data) {
//
//alert('jax')
console.log("SUCCESS : ", data);
//$("#btn-search").prop("disabled", false);
// $('#feedback').html("");
for (var i = 0; i < data.length; i++) {
//
$('#feedback').prepend(
'<tr><td>' + data[i].ssn + '</td><td>'
+ data[i].transdate + '</td><td>'
+ data[i].category + '</td><td>'
+ data[i].amt + '</td><td>'
+ data[i].purch_prob + '</td><td>'
+ data[i].offer + '</td></tr>').html();
}
},
error : function(e) {
//alert("error" + e);
var json = "<h4>Ajax Response</h4><pre>" + e.responseText
+ "</pre>";
$('#feedback').html(json);
console.log("ERROR : ", e);
$("#btn-search").prop("disabled", false);
}
});
}, 3000);
})();
From ES6,
var co = require('co');
var $ = require('jQuery');
// because jquery doesn't support Promises/A+ spec
function ajax(opts) {
return new Promise(function(resolve, reject) {
$.extend(opts, {
success: resolve,
error: reject
});
$.ajax(opts);
}
}
var poll = function() {
co(function *() {
return yield ajax({
url: '/my-api',
type: 'json',
method: 'post'
});
}).then(function(response) {
console.log(response);
}).catch(function(err) {
console.log(err);
});
};
setInterval(poll, 5000);
This solution:
Minimum version of jQuery is 1.12
$(document).ready(function () {
function poll () {
$.get({
url: '/api/stream/',
success: function (data) {
console.log(data)
},
timeout: 10000 // == 10 seconds timeout
}).always(function () {
setTimeout(poll, 30000) // == 30 seconds polling period
})
}
// start polling
poll()
})
Source: Stackoverflow.com