我用coldfusion的,不过ajax这一块差不多,给你这个参考一下吧,
大概思路就是在页面添加一个'loading...please wait'层,读数据的时候设置可见,完成时设置不可见。里面$是prototype的document.getElementById的缩写,
可以在提交的时候调用DWREngine.setPreHook的内容,status == 200的时候用DWREngine.setPostHook,不知道这样能不能明白。
DWRUtil.useLoadingMessage = function()
{
var disabledZone = document.createElement('div');
disabledZone.setAttribute('id', 'disabledZone');
disabledZone.style.position = "absolute";
disabledZone.style.zIndex = "1000";
disabledZone.style.left = "0px";
disabledZone.style.top = "0px";
disabledZone.style.width = "100%";
disabledZone.style.height = "100%";
document.body.appendChild(disabledZone); var messageZone = document.createElement('div');
messageZone.setAttribute('id', 'messageZone');
messageZone.style.position = "absolute";
messageZone.style.top = "0px";
messageZone.style.right = "0px";
messageZone.style.background = "red";
messageZone.style.color = "white";
messageZone.style.fontFamily = "Arial,Helvetica,sans-serif";
messageZone.style.padding = "4px";
disabledZone.appendChild(messageZone); var text = document.createTextNode('Loading');
messageZone.appendChild(text); $('disabledZone').style.visibility = 'hidden'; DWREngine.setPreHook(function() { $('disabledZone').style.visibility = 'visible'; });
DWREngine.setPostHook(function() { $('disabledZone').style.visibility = 'hidden'; });
};
大概思路就是在页面添加一个'loading...please wait'层,读数据的时候设置可见,完成时设置不可见。里面$是prototype的document.getElementById的缩写,
可以在提交的时候调用DWREngine.setPreHook的内容,status == 200的时候用DWREngine.setPostHook,不知道这样能不能明白。
DWRUtil.useLoadingMessage = function()
{
var disabledZone = document.createElement('div');
disabledZone.setAttribute('id', 'disabledZone');
disabledZone.style.position = "absolute";
disabledZone.style.zIndex = "1000";
disabledZone.style.left = "0px";
disabledZone.style.top = "0px";
disabledZone.style.width = "100%";
disabledZone.style.height = "100%";
document.body.appendChild(disabledZone); var messageZone = document.createElement('div');
messageZone.setAttribute('id', 'messageZone');
messageZone.style.position = "absolute";
messageZone.style.top = "0px";
messageZone.style.right = "0px";
messageZone.style.background = "red";
messageZone.style.color = "white";
messageZone.style.fontFamily = "Arial,Helvetica,sans-serif";
messageZone.style.padding = "4px";
disabledZone.appendChild(messageZone); var text = document.createTextNode('Loading');
messageZone.appendChild(text); $('disabledZone').style.visibility = 'hidden'; DWREngine.setPreHook(function() { $('disabledZone').style.visibility = 'visible'; });
DWREngine.setPostHook(function() { $('disabledZone').style.visibility = 'hidden'; });
};
$basename = $_SERVER["REQUEST_URI"];
@extract($_GET);
@extract($_POST);
if (!$action){
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="JavaScript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script language="javascript">
$(function(){
$("#url").css("border","1px #f00 solid");
});
$(function(){
$("#url").hover(function() {
$("#url").css("border","0px");
$("#url").css("border-bottom","1px dotted #000");
$("#url").css("background-color","#ace");
$("#url").focus();
},function() {
$("#url").css("border","1px solid #f00");
$("#url").css("background-color","");
$("#url").blur();
});
});
$(function(){
$("#submit").click(function() {
if(!$("#url").attr("value"))
{
msg("请输入网址!");
}
else
{
msg("..:努力查找中:..");
$('<img src="http://www.chickadvisor.com/static/images/load.gif" border="0">').prependTo("#msg");
//$('<img src="http://www.elquintero.net/images/Load.gif" border="0">').appendTo("#msg");
$('<img src="http://www.chickadvisor.com/static/images/load.gif" border="0">').appendTo("#msg");
$("#submit").attr("disabled","disabled");
$.ajaxTimeout( 5000 );
$.ajax({
type: "GET",
url: "<?php echo $basename;?>",
data: "action=query&url="+$("#url").attr("value"),
success: function(xml){
$("#submit").attr("disabled","");
if (!$("error", xml).text())
{
var result = [
"获得 "+$("#url").attr("value")+" whois 信息如下: ",
$("content", xml).text(),
];
}
else
{
var result = [
"获取 "+$("#url").attr("value")+" whois 信息失败: ",
$("error", xml).text(),
];
}
// output result
try{
$("#m_info").after("<div class='details'><pre>"+result.join('')+"</pre></div>");
}catch(e){}
msg("");
},
error: function (){
$("#submit").attr("disabled","");
msg("连接超时,请稍后重试!");
}
});
}//else
});
});
$(function(){
$("#reset").click(function() {
msg("");
$(".details").hide("slow");
setTimeout('$("div").remove(".details")',2000);
});
});
function msg(message)
{
if (message)
{
$("#msg").show("slow");
$("#msg").text(message);
}
else
{
$("#msg").hide();
$("#msg").text("");
$("#msg").css("display","none");
}
}
</script>
<title>查询whois</title>
<style type="text/css">
<!--
*{
font-family: "微软雅黑";
font-size: 14px;
}
body {
margin: 0px;
padding: 0px;
text-align: center;
}
#top {
border: 1px solid #FFFFFF;
width: 98%;
background-color: #def;
margin: 0px auto;
}
#main {
border: 1px solid #FFFFFF;
width: 98%;
margin: 0px auto;
background-color: #ace;
}
hr {
border: 1px dashed #69c;
}
#main #msg {
color: #c00;
display:none;
background-color: #fff;
border: 1px solid #def;
}
#m_top {
width: 97%;
margin: 0px auto;
}
#m_info {
width: 97%;
margin: 0px auto;
}
#foot {
border: 1px solid #FFFFFF;
width: 98%;
margin: 0px auto;
background-color: #def;
}
.clr {
clear: both;
}
.details {
width:80%;
font-size: 9px;
background-color: #def;
text-align: left;
border: 1px dotted #fff;
margin: 5px;
padding: 5px;
}
-->
</style>
</head>
<body>
<div id="top">
<h1>whois查询</h1>
</div>
<div id="main">
<div id="m_top">
<h2>请输入要查询的域名:</h2>
<label for="url">http://
<input name="url" id="url" size="40" maxlength="100" />
</label>
<button id="submit">查询</button>
<button id="reset">清空</button>
</div>
<div id="msg"></div>
<div id="m_info">查询结果:</div>
</div>
<div id="foot">
<hr />
</div>
</body>
</html><?php
}else if ("query" == $action){
$domain = "http://www.whois-search.com/whois/";
$url && $url = trim($url);
$url && $url = preg_replace("/^(http:\/\/)(.*\.)+(.+[^\/])\/+$/i","$2$3",$url);
if ( $url ) {
( $content = @file_get_contents ($domain.$url,false) ) or die ("<root><error>error 1</error></root>");
preg_match("/<pre>(.*)<\/pre>/ms",$content,$match);
if ($match[1]){
echo "<root><content>".$match[1]."</content></root>";
} else {
echo "<root><error>error 2</error></root>";
}
}
}
?>====================
郁闷了 ff里面正常 ie里面怎么都超时,不行 -.-
这个是最简单的例子,核心就是这个两个pushAjax()和alertContents(),pushAjax()用来处理请求,url是你的查询记录的文件,parameters是需要传入文件的参数,pTag是输出的标记位置,alertContents()用来把得到的内容输出到当前页面,比如:User Location<div id ="div_userLoc"></div>
<input type="button" onclick="javascript:pushAjax('mvc/view/vGetUserLocation.cfm','?cid=xxx','div_userLoc');" value="Get Location">
function pushAjax(url, parameters, pTag) {
document.getElementById(pTag).innerHTML = '<img src="images/loading.gif" alt="" align="absmiddle" valign="bottom"/>Processing ...'; //添加'正在读取'的标记,loading.gif是一个读取的小动画
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = function(){ alertContents(pTag) };
http_request.open('GET', url + parameters, true);
http_request.send(null);
}function alertContents(pTag) {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById(pTag).innerHTML = result;
} else {
alert('There was a problem with the request.');
}
}
}
给你个图片,gif动画的图片,当开始的时候,向用户浏览器输出该图片,然后你去处理那几百万条数据,等处理完毕后,在把原先的gif图片隐藏掉即可。程序开始时输出如下信息:
<div id='waitme' name='waitme'>
<img src='waitme.gif'>
</div>接着,处理你的需要很长时间才可以处理完的东东
处理完毕后:
<script>
document.all('waitme').style.display=none;
</script>
输出你的信息
好了,效果出来了吧。当然了,如果不用gif图片的话,你写javascript也可以。