JavaScript for循环中使用Ajax发送请求
2016-11-19 15:15
459 查看
声明:本博文用于学习总结及工作心得
问题:
以前同事写在前端写有一个聊天的组件,点击该组件会出现一个聊天用户的界面;是用树结构显示的;而调用的function中使用的是for循环加Ajax循环发出请求
最近用户在多用户登录使用gauge组件的时候,造成浏览器假死;因为最开始不知道function中是for循环发送Ajax请求,只有观察服务器状态,一步步调试,
服务器TCP连接出现大量的Time_Wait 和Close_Wait;修改服务器配置文件已解决TIME_WAIT出现过多的原因,而CLOSE_WAIT则是由于程序代码的问题,比如SOCKET没有释放
就会出现这样的问题;结局我好服务器以后,仔细调试代码。才发现加载树调用的function中使用的是for循环加Ajax循环发出请求;
原因:
Ajax请求默认是异步的,由于JS的for循环与ajax非同步运行,因此导致for循环结束了而ajax却还未执行,如果采用的是异步请求的方式,如果每次迭代的时候都去new一个XMLHttpRequest,因为遍历树,后端处理用到了递归;这样前端for循环在发送请求,而后台在递归,也没有加锁,照成服务器递归不到结点,跳不出递归,而客户端也一直等着浏览器response消息,直到超时,客户端主动断开连接;
看看TCP断开连接的四次握手:
1.Client
-> FIN -> Server
2.Client <- ACK <- Server 这时候Client端处于FIN_WAIT_2状态;而Server 程序处于CLOSE_WAIT状态。
3.Client <- FIN <- Server 这时Server 发送FIN给Client,Server 就置为LAST_ACK状态。
4.Client -> ACK -> Server Client回应了ACK,那么Server 的套接字才会真正置为CLOSED状态。
CLOSE_WAIT产生于被动关闭的一方,客户端超时以后,发出主动断开连接的请求,而服务器却告诉客户端我还有东西没传给你(之前发出的请求),这样就照成了大量的CLOSE_WAIT状态;
解决方法:
1.前端使用递归,一个Ajax请求结束以后执行下一个
2.同步Ajax请求,注意普通的同步是有问题的,一样会造成浏览器假死,使用闭包
我用的第二种:
for (var i = 0; i < groupArray.length; i++) {
setTimeout((function (i) {
return function () {
Ext.Ajax.request({
url: 'departmentgetNodesByDept',
method: 'post',
async: false,//同步请求数据
params: {
groupType: groupArray[i].groupType,
id: groupArray[i].id,
needCheckbox: needCheckbox,
needIcon: needIcon,
loadSelf: loadSelf,
except: except,
imAccount: public_IMAccount
},
success: function (response) {
var text = Ext.decode(response.responseText);
tree.getRootNode().findChild('text', text.fName).appendChild(text.children);
},
failure: function (response) {
Ext.MessageBox.alert('提示', Ext.decode(response.responseText).msg);
}
});
}
})(i), 10);
}
服务器sysctl配置文件优化TCP连接:
net.ipv4.tcp_fin_timeout = 20
net.ipv4.tcp_keepalive_time = 30
net.ipv4.tcp_syncookies = 1
net.ipv4.tcp_tw_reuse = 1
net.ipv4.tcp_tw_recycle = 1
net.ipv4.ip_local_port_range = 8800 65000
net.ipv4.tcp_max_syn_backlog = 8192
net.ipv4.tcp_max_tw_buckets = 5000
关于优化TCP连接推荐一篇文章:http://www.cnblogs.com/sunxucool/p/3449068.html
问题:
以前同事写在前端写有一个聊天的组件,点击该组件会出现一个聊天用户的界面;是用树结构显示的;而调用的function中使用的是for循环加Ajax循环发出请求
最近用户在多用户登录使用gauge组件的时候,造成浏览器假死;因为最开始不知道function中是for循环发送Ajax请求,只有观察服务器状态,一步步调试,
服务器TCP连接出现大量的Time_Wait 和Close_Wait;修改服务器配置文件已解决TIME_WAIT出现过多的原因,而CLOSE_WAIT则是由于程序代码的问题,比如SOCKET没有释放
就会出现这样的问题;结局我好服务器以后,仔细调试代码。才发现加载树调用的function中使用的是for循环加Ajax循环发出请求;
原因:
Ajax请求默认是异步的,由于JS的for循环与ajax非同步运行,因此导致for循环结束了而ajax却还未执行,如果采用的是异步请求的方式,如果每次迭代的时候都去new一个XMLHttpRequest,因为遍历树,后端处理用到了递归;这样前端for循环在发送请求,而后台在递归,也没有加锁,照成服务器递归不到结点,跳不出递归,而客户端也一直等着浏览器response消息,直到超时,客户端主动断开连接;
看看TCP断开连接的四次握手:
1.Client
-> FIN -> Server
2.Client <- ACK <- Server 这时候Client端处于FIN_WAIT_2状态;而Server 程序处于CLOSE_WAIT状态。
3.Client <- FIN <- Server 这时Server 发送FIN给Client,Server 就置为LAST_ACK状态。
4.Client -> ACK -> Server Client回应了ACK,那么Server 的套接字才会真正置为CLOSED状态。
CLOSE_WAIT产生于被动关闭的一方,客户端超时以后,发出主动断开连接的请求,而服务器却告诉客户端我还有东西没传给你(之前发出的请求),这样就照成了大量的CLOSE_WAIT状态;
解决方法:
1.前端使用递归,一个Ajax请求结束以后执行下一个
2.同步Ajax请求,注意普通的同步是有问题的,一样会造成浏览器假死,使用闭包
我用的第二种:
for (var i = 0; i < groupArray.length; i++) {
setTimeout((function (i) {
return function () {
Ext.Ajax.request({
url: 'departmentgetNodesByDept',
method: 'post',
async: false,//同步请求数据
params: {
groupType: groupArray[i].groupType,
id: groupArray[i].id,
needCheckbox: needCheckbox,
needIcon: needIcon,
loadSelf: loadSelf,
except: except,
imAccount: public_IMAccount
},
success: function (response) {
var text = Ext.decode(response.responseText);
tree.getRootNode().findChild('text', text.fName).appendChild(text.children);
},
failure: function (response) {
Ext.MessageBox.alert('提示', Ext.decode(response.responseText).msg);
}
});
}
})(i), 10);
}
服务器sysctl配置文件优化TCP连接:
net.ipv4.tcp_fin_timeout = 20
net.ipv4.tcp_keepalive_time = 30
net.ipv4.tcp_syncookies = 1
net.ipv4.tcp_tw_reuse = 1
net.ipv4.tcp_tw_recycle = 1
net.ipv4.ip_local_port_range = 8800 65000
net.ipv4.tcp_max_syn_backlog = 8192
net.ipv4.tcp_max_tw_buckets = 5000
关于优化TCP连接推荐一篇文章:http://www.cnblogs.com/sunxucool/p/3449068.html
相关文章推荐
- JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)
- 以Base64字符串形式上传文件——在web浏览器端使用原生Javascript及Ajax读取本地文件并发送请求到服务器
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 掌握 Ajax (2)使用 JavaScript 和 Ajax 发出异步请求
- 第二章:使用 JavaScript 和 Ajax 发出异步请求
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 使用JavaScript和Ajax发出异步请求
- 掌握Ajax 之 使用 JavaScript 和 Ajax 发出异步请求
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 使用JavaScript和Ajax发出异步请求 XMLHttpRequest
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 使用 JavaScript 和 Ajax 发出异步请求
- 使用 JavaScript 和 Ajax 发出异步请求
- 掌握Ajax 第二部分 使用 JavaScript 和 Ajax 发出异步请求
- 【转】掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 掌握ajax2:使用 JavaScript 和 Ajax 发出异步请求