使用Ajax实现真实的Web进度条
我们为了改善用户界面，通常会在处理量大或者是网络速度较慢的时候，给用户显示一个处理进度，让用户心理有底，增强用户等待结果的耐心，以改善用户体验。为了达到这个效果，通常做法有两大类：简单等待和真实的处理进度，本文着重讨论第二种方法的实现。
1)简单的等待界面：这种做法之所以说简单，就是在用法发送了处理命令后，立即在页面的某个地方替换一个waiting的图片，比如一个转圈的GIF，一张Loading的图片等，这种不称之为进度条，顶多就是个等待条，但通常还是可以给用户带来那么点满足，在业务量不大的情况下，也够用了，例子参见http://www.belitastone.com的首页。
2)真实的等待进度：比如说，我要在B/S系统中实现一个数据导入的功能，数据文件总共有100个，每个文件包含成千上万的数据，导入过程可能需要15分钟，那么我还用一个图片在那边打转吗？现在这样还是不够的，我可能需要让使用者知道，我当前处理的是第几个文件，还剩下几个，处理的百分比，并显示一个加载的真实进度条，这个进度条要如实反映处理的百分比。
实现1：由于用户处理的数据量大，可以在文件导入过程中，循环计算进度，并将进度信息存储在上下文中，并在前台页面定时从上下文读取进度数据，并在页面显示。这种方法思路比较直接。
实现2：使用观察者模式，实现进度主动通知。思路是：在文件导入过程中，计算进度信息，并将进度数据通知给观察者，前台页面定时向观察者咨询进度，并将进度显示到页面中。
<!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=gbk" /><title>php+jquery+ajax+json示例</title><script src="jquery.js"></script></head><body>php+jquery+ajax+json示例<br /></body><script type="text/javascript">//添加文档$(document).ready(function(){ $("body").append('<input type="button" value="请求服务器" id="btn" />'); $('#btn').click(function (){ $("body").append('<div id="loading"><img src="loading.gif"/></div>');getServerData(); });$("body").append('<div id="result"></div>'); });//设置ajax的参数function getServerData(){$.ajax({url:"http://localhost:86/ajax_server.php",data:"name=周&sex=男&age=11",timeout:3000,type:"POST",async:false,error:function (XMLHttpRequest, textStatus, errorThrown) {alert('请求错误...'+errorThrown);},beforeSend:function (XMLHttpRequest) { // alert('发送请求之前...'); $("#loading").show(); },success: function (data, textStatus) {//alert('请求成功...');}, complete:handleResponse}); }//成功返回的绑定函数function handleResponse(XMLHttpRequest, textStatus) {alert('完成啦...'+XMLHttpRequest);var myjson = eval(XMLHttpRequest.responseText); var str="";for(var i=0;i<myjson.length;i++){str+="姓名:"+myjson[i].name+"<br />";str+="年龄:"+myjson[i].age+"<br />";str+="性别:"+myjson[i].sex+"<br />";}$("#result").html(str);$("#result").append('<input type="button" value="清除数据" id="btn2" />'); $('#btn2').click(function (){ $("#result").html(''); });}</script></html>?<?php $data[]=array('name'=>'万','sex'=>'男','age'=>12);$data[]=array('name'=>'陈','sex'=>'女','age'=>10);$data[]=array('name'=>$_REQUEST['name'],'sex'=>$_REQUEST['sex'],'age'=>$_REQUEST['age']);//echo json_encode($data);echo json_encode ( gbk2utf8($data) ); function gbk2utf8($data){ if(is_array($data)){ return array_map('gbk2utf8', $data); } return iconv('gbk','utf-8',$data); } ?>?