数据不更新的IE浏览器应用程序中使用9/10研发angularjs [英] Data not updating on ie 9/10 in application developed using angularjs
问题描述
我开发使用angularjs一个简单的用户管理系统。这是简单的添加，更新和删除类型的应用程序。我使用的后端弹簧MVC获取JSON响应。
一切都在Firefox，Chrome和Safari，但IE浏览器很好.. !!!!
我有一个网页，其中列出了所有用户。第一次它将很好地工作在IE9 / 10，但上的任何用户做过任何更新将不会在视图（使用IE）中反映出来。
我无法弄清楚发生了什么。我认为IE9 / 10也将缓存JSON数据，每一次当用户列表页面被调用时，它将绑定缓存的数据和页面。
时有可能使IE9 / 10忘记那些加载的数据？
用于访问网络服务的角模块：
angular.module（user.service，[ngResource]）。
工厂（用户，函数（$资源，$ rootScope）{
VAR用户= $资源（
$ rootScope.apipath +用户/：用户id'，{用户名：@id}，
{更新：{方法：把'}}
）; User.prototype.isNew =功能（）{
回报（typeof运算（this.id）===未定义）;
}; 返回用户;
}）;
的UserList的Controler：
函数UserListController（$范围，用户）{
$ scope.users = User.query（）;
}
UserList的Tamplate：
＆LT; H2＆GT;＆LT;味精键=用户＆GT;＆LT; /味精＆GT;＆LT;一类=BTN BTN-主要右拉式的href =＃/用户/新＆GT;＆LT; I类=图标加号图标白＆GT;＆LT; / I＆GT;＆LT;味精键=的AddNew＆GT;＆LT; /味精＆GT;＆LT; / A＆GT;＆LT; / H2＆GT;＆LT;表类=表的表条纹＆GT;
＆所述; TR＆GT;
百分位＆GT;＆LT;味精键=用户名＆GT;＆LT; /味精＆GT;＆LT; /第i
百分位＆GT;＆LT;味精键=名与GT;＆LT; /味精＆GT;＆LT; /第i
百分位＆GT;＆LT; /第i
＆LT; / TR＆GT;
＆LT; TR NG重复=用户用户＆GT; ＆所述; TD＆GT; {{user.userId}}＆下; / TD＆GT;
＆LT; TD＆GT; {{user.contact.firstName}} {{user.contact.lastName}}＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; DIV CLASS =右拉＆GT;
＆LT;一类=BTN BTN-信息的href =＃/用户/ {{user.id}}＆GT;
＆LT; I类=图标铅笔图标白色＆GT;＆LT; / I＆GT;＆LT;味精键=编辑＆GT;＆LT; /味精＆GT;
＆所述; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
goggling我发现解决这个问题之后。
这种情况的发生是由于在IE 9/10 JSON缓存。我们需要告诉即不缓存JSON数据。
作为一个解决方案，我在此截取每个请求附带的网络服务或为说JSON数据服务器创建一个Java的过滤器。并且我增加了以下的响应头
- 的Cache-Control：no-cache的
- 杂注：无缓存
- 过期：-1
这些头部响应对象会告诉IE浏览器不要缓存此响应接收到的数据。
过滤器是如下：
公共类NoCacheFilter实现过滤器{/ **
*把这个过滤器投入使用。
*
* @参数一个FilterConfig由servlet使用的过滤器配置对象
*容器初始化期间将信息传递给一个滤波器
* @throws ServletException异常，通知容器不要将过滤器
*投入服务
* /
公共无效的init（一个FilterConfig一个FilterConfig）抛出了ServletException {
}/ **
*设置缓存头指令。
*
* @参数的servletRequest提供数据，包括参数名称和价值观，
*属性，和一个输入流
* @参数ServletResponse的助攻一个servlet在发送给一个答复
*客户端
* @参数filterChain给出了一个视图到一个过滤的调用链
*要求
* /
公共无效的doFilter（ServletRequest中的servletRequest，ServletResponse的ServletResponse的，FilterChain filterChain）
抛出IOException异常，ServletException异常{
HttpServletResponse的HttpServletResponse的=（HttpServletResponse的）ServletResponse的;
HttpServletRequest的HttpServletRequest的=（HttpServletRequest的）的servletRequest; 。字符串requestUrl = httpServletRequest.getRequestURL（）的toString（）; //设置缓存头
httpServletResponse.setHeader（缓存控制，无缓存）;
httpServletResponse.setHeader（杂注，无缓存）;
httpServletResponse.setDateHeader（过期，-1）; filterChain.doFilter（的servletRequest，ServletResponse的）;
}/ **
*借此过滤掉的服务。
* /
公共无效的destroy（）{
}
}
I am developing a simple user management system using angularjs. It's simple add, update and delete kind of application. I am using spring-mvc in back-end for getting JSON response. Everything works fine in Firefox, Chrome and Safari but IE..!!!!
I have one page which lists all users. For the first time it will work fine in IE9/10 but any update done on any user will not be reflected in view (using IE).
I am not able to figure out what is happening. I think IE9/10 will also cache json data, and each time when user list page is called it will bind that cached data with page.
Is it possible to make IE9/10 forget those loaded data?
Angular module for accessing web-service :
angular.module("user.service", ["ngResource"]).
factory('User', function($resource, $rootScope) {
var User = $resource(
$rootScope.apipath + 'users/:userId', {userId: '@id'},
{update: {method: 'PUT'}}
);
User.prototype.isNew = function() {
return (typeof(this.id) === 'undefined');
};
return User;
});
UserList Controler :
function UserListController($scope, User) {
$scope.users = User.query();
}
UserList Tamplate :
<h2><msg key="users"></msg><a class="btn btn-primary pull-right" href="#/users/new"><i class="icon-plus-sign icon-white"></i><msg key="addnew"></msg></a></h2>
<table class="table table-striped">
<tr>
<th><msg key="username"></msg></th>
<th><msg key="name"></msg></th>
<th></th>
</tr>
<tr ng-repeat="user in users">
<td>{{user.userId}}</td>
<td>{{user.contact.firstName}} {{user.contact.lastName}}</td>
<td>
<div class="pull-right">
<a class="btn btn-info" href="#/users/{{user.id}}">
<i class="icon-pencil icon-white"></i><msg key="edit"></msg>
</a>
</div>
</td>
</tr>
</table>
After goggling I found solution to this problem.
This situation occurs due to caching of json in IE 9/10. We need to tell ie not to cache json data.
As a solution I created a java-filter at server which intercepts each request came for web-services or say for json data. And I added following headers in response
- Cache-Control : no-cache
- Pragma : no-cache
- Expires : -1
These headers in response object will tell IE not to cache data received with this response.
Filter is as follows :
public class NoCacheFilter implements Filter {
/**
* Place this filter into service.
*
* @param filterConfig the filter configuration object used by a servlet
* container to pass information to a filter during initialization
* @throws ServletException to inform the container to not place the filter
* into service
*/
public void init(FilterConfig filterConfig) throws ServletException {
}
/**
* Set cache header directives.
*
* @param servletRequest provides data including parameter name and values,
* attributes, and an input stream
* @param servletResponse assists a servlet in sending a response to the
* client
* @param filterChain gives a view into the invocation chain of a filtered
* request
*/
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
throws IOException, ServletException {
HttpServletResponse httpServletResponse = (HttpServletResponse) servletResponse;
HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
String requestUrl = httpServletRequest.getRequestURL().toString();
// set cache headers
httpServletResponse.setHeader("Cache-Control", "no-cache");
httpServletResponse.setHeader("Pragma", "no-cache");
httpServletResponse.setDateHeader("Expires", -1);
filterChain.doFilter(servletRequest, servletResponse);
}
/**
* Take this filter out of service.
*/
public void destroy() {
}
}
这篇关于数据不更新的IE浏览器应用程序中使用9/10研发angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
