AJAX Page Loading and Progress - javascript

I want to make a jQuery AJAX page load with a progress bar at the top. I have found an example of what I am trying to achieve here.
I could use a pointer on where to start.
I intend on using it in a WordPress site.

Take a look at this reference page. Specify a callback for onreadystatechange. A simple loading bar would just increment the bar a little bit as the readyState changes. This might be what the linked site does, and this is what modern browsers do (they switch the loading icon once the headers are received or once a connection is made). A more complex loading bar would read the headers received from the request when HEADERS_RECEIVED, then compare the content-length header (when LOADING) to the number of bytes received so far:
Downloading; responseText holds partial data.
This technique might be too much trouble to for the value added. AJAX is typically designed to return light-weight data so loading time shouldn't be long enough to really need a fine-grained loading bar.
You might have to implement this differently if using jQuery, but the algorithm is the same.

Related

Lazy loading for Wordpress external api get request

I have an endpoint that takes a long time (about a minute) to give a response. I want to call this endpoint from a Wordpress website while wp_remote_get and wp_remote_retrieve_body are running in the background, but I always get the page loaded only after the request is finished.
Is there a way I can add some lazy process so that the page can be displayed and the user gets a 'loading, please wait..' message until the request content is retrieved? I have seen many methods for image lazy loading but not for an arbitrary php run in the server. I also want to hide the get url from the page source script, all js get solutions seem to expose the url requested.
Here's what you need to do.
Create your page -- maybe in your template -- with some placeholder text. Something like this might work:
<div id="jimmys-lazy-loading">
loading, please wait...
</div>
Extend the WordPress REST API by adding a custom endpoint to the code you're writing (your plugin or theme customizations, maybe). When you hit this REST endpoint from your web page, it will in turn hit that slow endpoint, retrieve the data, and return it.
Write some Javascript that hits your REST API and then replaces your placeholder text with the stuff that you got back.
Or, if your slow endpoint allows itself to be hit directly from your users' browsers, write your Javascript to hit it and replace the placeholder text.
Once you get the basics working, you can make a fancier "wait" display, maybe with a spinner.
It's hard to give more specific advice without knowing a bit more about what you hope to do. Don't hestitate to ask another question if you still need help.

HTTP: Web page polling without JavaScript?

I have a web service where any user can start a process that takes somewhere between 15 seconds and 10 minutes to complete. The process is started with a POST request and the user is redirected to page that shows current progress of the process (e.g. https://example.com/progress-status/123).
My current implementation is to send HTTP header Refresh with value n;url=https://example.com/progress-status/123 where n is automatically changed between 5 and 120 according to expected time to completion and current server load. As a result, the progress status is automatically updated once every 5 seconds or more. After the progress has been completed, the status page will immediately redirect (HTTP 301 and Location header) to the completed job.
This works otherwise nicely but causes ugly flickering in Opera 42.0, which considers this to mean forced reload and skip all caches. I'm sending correct Cache-Control headers so using cached result for everything would be fine but Refresh header causes all caches to be ignored. (The status page contains some images and links to static CSS files so it does not make any sense to refresh those resources for every poll request.)
Is there any way to implement polling just the HTML page without JavaScript? I know that I could poll just the current status with Ajax query and then update the part of the currently visible page with the updated information. However, that will not work if user disables JavaScript. Rest of the service works without JavaScript so requiring JavaScript for something this simple seems bad. (I already have a GET submit button on the progress status page to force refresh manually.)
I know that HTTP Refresh header is not defined in HTTP 1.0 or HTTP 1.1 so this is a bit grey area. I'm looking for something that works in real world without JavaScript.
you can try the html meta refresh
<meta http-equiv="refresh" content="5"><!-- reloads the page after 5 seconds //-->
W3Schools doc on <meta>
Of course only put it if progress is < 100% :)
Not completely without, but you don't have to reload the whole page. Instead of that, you could just listen to SSE (server side events) and update the status value on the page (the element where it is contained).
I can't think of any way to do that. And much less one that entails good practices: use Javascript.
You can use a noscript tag to advise your users that JavaScript is necessary:
<noscript>
<h1>JavaScript is not enabled, please check your browser settings.</h1>
</noscript>
Realistically almost everyone has Javascript enabled nowdays.
Works Google Maps, FaceBook, etc, without JavaScript? No.
Why your web app will require that?
I complete agree with this phrase from #Matthew Trow answer:
I think sacrificing functionality for 99% of users to accommodate 1% is sheer bloody mindedness.

Generic spinner / processing message in a browser

Most browsers show a spinner in the tab at the top of the page when a page is loading. It's a standard way of showing that the browser is in the process of fetching something.
I'm writing a client-side ajax app, and would like a generic way of showing that an ajax call is in process. Rather than finding some element on the page and sticking a spinner on it, is there a generic way in javascript to access the browser's spinner?
There are only two things I can think of that are similar to what you want.
#1: changing the cursor (idea from #Jasen in the comments of the question): you can simply set the cursor css property of the body to wait whenever you have an Ajax request running.
#2: use a hacky iframe. Basically, create a server side page that loads headers, but doesn't end the request. When you want the loader symbol, simply create an invisible or off-screen iframe with that url, and remove it when the request completes
Unfortunately, there is no "official" api that defines a simple way to do this (e.g. there is no such thing like window.startLoader() or window.stopLoader(), for example)

progress bar while waiting for server

Some operations are time costly and it takes long time while waiting them to finish.
Sometimes timeout occurs.
I want to use a real time progress bar, so I want to show the status to the user and also I want to prevent timeout. Which technologies must I use? JS, Ajax, multithread or both? and how can I iplement this?
Please advice.
I'd recommend using a library like jquery.
Here are some links:
jquery progress bar link 1
jquery progress bar link 2
Enjoy.
The easiest thing I can think of would be to implement a progress variable linked to the session (or a unique id) which is updated every so often by the slow-loading script. You can then have a 2nd page which returns the current contents of this variable. Query the status variable via ajax every few seconds to update your progress bar.
Alternatively, you can use this method without ajax. Basically you flush a script that displays a progress bar to the browser from the slow page. As the page continues loading, it flushes javascript update() calls every so often to update the bar.
http://devirtu.com/2008/10/16/making-progress-bar-of-page-loading/
If you are using an javascript and ajax, you can call / initiate the process(in server) from java script using an ajax call.You can show the user a loading image till you get a response back from the server. www.ajaxload.info allows you to generate your own loading images. have a look # it.
if you use jquery ,things would be much easier.
Check these links
http://docs.jquery.com/Ajax/load
http://www.shawngo.com/gafyd/index.html
Cheers

I want to implement fire-and-forget request for in img src in JavaScript

I'm trying to implement fire-and-forget on an img src=... call from a web page, and am looking for the most solid method. Why?
In most Web tracking systems like Omniture or Coremetrics, there is a request for an img src which also happens to carry all the data for the tracking system to record. Like any other image request, the page tries to wait for the response, potentially slowing down the page-load.
What I'm trying to do is implement a tracking system where webpage response time is a much higher priority than whether the request was actually successful, and therefore waiting for the response is totally unnecessary under all conditions, which include...
The server received the request, and can readily respond (HTTP response code 200)
The server received the request, but is bogged down and can still readily respond with an error 500 response code
The server is not running at all
The server was not found due to DNS glitches
The request hit the server, but is so bogged down that it's taking noticeable time to respond.
I have already investigated using the XMLHttpResponse object and an asynchronous request that can quietly fail, but you quickly run into the same origin policy and browser compatibility code bloat. I believe a plain jane img request is still the best request mechanism, but am trying to work out the best fire-and-forget implementation with the smallest amount of code. So far, I know I can...
onerror="this.parentNode.removeChild(this)"
onload="this.parentNode.removeChild(this)"
This works pretty well on scenarios 1 through 4 where there is a finite and predictable conclusion to the request. It breaks down in scenario 5, which could be avoided if there were something in-between.
I'm toying with the idea of seeing if this.src.readyState == "complete" but see that I am heading down a road of browser compatiblity and race-condition hell were it would be wise to tap the StackOverflow community first.
Anyone have experience with this and a good solution?
Why not just add the img tag to your document after it loads?
You need it to be loaded asynchronously. Google do one, if you want something a bit more heavyweight, eVisitAnalyst do a similar thing.
The brucey bonus of having it done asynchronously is that if the .js is unobtainable your page doesn't need to wait for it.
My PoV: User experience comes first, tracking comes next. I have used WebTrends/Omniture & Coremetrics and yes they do give very fine grained details (and later you can segment it the way you want) about the request. Even without these web analytics vendors implemented, you can get a lot of information from your server logs, you just have to do the segmentation yourself (you can log IPs-depending on your Terms & Conditions- and Omniture/Coremetrics do it anyways,Pages requested,action performed like checkout,add to cart, etc).Though these web analytics vendors are very aware of performance and they just send you 1x1 pixel as a response, if their server were slow, your user experience is bad (sometimes happens with google urchins for me, I wait for this one image to load for a very long time). I would think the best way to implement this would be after the document has loaded (jQuery - Document.ready ? ) and then append the <img src="vendor url"/>to the html dom.Even if the request fails or takes a long time, now the user does not feel that the site is unusable
As the other answer suggests, you could simply add the img tag to the image after the document loads.
This brings about two subproblems: 1) how do you know when the document is loaded and 2) how to add the img tag. I suggest using the $(document).ready() from JQuery for 1) and some DOM manipulation for 2) (also with JQuery).
There are methods of detecting when the document is completely loaded and inserting a tag, but using a framework (alternatives other than JQuery should be OK, I'm just suggesting something I know works) saves you some effort, especially when it comes to making things work on multiple browsers.
EDIT: typo
You can POST with a form that target an iframe(same or different domain is ok).
And after you make the call, you can remove the iframe or reuse it.
Here is an example:
<form target="targetIfr" action="http://domain.com/" method="post">
<input name="data" type="text" value="hello" />
</form>
<iframe name="targetIfr"></iframe>
You can call it like:
frm.submit();
ifr.parentNode.removeChild(ifr);
This is an old question, but it starts off with misinformation and I didn't see anyone correct that. CoreMetrics and Adobe and many others do not use image requests that load on the dom, that can block the page, they use JS image objects, like, outImage = new Image();
That doesn't get attached to the DOM and doesn't block in the same way as an image tag would. The 1x1 pixel reponse is just to match up with the MIME type btw.
Any JS that is loaded to implement tags has far more impact.

Categories