关闭

Ajax反馈

468人阅读 评论(0) 收藏 举报
浏览器的开发都是基于传统的内容显示页面模型。默认情况下,点击链接或者提交表单时,浏览器会向服务器请求一个新的页面。这种情况下,浏览器会马上给用户一个反馈,告诉他们浏览器正在处理某些信息。
大多数浏览器都用动画的形式显示这种反馈。Apple的Safari会在地址栏的背景中呈现一个正在扩展的颜色带。而微软的IE,在用户请求新页面时,会让原本右上角静止的图标旋转起来,如图6-5所示。
图6-5  在请求新页面时,微软IE的图标开始旋转
通过Ajax,获取新页面的这种默认的浏览器行为可被用JavaScript和事件处理函数编写的自定义动作所取代。因为把常规的行为取消了,浏览器也就不再对正发生的事做任何提示。要靠我们来给用户提供某种反馈。
理想情况下,会马上收到Ajax的响应。然而现实中,通过Ajax请求的资源会被诸如网络拥堵等瓶颈所制约。响应的速度取决于带宽、延迟等其他影响网络数据传输的因素。
对于浏览基于Ajax的页面的用户来说,可能会看不到这个反馈。如果点击链接或提交表单没有马上收到回应,可推测出一定是什么地方出了毛病。
为了解决这个问题,Ajax脚本应当具备相应的机制,用于提示某个操作正在执行中。你可以使用DOM脚本编程向页面中插入一段解释性的文字。比如,在某个合适的元素中插入“Loading...”等类似的字样。
使用动画则是一个更有效的办法。效仿IE浏览器,创建一张旋转的动态图片,在成功收到响应前,会一直显示这张图片。
动态的GIF图片是最简单的格式。具体的图片可由你的喜好而定,只要它能显示出一种循环的动画效果就可以。旋转的图形、转圈的箭头与螺旋的进度条都是常见的“活动”图片,如图6-6所示。
文本框:
图6-6  一些常用来表示“活动”的方式
现在有一个名为displayLoading的小函数,它带有一个参数,即文档中的某个元素。首先要清空元素中的所有子节点,然后在其中添加一个新建的img元素。
function displayLoading(element) {
  while (element.hasChildNodes()) {
    element.removeChild(element.lastChild);
  }
  var image = document.createElement("img");
  image.setAttribute("src","loading.gif");
  image.setAttribute("alt","Loading...");
  element.appendChild(image);
}
现在,用这个函数对联系方式例子做一点修改。我们想在函数grabFile中发出Ajax请求的同时,也执行这个函数:
function grabFile(file) {
  var request = getHTTPObject();
  if (request) {
    displayLoading(document.getElementById ("deta ils "));
    request.onreadystatechange = function() {
      parseResponse(request);
    };
    request.open("GET", file, true);
    request.send(null);
    return true;
  } else {
    return false;
  }
}
当点击某个名字后,在id为details的div中(人物的联系方式也将显示在这里)就会显示出GIF动画,如图6-7所示。
图6-7  旋转的图片会告诉用户浏览器正在对信息进行处理
一旦Ajax请求完毕,那个图片会被函数parseResponse的innerHTML属性所代替:
function parseResponse(request) {
  if (request.readyState == 4) {
    if (request.status == 200 || request.status == 304) {
      var details = document.getElementById("details");
      details.innerHTML = request.responseText;
    }
  }
}
对于联系方式表单来说,我们想把GIF动画显示在被提交表单的下方。对函数displayLoading做一点修改,使其在添加图片之前,不用再清空包含图片的元素中的节点。这次想用一个进度条:
function displayLoading(element) {
  var image = document.createElement("img");
  image.setAttribute("src","progressbar.gif");
  image.setAttribute("alt","Loading...");
  element.appendChild(image);
}
只需修改函数sendData:
  function sendData(data) {
  var request = getHTTPObject();
    if (request) {
    displayLoading(document.getElementById("contactfor m"));
      request.onreadystatechange = function() {
    parseResponse(request);
  };
  request.open( "POST", "formlogic.php", true );
  request.setRequestHeader("Content-Type",
      "application/x-www-form-urlencoded");
    request.send(data);
    return true;
  } else {
    return false;
  }
}
提交表单的同时,进度条也会显示出来,如图6-8所示。
图6-8  联系方式表单下的进度条表明浏览器正在对信息进行处理
刚刚发生了什么
能够表示出“处理中”的状态很重要,同样,如果能显示出刚刚发生了什么也是个很不错的想法。
在37signals(www.37signals.com)创建的一系列Ajax应用中,率先采用了黄色淡出(yellow fade)技术。把JavaScript与CSS相结合,使网页中刚更新过的元素的背景色由黄渐变为白。这种方式可有效地显示出当前页面哪些部分刚刚被更新过,如图6-9所示。
图6-9  黄色淡出技术的显示效果
很多网站都采用了黄色淡出技术,可以说,它已成为一种约定俗成的做法。这样很好。用户已经接受了这种做法。伴随着视觉反馈技术的广泛应用,它的含义也不言自明。
下面这个函数会让元素的背景色渐变成白色:
function fadeUp(element,red,green,blue) {
  if (element.fade) {
    clearTimeout(element.fade);
  }
  element.style.backgroundColor = "rgb("+red+"," +green +",
    "+blue+")";
  if (red == 255 && green == 255 && blue == 255) {
    return;
  }
  var newred = red + Math.ceil((255 - red)/10);
  var newgreen = green + Math.ceil((255 - green)/10);
  var newblue = blue + Math.ceil((255 - blue)/10);
  var repeat = function() {
    fadeUp(element,newred,newgreen,newblue)
  };
  element.fade = setTimeout(repeat,100);
}
函数fadeUp需要4个参数。第一个是要改变背景色的元素名。另外3个参数是RGB值:红、绿和蓝。这些是元素背景色的起始RGB值:
function fadeUp(element,red,green,blue)
元素style属性的backgroundColor通过红、绿、蓝这3个值来改变。借助CSS,你可用十六进制或RGB值声明颜色:
element.style.backgroundColor = "rgb("+red+","+ green +",
"+blue+")";
这是一个递归函数,也就是说它自己调用自己。每次调用前都会有一个小暂停,用setTimeout函数来实现,它带有两个参数:要执行的函数和执行前需等待的时间(以毫秒计):
var repeat = function() { 
  fadeUp(element,newred,newgreen,newblue)
};
element.fade = setTimeout(repeat,100);
在这个例子里,把超时函数赋给一个自定义的属性——fade。每次调用该函数时,都用clearTimeout把时间归零。这就确保了在一个元素上多次调用函数fadeUp时,也不会发生任何的指令冲突:
if (element.fade) {
  clearTimeout(element.fade);
}
在下次调用函数前,RGB的值会逐渐趋向255:
var newred = red + Math.ceil((255 - red)/10);
var newgreen = green + Math.ceil((255 - green)/10);
var newblue = blue + Math.ceil((255 - blue)/10);
当每个值都变成255后,元素的背景色就变成白色了:rgb(255,255, 255)。此时,无需再调用函数:
if (red == 255 && green == 255 && blue == 255) {
  return;
}
只要文档背景色为白,就可用fadeUp函数实现黄色淡出效果,或其他任何颜色的淡出。
修改函数parseResponse,为联系方式页面添加黄色淡出效果:
function parseResponse(request) {
  if (request.readyState == 4) {
    if (request.status == 200 || request.status == 304) {
      var details = document.getElementById("details");
      details.innerHTML = request.responseText;
      fadeUp(details,255,255,153);
    }
  }
}
这里首先定义了一个黄色阴影:rgb(255,255,153)。当收到Ajax响应后,这个颜色会渐变成白色,如图6-10所示。
图6-10  用渐变色提示页面更新的部分
我们通常使用黄色,因为用户已从其他的Ajax程序中习惯了这个颜色。除了这种情况,渐变色还可用于添加上下文(add context)。在联系方式表单里,你可以用红色阴影标注错误提示,如图6-11所示。
图6-11  用浅红色标注问题区域
我们写的这个fadeUp函数是最基础的,它只适用于文档为白色背景的情况。更多复杂的脚本,请参见Fade Anything Technique(www.axentric. com/aside/fat/)。
 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:82053次
    • 积分:1660
    • 等级:
    • 排名:千里之外
    • 原创:83篇
    • 转载:27篇
    • 译文:1篇
    • 评论:2条
    最新评论