最近一个项目,客户端使用用jQuery编写ajax请求,服务端采用struts2框架。js发送请求和action处理请求过程中,遇到一个问题。刚开始觉得问题很诡异,仔细定位很久之后才发现问题,虽然问题解决了, 但更深层次的原因还不清楚,欢迎大牛们指导。

1.问题现象

  • 客户端问题
            通过IE9下的开发人员工具F12发现,浏览器的确是发送了post请求,但是该请求“结果”栏显示的是“已终止”,“发起程序”值 是“已挂起”。请求头、请求体、响应头、响应体都是空的。也就说浏览器发送了1个异常的请求。
  • 服务端问题
          Struts2的action能够接受到post的请求,但是获取不到请求参数的值。
 

2.相关JS代码

  1. function sendMessage()
  2. {
  3. $.post("indvAction!sendShortMsg.action", {
  4. "configType" : "1"
  5. });
  6. }
  7. //弹出确认对话框
  8. Nf.promptConfirm({
  9. message :”operation success”,
  10. width : 300,
  11. height : 150,
  12. handler : function(btn)
  13. {
  14. if (btn == "ok")
  15. {
  16. //向服务器发送ajax请求
  17. sendMessage()
  18. //关闭当前页面
  19. NfLayout.closeTab();
  20. }
  21. }
  22. });
function sendMessage()
{
$.post("indvAction!sendShortMsg.action", {
"configType" : "1"
});
} //弹出确认对话框
Nf.promptConfirm({
message :”operation success”,
width : 300,
height : 150,
handler : function(btn)
{
if (btn == "ok")
{
//向服务器发送ajax请求
sendMessage()
//关闭当前页面
NfLayout.closeTab();
} } });

3.定位过程

    刚开始使用F12没有得到与定位问题有关的信息。后面使用httpWatch或burp suite进行http抓包,查看原始的http请求和响应报文。结果发现了问题。
 
1、浏览器发出的请求报文中,的确没有传递configType字段的值。请求报文如下:         
  1. POST /mobile/jsp/indvconfig/indvAction!sendShortMsg.action HTTP/1.1
  2. x-requested-with: XMLHttpRequest
  3. Accept-Language: zh-CN,en;q=0.5
  4. Referer: https://*.*.*.*:17243/mobile/jsp/indvconfig/indv_config.jsp
  5. Accept: */*
  6. Content-Type: application/x-www-form-urlencoded
  7. Accept-Encoding: gzip, deflate
  8. User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
  9. Host: 11.12.213.87:17243
  10. Content-Length: 0
  11. Connection: Keep-Alive
  12. Cache-Control: no-cache
  13. Cookie: JSESSIONID=62C9FF9CBC97731B120ABAC297C4E4C5
POST /mobile/jsp/indvconfig/indvAction!sendShortMsg.action HTTP/1.1
x-requested-with: XMLHttpRequest
Accept-Language: zh-CN,en;q=0.5
Referer: https://*.*.*.*:17243/mobile/jsp/indvconfig/indv_config.jsp
Accept: */*
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Host: 11.12.213.87:17243
Content-Length: 0
Connection: Keep-Alive
Cache-Control: no-cache
Cookie: JSESSIONID=62C9FF9CBC97731B120ABAC297C4E4C5
 2、浏览器的确收到了服务器的响应报文。
  1. HTTP/1.1 200 OK
  2. Server: Apache-Coyote/1.1
  3. Content-Type: text/plain;charset=UTF-8
  4. Vary: Accept-Encoding
  5. Date: Fri, 22 Nov 2013 01:34:31 GMT
  6. Content-Length: 6
  7. this is my response!
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: text/plain;charset=UTF-8
Vary: Accept-Encoding
Date: Fri, 22 Nov 2013 01:34:31 GMT
Content-Length: 6 this is my response!

其实一切都很正常了,浏览器确实发送了HTTP请求,只不过是没有携带请求参数值,只不过是被IE9的展示方式欺骗了,所以刚开始定位很久都没有头绪。现在产生了如下问题:为什么浏览器发送了ajax请求,但是没有携带请求参数?为什么IE9显示请求是“已挂起”、“已终止”

 

4.问题解决

    去掉NfLayout.closeTab();这行代码就可以解决问题了。这是因为jquery的POST请求是异步的,当post请求还没有准备好数据的时候,这个时候执行了NfLayout.closeTab();当前页面关闭,导致了浏览器终止了http请求。这样的话就,相当于是请求被异常终止,于是IE9显示请求“已挂起”、“已终止”。具体深层次的原因不清楚,下面是个人一些猜想和解释:
1、 JS代码只有加载才会被执行,而触发js加载的正是html/jsp页面的显示。所以,我觉得Html/jsp就是js的执行环境。如果js还没有执行完,页面关闭的话,后续js代不会再执行。测试代码如下:
  1. <head>
  2. <script type='text/javascript'>
  3. function test()
  4. {
  5. alert(1111);
  6. window.opener = "";
  7. window.open("","_self");
  8. window.close();
  9. alert("我不会在执行了,因为页面已经关闭。");
  10. //setTimeout('callBack( )', 3000)
  11. }
  12. </script>
  13. </head>
  14. <body>
  15. <input id="button_-12你" type="button" value="testRight" onclick="test();">
  16. </body>
<head>
<script type='text/javascript'>
function test()
{
alert(1111);
window.opener = "";
window.open("","_self");
window.close();
alert("我不会在执行了,因为页面已经关闭。");
//setTimeout('callBack( )', 3000)
}
</script>
</head>
<body>
<input id="button_-12你" type="button" value="testRight" onclick="test();">
</body>

个人感觉,可能是jquery拼post的请求体,会相对比较耗时,还没有执行完毕。此时页面关闭,JS终止了执行,浏览器发送了1个不完全的HTTP请求(没有附上请求体)。  这是个人的猜测,大家有自己见解的,欢迎指教。基于这个结论,我们将POST请求,改成Get请求,虽然IE9显示的还是请求终止,但是服务端能够收到请求的参数值了。

IE9的F12工具,"网络"页签,点击"开始捕获"之后,请求显示的状态是"挂起"的分析和解决的更多相关文章

  1. 【教程】手把手教你如何利用工具(IE9的F12)去分析模拟登陆网站(百度首页)的内部逻辑过程

    [前提] 想要实现使用某种语言,比如Python,C#等,去实现模拟登陆网站的话,首先要做的事情就是使用某种工具,去分析本身使用浏览器去登陆网页的时候,其内部的执行过程,内部逻辑. 此登陆的逻辑过程, ...

  2. android124 zhihuibeijing 新闻中心-新闻 -北京页签 下拉刷新

    缓存工具类:以url为key,json数据为value, package com.itheima.zhbj52.utils; import com.itheima.zhbj52.global.Glob ...

  3. 如何使用IE9浏览器自带开发人员工具捕获网页请求

    我们在通过浏览器访问一个网页的时候,有时候会遇到页面不能正常显示,图片不能正常加载的问题. 如果我们需要知道浏览器打开该网页时,网页中每个元素的加载情况.这时,我们便可以借助浏览器自带开发人员工具,来 ...

  4. android123 zhihuibeijing 新闻中心-新闻 页签 ViewPagerIndicator实现

    ## ViewPagerIndicator ## 使用导入ViewPagerIndicator库的方式相当于可以改源码,打包编译Eclips可以自动完成. ViewPager指针项目,在使用ViewP ...

  5. Excel宏录制、数据透视表、合并多个页签

    前段时间做数据分析的时候,遇到很多报表文件需要处理,在此期间学习了很多Excel操作,特此做笔记回顾. Excel宏录制 打开开发者工具 打开Excel文件,选择”文件”-->“选项”--> ...

  6. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  7. WPF如何实现一个漂亮的页签导航UI

    最近看到一个比较漂亮的UI主界面,该UI是用左边的页签进行导航,比较有特色,就想着尝试用WPF来实现一下.经过一番尝试,基本上将UI设计图的效果用WPF程序进行了实现.下面介绍一下主要的思路: 1 U ...

  8. JavaScript选项卡/页签/Tab的实现

    选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分 ...

  9. C# 重绘tabControl,添加关闭按钮(页签)

    C# 重绘tabControl,添加关闭按钮(页签) 调用方法 参数: /// <summary> /// 初始化 /// </summary> /// <param n ...

随机推荐

  1. poj 3925 枚举+prime

    /* 因为15很小可以暴力枚举然后用最小生成树的prim来计算 */ #include<stdio.h> #include<string.h> #include<math ...

  2. Keywords Search AC自动机

    In the modern time, Search engine came into the life of everybody like Google, Baidu, etc. Wiskey al ...

  3. POJ 1523 SPF 割点 Tarjan

    SPF Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9317   Accepted: 4218 Description C ...

  4. SecureCRT复制粘贴快捷键

    复制:[Ctrl]+[Insert] 粘贴:[Shift]+[Insert]

  5. Sublime Text 3显示文本编码

    在Settings上加入"show_encoding":true 进入这个选项:[Preferences]->[Settings] 搞定之后,在右下角可以看见文本编码

  6. MyBatis參数格式化异常解决方式:MyBatisSystemException:

    MyBatis參数格式化异常解决方式:MyBatisSystemException: 问题:今天使用MyBatis开发查询功能时,前台传入查询条件明明是String类型,到后台就报错,提示格式化数值错 ...

  7. windows下检測文件改变

    这个主要是应用在我前一篇博客里提到的脚本热载入功能. 主要实现的功能检測目录内文件的变化(改变.新增.删除.重命名),当发现改变的时候通知lua又一次载入脚本.基本上就是一个windows api的使 ...

  8. swift 2.0 语法 常量变量

    import UIKit /*: 常量变量 * 常量: let * 变量: var 完整格式: * 修饰符(let/var) 常量/变量名称: 数据类型 */ let number: Int var ...

  9. 模块化开发(三)---通过node.js学习模块化开发

    由于改文章有点大,部分代码格式有点问题,编辑之后博客园莫名其妙推出,有问题可以留言沟通.   什么是Node? 它是一个在浏览器之外可以解析和执行javascript代码的运行环 境,或者说是一个运行 ...

  10. 搜狗输入法APP的2个剪切板内容获取入口

    搜狗输入法APP的2个剪切板内容获取入口