My page makes two requests: one to /login and one to /treeContents?rootID=9 for example. I'd like to combine them into one request, /loginAndTreeContents?rootID=9
But, the old way means that subsequent requests to /treeContents?rootID=9 will be retrieved from the cache, and the new way means that they won't.
So I was thinking, is there a way with javascript to manually take the response for /loginAndTreeContents?rootID=9 and jam it into the cache as if it was from /treeContents?rootID=9, so that subsequent requests will just return that?
Is there a way to manually do it with javascript? Or perhaps, can HTML5's appcache help me? Thanks!
No. You cannot make the response from one URL magically be the cached result from another URL. That is not how the cache works. It stores the page in the cache only as the URL that it actually came from.
It is possible to precache pages by loading them into iframes that are not visible.
It would also be possible to stuff the desired HTML into LocalStorage and then retrieve it from there with your own JS in some other page.
Related
everyone. I am making a website with t-shirts. I dynamically generate preview cards for products using a JSON file but I also need to generate content for an HTML file when clicking on the card. So, when I click on it, a new HTML page opens like product.html?product_id=id. I do not understand how to check for id or this part ?prodcut_id=id, and based on id it generates content for the page. Can anyone please link some guides or good solutions, I don't understand anything :(.
It sounds like you want the user's browser to ask the server to load a particular page based on the value of a variable called product_id.
The way a browser talks to a server is an HTTP Request, about which you can learn all the basics on javascipt.info and/or MDN.
The ?product_id=id is called the 'query' part of the URL, about which you can learn more on MDN and Wikipedia.
A request that gets a page with this kind of URL from the server is usually a GET request, which is simpler and requires less security than the more common and versatile POST request type.
You may notice some of the resources talking about AJAX requests (which are used to update part of the current page without reloading the whole thing), but you won't need to worry about this since you're just trying to have the browser navigate to a new page.
Your server needs to have some code to handle any such requests, basically saying:
"If anybody sends an HTTP GET request here, look at the value of the product_id variable and compare it to my available HTML files. If there's a match, send a response with the matching file, and if there's no match, send a page that says 'Error 404'."
That's the quick overview anyway. The resources will tell you much more about the details.
There are some solutions, how you can get the parameters from the url:
Get ID from URL with jQuery
It would also makes sense to understand what is a REST Api and how to build a own one, because i think you dont have a backend at the moment.
Here some refs:
https://www.conceptatech.com/blog/difference-front-end-back-end-development
https://www.tutorialspoint.com/nodejs/nodejs_restful_api.htm
I need to embed a parameter with all my pages url. Like:
index page = www.abc.com?param=value
about us page = www.abc.com/about-us.html?param=value
When i google it I found param tag. But it is child tag of Object Tag. So I don't know how to use this to address my issue.
Note: Am adding parameter to maintain my version upgrades so that browser will fetch from server whenever new updates added not fetching from cache like Google.
How to achieve that?
When i google it I found param tag. But it is child tag of Object Tag. So I don't know how to use this to address my issue.
You can't. It has nothing to do with your issue. Object parameters and query string parameters are entirely unrelated.
Am adding parameter to maintain my version upgrades so that browser will fetch from server whenever new updates added not fetching from cache like Google.
That is used when linking to resources that change infrequently and you normally want to be heavily cached, but which occasionally change in a way that would break parts of a site if not refreshed in the browser. Primarily this applies to stylesheets and JavaScript files.
For regular pages, you usually don't want such strict caching rules so you should configure your HTTP server to put appropriate cache control headers in the HTTP response for the HTML document.
For instance:
Cache-Control:max-age=3600
ETag:"44ab-51ae9454a67e2"
mnot has a good guide if you want a more in depth explanation about how to control caching.
When a visitor visits http://www.yourwebpage.com/
Is there a way to have the browser use the previously cached response? Or will it always make a request to the server?
I am guessing a request to the server will occur, but is then possible to respond with an empty string, and let the browser automatically use the cached response for index.html? Or do you always have to supply the entire answer?
The question is related to how much the initial index.html response for a JS based application should contain or if the index.html response should make a second request for html pieces and such.
// Example: Pseudo code
<html> ...
<script>
if ( !localStorage.index ) {
localStorage.index = loadFromServer( 'head.html' )
}
document.head.append(localStorage.index);
</script>
...</html>
The question boils down to, if i have ten templates.html files, which I would like to serve once, should they be included in the index.html response or should another request be made to fetch these as one bundle.
Obviously, if I make a second request, the browser will cache that response if proper headers are set, but that would cost another request, at least the first time.
If I include them in the index.html then the initial response will be bigger, but less than the two requests otherwise necessary, but how will subsequent requests to fetch the index.html be treated?
I have never visited a page who do not load something, although teoretically if the proper cached-headers from previous request has been set properly, it should be possible to treat it as an offline application, or is cache now applicable for initial requests? Only for requests made for instance by ajax or
Is the last statement true?
Basically, could you execute JavaScript by visiting a webpage using only cached data, that is without actually needing to make any request, or at least wait for an answer.
Is this possible? Perhaps storing the entire index.html in the localStorage is one way and have the index.html response the second time respond with only a script tag saying load from localStorage.
EDIT 1
I have come to understand that there is something called a Manifest for at least Firefox which can allow for the treatment as such as an application install the first time. https://developer.mozilla.org/en-US/Apps/Build/Manifest
Yes, your web server (and/or web app framework) should use cache headers to give this sort of instruction to the browser. Cache headers include etags and cache-control. A full example and explanation is here: https://www.mnot.net/cache_docs/#CACHE-CONTROL
But basically, those tell the browser when to consider the fetched content stale, when to actually make a request. Further, if the server knows the information hasn't been changed, it will respond with a HTTP 304 response, which will result in the client using the cached copy instead as well.
You really don't need to use the localstorage option unless you want your JS to definitely never ask the server for something unless it's not in localstorage. The problem with that is that you then have to manage your own cache invalidation, etc.
I am populating a dropdown from a jquery ajax call to a web service that is returning json data. If for some reason the webservice fails or is unavailable how do I handle this? I don't want to have my users looking at an empty dropdown.
How can I cache the last successful call and use that instead?
If the data is the same for all users and doesn't change too frequently, you could cache it on your server, and only do the AJAX call if cache is unavailable/stale. (If cache is stale, yet AJAX call fails, it may be better to serve slightly stale data than no data.)
Be careful about caching the data - there are several services (I'm thinking about the DVLA here in Britain) for which caching data constitutes a break of their terms of usage...
You need to indicate to the user that the service has failed for whatever reason.
Perhaps you should try to load the data once the page is ready, and if the webservice fails navigate to an error page?
if the service is unavailable, then you will have to inform your user that the page did not load correctly. or retry once or twice, but chances are if it's down the first time, it'll be down for a while
You can use DOM Storage to cache results in the browsers that support it. Or write a cookie.
And for ones that don't, or if you have no data, just hide the drop down and display an error panel in its place.
I've coded an HTML page using jQuery for loading content. Now if I want to link directly to a submenu, is this possible to do with JavaScript?
So for example if someone goes to www.mydomain.com/submenu1/
then some JavaScript code will execute and load the needed contents?
Thanks a lot :)
Is it possible to realize that with htaccess?
You will more likely want to have a URL structure that only needs a page to load from the server once, then the server is only queried by JavaScript XMLHttpRequests. Loading content based on a "hard" URL would be pointless, since you're doing a server request anyways and might as well return the content in the response.
For keeping addresses unique while still keeping the "hard" URL the same (preventing multiple server requests), you can use the hash/anchor part of the URL. This means your address might look something like this: http://www.example.com/#/submenu1/
The #/submenu1/ part stays on the client, so only / on www.example.com is requested. Then it's up to your JavaScript to load the content relevant to /submenu1/. See a page of mine for an example of this: http://blixt.org/js#project/hash?view=code
Also have a look at this question: Keeping history of hash/anchor changes in JavaScript