How to clear HTML content already sent to the browser, without JavaScript?
Bugzilla, Mozilla's issue tracker, has a nice loading screen while the search is being executed. In the days of Ajax, this is nothing special. They do it without any scripting, though, and I want to know how.
For example:
- Disable JavaScript
- Open the following URL: https://bugzilla.mozilla.org/buglist.cgi?short_desc=IDL&resolution=---&resolution=DUPLICATE&query_format=advanced&short_desc_type=allwordssubstr
You get a page with an animated image, the text "Please wait while your bugs are retrieved." and a title of "Bugzilla is pondering your search".
Update:
This is the entire DOM while the search is being executed. No meta refresh, no scripts.
<html>
<head>
<title>Bugzilla is pondering your search</title>
</head>
<body>
<div style="margin-top: 15%; text-align: center;">
<center>
<img width="160" height="87" alt=""
src="extensions/BMO/web/images/mozchomp.gif">
</center>
<h1>Please wait while your bugs are retrieved.</h1>
</div>
</body>
</html>
Afte开发者_StackOverflowr a while, the results page appears. The previous HTML vanishes and a completely new DOM appears, including a new title "Bug List".
So my question is: how does this work exactly? Please don't list alternative techniques - I am not interested in loading screens at all, but want to use that exact mechanism for something completely different.
if you look at the souce of the page you see you actually get two responses each with its own header
WARNING: YOUR BROWSER DOESN'T SUPPORT THIS SERVER-PUSH TECHNOLOGY.
--------- =_y97AELt1tHMqcK8D
Content-Type: text/html; charset=UTF-8
<html>
<head>
<title>Bugzilla is pondering your search</title>
</head>
<body>
<div style="margin-top: 15%; text-align: center;">
<center><img src="extensions/BMO/web/images/mozchomp.gif" alt=""
width="160" height="87"></center>
<h1>Please wait while your bugs are retrieved.</h1>
</div>
</body>
</html>
--------- =_y97AELt1tHMqcK8D
Content-Type: text/html; charset=UTF-8
content-disposition: inline; filename="bugs-2011-08-30.html"
Set-Cookie: {data}
Set-Cookie: {data}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bug List</title>
{the rest of the request}
I'm not too sure about the browser support for this except for mozilla...
Use a meta refresh tag to reload the page every N seconds.
Return the "please wait page" (with the meta tag) as long as the search results are collected.
Return the results page (without the meta tag) when the results are ready.
You should be able to see what is happening when you open Firebug (or similar) and open the Network tab.
加载中,请稍侯......
精彩评论