我怎样才能prevent IE缓存从造成重复的Ajax请求？ [英] How can I prevent IE Caching from causing duplicate Ajax requests?

问题描述

我们使用的是动态脚本标记与JSONP机制，实现跨域Ajax调用。前端部件是很简单的。它只是调用一个搜索Web服务，通​​过用户提供的搜索条件，接收和动态渲染的结果。

注意 - 对于那些不熟悉的动态脚本标记与执行类似Ajax的请求到服务的JSONP方法返回JSON格式的数据，我可以解释如何，如果利用它你认为它可能是相关的问题。

该服务的WCF托管在IIS。它是宁静的，所以当用户点击搜索，我们做的第一件事就是生成包含标准的URL。它看起来像这样...

  

    

HTTPS：//.../service.svc标准=约翰·史密斯+

  

我们再使用动态创建的HTML脚本标记与设定在上述地址的来源属性，使要求我们的服务。返回的结果，我们处理它来显示结果。

这一切工作正常，但我们发现使用IE浏览器时，该服务从客户端两次接收请求。我用小提琴手来监视流量离开浏览器，果然我看到两个请求具有下列网址...

• 请求1：HTTPS：//.../service.svc标准=约翰·史密斯+
？
• 请求2：HTTPS：//.../service.svc标准= +约翰史密斯和放大器; _ = 123456789

第二个请求已经被附加了某种标识的。此ID是为每个请求的不同。

我立即想到的是它是与缓存。添加一个随机数到URL的结尾是经典的方法来禁用浏览器缓存之一。为了证明这一点，我在IE中调整缓存设置。

• 我设置检查更新版本的存储页面为从不 - 这导致正在只有一个请求每次。一个与上年底的随机数。

• 我设置此设定值回自动的默认值，请求立即开始重新发送两次

有趣的是我没有收到客户端的两个请求。我发现里，有人暗示，这可能是与IE浏览器中的错误此参考。这不会发生，我在Firefox的事实支持这一理论。

1. 在任何人都可以证实这是否是与IE浏览器中的错误？这可能是由设计。
2. 有谁知道的一种方式，我可以阻止它发生？

一些较为模糊的搜索我的用户将运行需要足够的处理资源，使加倍任何一个非常糟糕的主意。我真的想避免这种情况，如果在所有可能的： - ）

解决方案

我最终确立为重复请求的原因。正如我所说的，我选择使用制造Ajax调用的机制与动态脚本标记。我建立请求的URL，创建一个新的脚本元素和分配的URL src属性...

  VAR脚本= document.createElement方法（脚本）;
script.src = https：//开头....;
 

然后通过其附加到文件头执行脚本。最重要的是，我用的是JQuery的附加功能......

  $（头）追加（脚本）;
 

在附加功能：jQuery是期待，我试图让Ajax调用。如果元素被附加的类型是一个脚本，然后执行一个特殊的程序，使得使用 XmlHtt prequest 对象Ajax请求。但脚本仍然被附加到文件头，并通过浏览器执行有太多。因此，双重要求。

1. 在第一次是直接从脚本 - 一个我打算发生
。
2. 第二个从jQuery里面走了附加功能。这是后缀为随机生成的查询字符串参数的形式＆放大器; _ = 123456789的要求。

我通过preventing jQuery库的副作用简单的事情。我用本机附加功能......

  document.getElementByTagName（头）的appendChild（脚本）。
 

一的要求，现在发生在我预期的方式。我不知道，JQuery的附加功能，能有这样建在一个显著的副作用。

We are using the Dynamic Script Tag with JsonP mechanism to achieve cross-domain Ajax calls. The front end widget is very simple. It just calls a search web service, passing search criteria supplied by the user and receiving and dynamically rendering the results.

Note - For those that aren’t familiar with the Dynamic Script Tag with JsonP method of performing Ajax-like requests to a service that return Json formatted data, I can explain how to utilise it if you think it could be relevant to the problem.

The service is WCF hosted on IIS. It is Restful so the first thing we do when the user clicks search is to generate a Url containing the criteria. It looks like this...

https://.../service.svc?criteria=john+smith

We then use a dynamically created Html Script Tag with the source attribute set to the above Url to make the request to our service. The result is returned and we process it to show the results.

This all works fine, but we noticed that when using IE the service receives the request from the client Twice. I used Fiddler to monitor the traffic leaving the browser and sure enough I see two requests with the following urls...

• Request 1: https://.../service.svc?criteria=john+smith
• Request 2: https://.../service.svc?criteria=john+smith&_=123456789

The second request has been appended with some kind of Id. This Id is different for every request.

My immediate thought is it was something to do with caching. Adding a random number to the end of the url is one of the classic approaches to disabling browser caching. To prove this I adjusted the cache settings in IE.

• I set "Check for newer versions of stored pages" to "Never" – This resulted in only one request being made every time. The one with the random number on the end.

• I set this setting value back to the default of "Automatic" and the requests immediately began to be sent twice again.

Interestingly I don’t receive both requests on the client. I found this reference where someone is suggesting this could be a bug with IE. The fact that this doesn’t happen for me on Firefox supports this theory.

1. Can anyone confirm if this is a bug with IE? It could be by design.
2. Does anyone know of a way I can stop it happening?

Some of the more vague searches that my users will run take up enough processing resource to make doubling up anything a very bad idea. I really want to avoid this if at all possible :-)

解决方案

I eventually established the reason for the duplicate requests. As I said, the mechanism I chose to use for making Ajax calls was with Dynamic Script Tags. I build the request Url, created a new Script element and assigned the Url to the src property...

var script = document.createElement("script");
script.src = https://....";

Then to execute the script by appending it to the Document Head. Crucially, I was using the JQuery append function...

$("head").append(script);

Inside the append function JQuery was anticipating that I was trying to make an Ajax call. If the type of element being appended is a Script, then it executes a special routine that makes an Ajax request using the XmlHttpRequest object. But the script was still being appended to the document head, and being executed there by the browser too. Hence the double request.

1. The first came direct from the script – the one I intended to happen.
2. The second came from inside the JQuery append function. This was the request suffixed with the randomly generated query string argument in the form "&_=123456789".

I simplified things by preventing the JQuery library side effect. I used the native append function...

document.getElementByTagName("head").appendChild(script);

One request now happens in the way I intended. I had no idea that the JQuery append function could have such a significant side effect built in.

这篇关于我怎样才能prevent IE缓存从造成重复的Ajax请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！