（有ajax丰富经验的请帮忙）如何使用ajax大批量刷新图片

Question

ajax发送后台请求到服务器，服务器程序作出新图，但并不发送到客户端，
经过ajax后处理后，重新设置图片img的src可以获得新图，但此方法不稳定，有的时候并未显示新图，而且我要同时刷新100多个图，因此我想我不能把图片发送到客户端再一个一个图的设置url（此时的url是ajax请求的url）。
这个问题很久没完美的解决，请帮忙

Answer 1

是不是由于浏览器缓存的原因？就是每次URL一样，HTTP GET的时候（比如你的<img src="">）不访问服务器，而是使用本地cache。你可以先试一试
img.src="xxxx/yyy.jpg?zzz="+ new Date().getTime()
保证URL不一样

Answer 2

多谢shine333,我的情况是用一个servlet接收ajax请求重新做出10个图，客户端重新设置img.src="images/..png"， 因为如果我用ajax请求的url代替img.src只能识别出一个图

Answer 3

当服务器返回req.readyState==4（READY_STATE_COMPLETE）req.status==200
的时候我便开始重新设置img.src,其实和原来的src是一样的

Answer 4

no,no,no我的意思就是让你每次的src不一样URL（http的，其他的还更复杂点）[[protocol]://domain[:port]/]path_or_file_info[?query_string]
[]内可以省略现在我的意思就是你重新设置img.src的时候，加上query string，不管什么，只要每次都不一样。
服务器处理的时候，前面协议号，域名，端口，路径等信息都不变，HTTP请求仍会正确地指向你的图形文件。而由于你的图形文件不会处理query string，因而它对你的服务端而言是无用的。之所以添加它，其实是为了给客户端的浏览器看，让他知道，这是一个新的请求，别拿旧的本地cache唬弄我。这是一种比较简单的做法，但是不是最好的。
还有中做法，你可以写个<filter>，通过对response.setHeader,保证任何请求都客户端不缓存

Answer 5

我现在用的是这一段
<%
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
%>
我的意思是这个被ajax发送出的请求其实重新做出了10个图，所以我要把客户端的10个图的src都重新设置，把他们都设成一个url肯定不行了，我就干脆document.getElementById('img').src="images/1.jpg"(就是他初始的地址)，大部分情况下这个图还是会变成新图的，
不过毕竟不是好方法

Answer 6

您所说的方法我曾试过，是把图片的二进制流发忘客户端再重设 img的src为请求的url，
但因为图片态多我只好舍弃这个方法，我的那个方法并未把图片主动发往客户端

Answer 7

跟发送二进制流到客户端没有什么关系吧？shine333的意思是，页面之所以没有刷新，是因为请求前后资源的url是一样的，而浏览器就自作主张仍然使用缓存；只要在重新请求时，稍稍修改一下资源的url，比如在后面加个毫无实际用处的参数zzz='2006-12-21 00:00:01'，浏览器也会认为是不同的资源，也就不会再继续使用缓存了。我也想作个类似动态场景的东西，因为还没有动手，不知道像你说的同时刷新100多个图片的结果会是怎样，继续关注一下。楼主如果最终实现了，谈谈体会。

Answer 8

关于批量刷新的方法好像不多啊 《ajax in action》中也没讲 所以有些迷茫 
后来想想，我那个方法不稳定的原因可能是服务器还没完全作出图片就返回
req.readyState==4（READY_STATE_COMPLETE）req.status==200，导致我的后处理提前
刚才shine的方法我觉得只能刷新个别的图片，如果100多个图用100多个url重设太复杂了
希望继续有高手指点！

Answer 9

大哥,我是说图片A的地址，和它自己上一次的地址要不同，你10个图片当然URL不同了<%
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
%>你是哪个里面的，输出图片用的，还是输出Ajax结果用的。输出Ajax结果的对图片没问题。假设你有2个图片要更新，分别对应服务器上
"images/1.jpg"和"images/1.jpg"
你ajax请求〉更新图片〉返回要更新的图片URL，
你的no-cache只是保证了你的ajax返回的结果是新的，也就是
document.getElementById('img').src="images/1.jpg"
这段代码是不错的，但是浏览器处理这个代码的时候，由于URL和本地cache中保存的一致，且由于<img src>是HTTP GET，GET方式是会优先去取cache的，所以会不正确。我是让你
document.getElementById('img').src="images/1.jpg" + "?sid=" + new Date().getTime()这样你每次去更新1.jpg的时候，浏览器得到的URL就类似
images/1.jpg?sid=123456789001
images/1.jpg?sid=999888777666

Answer 10

谢谢各位了，不过
document.getElementById('img').src="images/1.jpg" + "?sid=" + new Date().getTime()
我测试过了，和过去是一样的，有些时候图片没变。
我还是怀疑servlet在调用另一个作图类还没把图做完就返回req.readyState==4（READY_STATE_COMPLETE）req.status==200，干脆让servlet返回个标记给客户端再做后处理吧

Answer 11

按您的方法做了（经测试每次的url确实不同），而且服务器做完图会发一个数据给客户端，读到数后再重设url，图也确实做出来了，但有的时候显示的还是老图，请高人指点啊