I have a basic ajax call to parse a json file. I need to make sure I am not hitting the feed every time someone visits the page. How would I go about adding some sort of cache so the feed only get's requested say every say 2 hours?
$(function () {
$.ajax({
type: "GET",
dataType: "json",
url: "my.json",
success: function (data) {
// do something with the data
}
});
May be you can use cookie store your time and check every time to know 2 hours time gap then you can call your function get the latest feed.
By default, is should get cached. You can set the option explicitly as shown below.
$(function () {
$.ajax({
type: "GET",
cache: true,
dataType: "json",
url: "my.json",
success: function (data) {
// do something with the data
}
});
You can also use the below statement for all ajax calls on the page.
$.ajaxSetup({cache: true});
Related
I'm working on Cordova hybrid mobile app. I'm calling an API to load data into my variables and process it. Below is the problem.
First, I call the API using ajax. After ajax call, I check if jsonString is empty and if it is, I reload the page to run the ajax call again.
$.ajax({
url: GetConfigUrl // working URL,
type: 'POST',
data: {
token: '123456'
},
cache: false,
datatype: 'json',
contenttype: "application/json",
success: function (data, response, xhr) {
debugger
jsonString = data.Value;
},
error: function (data) {
// do nothing
)
});
if (jsonString == '') {
// Display popup to ask user the reload the page
}
return true;
I have a debugger in place in the success call function, but it does not hit and directly go to check if jsonString is empty, which is empty because it does not call the ajax to load data and proceed to display popup to ask user to reload the page.
After hitting the page reload, the debugger in the success call is being hit and able to retrieve the value. Thus the jsonString is not empty and able to proceed.
I check the Network tab in the console, it shows the below result:
It seems that the first call was made but always remain pending. The second call is the success one and return the correct value. So the jsonString checking is passed.
This issue happen all the time where the first ajax call is not success and in pending but all subsequent calls are successful.
So what could be wrong here? How do I ensure that the first ajax call will be made successfully and return the data all the time?
Ajax is executed asynchronous place your logic in the success function for it to get executed when the ajax call completes
$.ajax({
url: GetConfigUrl // working URL,
type: 'POST',
data: {
token: '123456'
},
cache: false,
datatype: 'json',
contenttype: "application/json",
success: function (data, response, xhr) {
debugger
jsonString = data.Value;
if (jsonString == '') {
// Display popup to ask user the reload the page
}
},
error: function (data) {
// do nothing
)
});
return true;
I have the following code. The function is called multiple times depending on the user checking or unchecking checkboxes.
This works in all browsers except IE10/11. In IE, the ajax call is only made once for a particular ID. Subsequent calls are not actually sent to the server, but appear to be fetched from the cache.
In F12 developer tools, the call appears to be being made to the server, but Fiddler shows that it is not actually happening.
F12 also shows a 304 response to the call.
How do I ensure that the call is always made to the server?
function updateReportTypes(event) {
var value = event.currentTarget.value;
if (event.currentTarget.checked) {
$.ajax({
url: "/PropertySearch/Order/AddReportType?id=" + value,
dataType: 'html',
success: function (data) {
$('#reportTypes').html(data);
hideProgress();
}
});
}
else {
$.ajax({
url: "/PropertySearch/Order/RemoveReportType?id=" + value,
dataType: 'html',
success: function (data) {
$('#reportTypes').html(data);
hideProgress();
}
});
}
}
Simple set the:
cache: false
argument to $.ajax(). When you do that, jQuery will automatically add a unique paramter onto the URL which prevents any caching of the request.
Using that option would look like this:
$.ajax({
url: "/PropertySearch/Order/AddReportType?id=" + value,
dataType: 'html',
cache: false,
success: function (data) {
$('#reportTypes').html(data);
hideProgress();
}
});
jQuery doc on this option: http://api.jquery.com/jquery.ajax/
I'm not familiar with this specific issue, but if all else fails, you should be able to add a dynamic, cache-busting value, such as a timestamp, to make your URL unique:
url: "/PropertySearch/Order/RemoveReportType?id=" + value + "&" + Date.now().toString()
Can I bind asp.net dropdownlist using javascript/jquery? I get the data from jquery ajax from a web method so I want to avoid postback at this point. But I still want to do postback and save all the data using server side code (i.e. I still be able to do this dropdownlist1.selecteditem.text) after binding it using clientscripts.
Is it possible and can someone explain me how it can be done?
Thanks,
Use Json ajax
Syntax:
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});
See simple example for json:
<script type="text/javascript">
$(document).ready(function () {
var msgbox = $("#status");
$("#Button1").click(function () {
$.ajax({
type: "POST",
//Page Name (in which the method should be called) and method name
url: "BeginJson.aspx/CheckDateTime",
// If you want to pass parameter or data to server side function you can try line
// data: "{}",
//else If you don't want to pass any value to server side function leave the data to blank line below
data: "{'args':'Somnath'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
//Got the response from server and render to the client
msgbox.html(msg.d);
}
});
});
});
Since we have our new server we have some issues with calling multiple jquery posts.
On some pages we call multiple jquery posts like this:
$.ajax({
type: "POST",
url: "../files/processed/includes/process.php",
data: $('#myform').serialize(),
complete: function(data)
{
$('#results').html(data.responseText);
}
});
$.ajax({
type: "POST",
url: "../files/processed/includes/folders.php",
data: '',
complete: function(data)
{
$('#getFolders').html(data.responseText);
}
});
The last post always wait for the first one. On our old server this was no problem and both posts loaded at te same time.
With a small change I speeded up a little but not as fast when used our old server. Strange thing is that the resources on our new server are much better.
The change I mentioned is:
$.ajax({
type: "POST",
url: "../files/processed/includes/process.php",
data: $('#myform').serialize(),
complete: function(data)
{
$('#results').html(data.responseText);
$.ajax({
type: "POST",
url: "../files/processed/includes/folders.php",
data: '',
complete: function(data)
{
$('#getFolders').html(data.responseText);
}
});
}
});
Is there another fix to load both posts at the same time or at least to speed it up?
On the server perform session_write_close() as soon as you don't need to modify session data.
Otherwise the second request waits until the first one holds the session file locked. And the lock is released after the first request ends.
I have an ajax application, which has code something like this:
$.ajax({
type: "GET",
url: "data.txt",
beforeSend:function(){
},
success:function(response){
just update responsed data;
}
});
this call is made every second and it just updates the latest data from 'data.txt' which is being updated on server using cron job. Now since it's only function is to update latest data each second so I'll be more interested in the latest ajax call ; so how can I terminate old ajax call that has crossed 4 seconds but yet not completed so that I can reduce the server traffic. And any suggestion if using 'data.html' or 'data.php' instead of 'data.txt' would increase the application performance ? And which web server can perform better than Apache for ajax driven application ? I need these help urgently ; Please do help.
You could keep track of when your last successful update time was.
function NowMS() {return parseInt(new Date().getTime())}
dataLastUpdateT = -Infinity;
$.ajax({
type: "GET",
url: "data.txt",
success: function(response){
if (NowMS() > dataLastUpdateT) {
use(response);
dataLastUpdateT = NowMS();
}
}
}
I don't know how you have it setup at the moment but perhaps it would be better to run your next AJAX call after the latest one completed (or returned an error). So it would be something like:
(function updateData() {
$.ajax({
type: 'GET',
url: 'data.txt',
beforeSend: function() {
// Do stuff
},
success: function(response) {
// Handle response
updateData();
}
});
})();
I don't know if there is any performance changes in changing the file type.
Edit: If you do need to just kill the request, you can do so using the technique explained here.
You could try this:
function getData(){
$.ajax({
type: "GET",
url: "data.txt",
timeout:4000,
beforeSend:function(){
},
success:function(response){
},
error:function(){
},
complete:function() {
setTimeout(function(){getData();},1000);
}
});
}
getData();
this way the ajax request timeouts after 4 seconds and retries each second (regardless of success or timeout)
Also have a look at nginx for example, it is fast and uses less memory than apache to handle client connections