Downloading LATEST version of a page with JQuery/JavaScript? - javascript

The answer on Auto refreshing with Javascript? seemed like exactly what I needed, but after a while I found something not working like I wanted it to :( When I made a timer to check the web page every 5 seconds, it kept returning the same string even after the page changed. I think this is happening because it's doing the equivilant of F5; re downloading the page only if the php script has been changed by me, and if not just sending my Javascript what's in the browser's cache, if that makes any sense. The problem is, the page isn't actually being re-uploaded every five seconds, the reason the page would change is because of the database content the PHP is displaying. What I would like is a function similar to $.get but will act more like Ctrl-F5, not using any cache, just re downloading the whole page. Sorry if this doesn't make any sense...
UPDATE: What I'm asking for is not a Javascript script that Ctrl-F5's the page, what I'm asking for is a function like $.get that downloads from the server no matter what. urgle, see, $.get only downloads from the server if the page has been edited since x time (and if it hasn't it'll return a copy of the page from the browser's cache), but I don't want it to do the x time thing, I just want it to download the page no matter the last-edited time.

I always throw useless query like this:
$.get(url + '?v=' + Math.random(), success: function (data) {
// stuff
})
That math.random basically tricks the browser into not caching that request.

Use jQuery.ajax(). Pass through cache : false as one of the parameters.
For example, straight from the documentation:
$.ajax({
url: "test.php",
cache: false,
success: function(){
//whatever
}
});
Source: http://api.jquery.com/jQuery.ajax/

The best solution I can imagine is to update/redirect to a page that redirects you back to current. I'm not sure if javascript has a ctrl+f5 function.

If using jQuery use the cache option with the .ajax call. Alternatively append a date stamp to the url to force the browser to fetch each time.

Related

How to hide details in jquery ajax from browser page source

I am using jquery for all my ajax thing, I don't know if that is fine but I use that for now.
I have one text input when user type characters in it I call server side get some values and add them on the view.
Code that I use bellow works fine but I want to improve it a little.
How can I make this ajax call so that users that want to investigate my page source code can't see what I call here?
So basically I want to hide from page source what url, what type and data send I use here, is it possible?
$(function () {
$("#txtSearch").keyup(function (evt) {
$.ajax({
url: "/Prethors/Users/SearchUsers",
type: "POST",
data: "text=" + this.value,
success: function (result) {
$("#searchResult").prepend("<p>" + result + "</p>");
}
});
});
});
No, a user will always be able to figure out what calls you are making if you include it in javascript.
You can compress and minify the javascript, but a determined person will always be able to find your url calls.
Here's a js compression site, for example.
http://jscompress.com/
overall, you shouldn't worry about this. there is no way I'm aware of to hide your ajax calls, but you shouldn't need to.
-you could encrypt the info.
-you could use comet to stream the data on a persistent connection. (super complicated).
-follow good server security practices and not worry about it.
source: here
If you are really worried about this, you could set up kind of an anonymous URL, which will then redirect to where you really want to go based on some variable which is arbitrary.
for example, instead of going to "/Prethors/Users/SearchUsers"
go to "/AnonymousCall?code=5"
from which you could execute the code you want for searchusers
You can't hide client-side code. You can disguise it with minification but sensitive data should always be stored and processed on the server-side.
Use console.clear(); after you ajax calls :P
It just clears the reqs from the console but you still cannot hide client side calls.

What purpose is of "&rnd=" parameter in http requests?

Why do some web-applications use the http-get parameter rnd? What is the purpose of it? What problems are solved by using this parameter?
This could be to make sure the page/image/whatever isn't taken from the user's cache. If the link is different every time then the browser will get it from the server rather than from the cache, ensuring it's the latest version.
It could also be to track people's progress through the site. Best explained with a little story:
A user visits example.com. All the links are given the same random number (let's say 4).
The user opens a link in a new window/tab, and the link is page2.php?rnd=4. All the links in this page are given the random number 7.
The user can click the link to page3.php from the original tab or the new one, and the analytics software on the server can tell which one by whether it has rnd=4 or rnd=7.
All we can do is suggest possibilities though. There's no one standard reason to put rnd= in a URL, and we can't know the website designer's motives without seeing the server software.
Internet Explorer and other browsers will read an image URL, download the image, and store it in a cache.
If your application is going to be updating the image regular, and so you want your users to not see a cached image, the URL needs to be unique each time.
Therefore, adding a random string ensures this will be unique and downloaded into the cache each time.
It's almost always for cache-busting.
As has been suggested by others. This kind of behaviour is usually used to avoid caching issues when you are calling a page that returns dynamic content data.
For example, say you have a page that gets some current user information such as "mysite.com/CurrentUserData". Now on the first call to this page, the user data will be returned as expected, but depending on the timing and caching settings, the second call may return the same data - even though the expected data may have been updated.
The main reason for caching is of course to optimise the speed of frequent request. But in the instance where this is not wanted, adding a random value as a query string parameter is known to be a widely used solution.
There are however other ways to get around this issue. For example if you were doing an Ajax request with javascript/JQuery. You could set the cache to false in your call...
$.ajax({url: 'page.html', cache: false});
you could also change it for all page calls on document load with...
$.ajaxSetup({cache: false}});
If you were to do an MVC application, you can even disable the caching on the control action methods with an attribute like so...
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ActionResult NonCacheableData()
{
return View();
}
(thanks to a quick copy and paste from here)
I dare say there are also settings in IIS you could apply to get the same affect - though I have not been that far with this yet.

Huge Delay on second jQuery Ajax Request

I try to do some simple Ajax call with refresh of page content with this code snippet:
$("a.ajaxify-watched").bind("click", function(event) {
$item = $(this);
$.ajax({
url: $(this).attr("href"),
global: false,
type: "GET",
data: ({
callback : "inline"
}),
dataType: "json",
async:false,
success: function(msg){
if (msg.status == 200) {
toggleStatus($item, msg)
}
}
});
return false;
});
This works perfect and for me theres nothing to worry about the code but the speed it gets executed.
The first time everything works really fine: 47ms for the operation. But after that every other Ajax call get a constant delay of 2.6 seconds - everytime. I checked with Firebug and found that it is shown as "Waiting Time".
I can't really say whats happening here.
We recently switched from pure Apache2 to Nginx Caching Reverse Proxy with load balancing with Apache as Backend Php Interpreter. We could see a huge performance boost and everything is working really fine. I can't tell when my problem first appeared and if it really has something to with our new server setup.
I just found out today, that there is a problem with jQuery so I just wanted to give as much info as possible.
Thank you and let me know if I should provide additional information.
If Firebug indicates waiting it looks like a server issue.
Is there a way to call the pages directly without ajax? If so try to do that and check if the pages load fast or slow?
Also, check that you do not have any events triggering on ajax that might affect this.
Most servers will only handle a single page load from the same server so multiple page loads is handled in queue, so if you have parallell ajax calls they might have to wait for each other.

window.location = window.location not work in IE7

To refresh the page I am using window.location = window.location it works fine with FireFox but not with IE7
any Idea??
Thanx
Call the reload method instead
location.reload(true)
To reload the page, the good solution is to use window.location.reload();
You say this pops up for confirmation? This is probably because the page you are on was called with POST data sent.
If you want thoses POST data to be sent again, you don't have an easy solution to avoid this confirmation (maybe using ajax you could do it.... you'll spend a lot of time doing this).
If you don't want to POST again the data, than you don't want to reload the page ! You only want to load the same URL.
The problem is, if you say to your browser, load this URL, it will do nothing because the URL you're speaking of is already loaded (for most browser, no URL change -> no page reload) !!
An easy way to get around this problem can be to call the same URL plus a random query string value. This way the URL you call is a new one.
To do this a really easy way :
window.location.search += '&' + Math.random();
One problem with this solution is that your URL can become messy....
Depending on your needs and your URLs, you can probably find a way to make very little changes, just enough to make the browser reload the page.
Another simple solution is submitting empty form.. tested it now for IE, FF and Chrome:
function Reload() {
var oForm = document.createElement("form");
document.body.appendChild(oForm);
oForm.submit();
}
This way you can also read the posted data back from the server and submit it again without having the "confirmation" you mentioned, if it's relevant let us know what server side language you're using.

i ajax a file with jquery,and i don't know where does it download to

$.ajax({
type: "POST",
url: "http://images.digu.com/web_res_v1/images/logo.png?t=20091230",
success: function(msg){ alert( "Data Saved: " + msg ); }
});
where is the download file.
thanks
AJAX request actually only 'download' the requested resource into your browser memory. If you request an image like in your code, the image will be put into browser's cache. So if you set an img DOM element's src with the same URL, the modern browser will smart enough to use the one in cache.
If you request a part of web page, not an image like your code above, you can insert it directly into DOM element:
$.get(URL,
{},
function(data){
$("#container").html(data);
});
Read the jQuery documentation about AJAX for more example and explaination.
Btw, AJAX request can be only made to the same domain, so make sure that you only request URL in the same domain with your jQuery code. Your code above will only work if the page also in http://images.digu.com/.
Second note, use POST when you need to send data that will change something in the server side (add, edit, delete). If you just want to request something, use GET. Also, if you don't need extra AJAX setting, I recomend you to use $.post(); and $.get(); so the code will be more readable and easier to maintain, at least it work for me :)
It is loaded into browser memory, and likely your cache. If you're wanting to save the file, you probably don't want AJAX.
It doesn't download to a file or anything. A successful ajax call returns data in a javascript variable. In this case you are saving it into a variable called msg. Depending on your app, you could insert this data into the webpage (i.e into the DOM).
I guess I'd ask for more detail. It seems like you just want to set an image's src property on the fly since I don't see you posting any data. To do that, you can use something like this:
$("#my_image").attr("src","http://images.digu.com/web_res_v1/images/logo.png?t=20091230");

Categories

Resources