使用Spring 3.2.0.RELEASE的DeferredResult反转ajax。不在IE中工作

时间:2013-01-17 09:52:55

标签: javascript spring jquery spring-mvc spring-3

我正在尝试使用Spring中的反向ajax创建群聊的演示。我使用的是Spring 3.2.0.RELEASE版本。

我正在使用DeferredResult在我的控制器中执行反向ajax。以下是我的Controller类的片段。

@Autowired
private AsyncRepository asyncRepository;

Map<Integer, List<DeferredResult<String>>> watchers = new ConcurrentHashMap<Integer, List<DeferredResult<String>>>();

@RequestMapping(value="/asyncRequest/getMessages/{id}", method=RequestMethod.GET)
@ResponseBody
public DeferredResult<String> getMessages(final @PathVariable("id") Integer id){
    final DeferredResult<String> deferredResult = new DeferredResult<String>(null, Collections.emptyList());

    if(watchers.containsKey(id)) {
        watchers.get(id).add(deferredResult);
    } else {
        watchers.put(id, new ArrayList<DeferredResult<String>>());
        watchers.get(id).add(deferredResult);
    }

    deferredResult.onCompletion(new Runnable() {
        @Override
        public void run() {
            watchers.get(id).remove(deferredResult);
        }
    });

    return deferredResult;
}

@RequestMapping(value="/asyncRequest/setMessages/{id}/{message}", method=RequestMethod.GET)
@ResponseBody
public String setMessage(@PathVariable("id") Integer id, @PathVariable("message") String message) {
    asyncRepository.setMessage(id, message);

    return "";
}

@Scheduled(fixedRate=1000)
public void processQueues() {
    for (Map.Entry<Integer, Queue<AsyncDataBean>> entry : asyncRepository.getAsyncBeans().entrySet()) {
        while(entry != null && entry.getValue() != null && !entry.getValue().isEmpty()) {
            AsyncDataBean asyncDataBean = entry.getValue().poll();
            for (DeferredResult<String> deferredResult : watchers.get(asyncDataBean.getId())) {
                deferredResult.setResult(asyncDataBean.getMessage());
            }
        }
    }
}

以下是Repository类,它包含GroupID的Map及其相关的messageQueue。它还具有获取和设置相关组ID的消息的功能。

@Repository
public class AsyncRepository {

    private Map<Integer, Queue<AsyncDataBean>> asyncBeans = new ConcurrentHashMap<Integer, Queue<AsyncDataBean>>();

    public String getMessages(Integer id) {
        StringBuilder stringBuilder = new StringBuilder();
        while (asyncBeans.get(id) != null && !asyncBeans.get(id).isEmpty()) {
            stringBuilder.append(asyncBeans.get(id).poll().getMessage()).append("~");
        }

        return stringBuilder.toString();
    }

    public void setMessage(Integer id, String message) {
        if(asyncBeans.containsKey(id)) {
            asyncBeans.get(id).add(new AsyncDataBean(id, message));
        } else {
            Queue<AsyncDataBean> messageQueue = new ConcurrentLinkedQueue<AsyncDataBean>();
            messageQueue.add(new AsyncDataBean(id, message));
            asyncBeans.put(id, messageQueue);
        }
    }

    public Map<Integer, Queue<AsyncDataBean>> getAsyncBeans() {
        return asyncBeans;
    }

    public void setAsyncBeans(Map<Integer, Queue<AsyncDataBean>> asyncBeans) {
        this.asyncBeans = asyncBeans;
    }
}

以下是我用来存储每个邮件及其组ID的数据bean。

public class AsyncDataBean {
    private Integer id;
    private String message;

    public AsyncDataBean() {
    }

    public AsyncDataBean(int id, String message) {
        this.setId(id);
        this.setMessage(message);
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

然后是群聊的jsp页面。看起来如下。

<script type="text/javascript">
    var messagesWaiting = false;
    function getMessages(){
        if(!messagesWaiting){
            $.ajax({ url: "${pageContext.servletContext.contextPath}/asyncRequest/getMessages/${id}", 
                     dataType:"text",
                     success: function(data,textStatus,jqXHR) {
                         if(textStatus == 'success'){
                             messagesWaiting = false;
                             var arr = data.split("~");
                             for(var i=0; i<arr.length; i++)
                             {
                                    try
                                    {
                                        if(arr[i] != '') {
                                            $("#txtaMessages").val($("#txtaMessages").val() + "\n\n" + arr[i]);
                                            document.getElementById("txtaMessages").scrollTop = document.getElementById("txtaMessages").scrollHeight;
                                        }
                                    }
                                    catch(e){
                                     alert(e.message);
                                    }
                             }
                         }
                     }, 
                     complete: function(j) {
                     },
                     error: function(xhr) { 
                     }
            });
            messagesWaiting = true;
        }
    }
    setInterval(getMessages, 1000);
    getMessages();

    function sendMessage() {
        var xmlhttp1 = new XMLHttpRequest();
        xmlhttp1.open("GET", '${pageContext.servletContext.contextPath}/asyncRequest/setMessages/${id}/' + $("#txtMessage").val(), true);
        xmlhttp1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlhttp1.send();
        $("#txtMessage").val("");
        $("#txtMessage").focus();
    }
</script>

</head>
<body>
    <h1>Hello World!</h1>
    <table>
        <tr>
            <td>Messages :: </td>
            <td>
                <textarea cols="100" rows="10" id="txtaMessages"></textarea>
            </td>
        </tr>
        <tr>
            <td>Send Message :: </td>
            <td><input type="text" id="txtMessage"/></td>
        </tr>
        <tr>
            <td><input type="button" value="Send" onclick="sendMessage();"/></td>
        </tr>
    </table>
</body>
</html>

这就是我到目前为止编写的代码。一切都在FF和Chrome中运行。但在IE中,它没有按预期工作。该请求永远不会在服务器上保留,并且始终按照javascript代码中的配置每秒执行一次。它总是返回与之前相同的结果。我曾尝试使用其他几种方法来发送IE的ajax请求,但它无法正常工作。任何人都能让它为我工作吗?

由于在FF和Chrome中一切正常,我怀疑问题是使用javascript代码发送请求以获取消息。

请帮帮我。

提前致谢。

1 个答案:

答案 0 :(得分:1)

这非常令人沮丧。

为了让这个东西在IE中正常工作,我需要在jjery为getMessages创建的ajax请求中设置cache:false属性。否则IE将不会将请求保留在挂起状态,并始终返回旧的响应文本。

这是IE的一个非常大的问题。我希望没有人再次面对这个问题,或者尽早找到答案。

:)