js ajax同步请求造成浏览器假死的问题

一.问题的起因今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到ajax的同步请求了,当时喀喀喀三下五除二写玩了,大概代码如下: /** * 异步当前用户积分 by zgw 20161216 * @return {[type]} [description] */ function flushIntegralSum() { //点击按钮刷新前修改按钮的文案,已经去掉点击事情,防止多次点击 $("#flushbutton").r…

async:false同步请求，浏览器假死

// 异步请求导致数据错乱 // function get_num(){ // $("input[name='monitor']").eq(1).attr('checked',true); // $("input[name='monitor']").next('label').removeClass("ui-state-active"); // $("input[name='monitor']").eq(1).next('la…

jQuery Ajax同步参数导致浏览器假死怎么办

俗话说不作死就不会死,今天作死了一回,写了一个比较二逼的函数,遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下. 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则,我封装了一个名为getData的函数,它接收不同参数,只负责获取数据,然后把数据return.基本的逻辑剥离出来是这样的: 代码如下复制代码 function getData1(){ var result; $.ajax({ url : '…

（转）优化js脚本设计，防止浏览器假死

在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出“脚本运行时间过长“的提示框,如果出现这种情况说明你的脚本已经失控了,必须进行优化. 为什么会出现这种情况呢,我们先来看一下浏览器的内核处理方式: 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程. JavaScript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来然后加以处理,浏览器…

优化js脚本设计，防止浏览器假死

在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出"脚本运行时间过长"的提示框,如果出现这种情况说明你的脚本已经失控了,必须进行优化. 为什么会出现这种情况呢,我们先来看一下浏览器的内核处理方式: 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程. JavaScript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来然后加以处理,浏览器无论再…

ajax同步请求JS代码

ajax同步请求JS代码 <script type="text/javascript"> var txt = document.getElementById('txt'); //1.创建XMLHttpRequest对象 var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }else { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } /…

setTimeout 导致的浏览器假死

问题前几天,同事遇到一个浏览器假死的问题.就是浏览器在响应一个请求的时候,就突然不响应时间,进入假死状态,Cup也飙升到100%. 但是这个问题只出现在IE浏览器,chrome和Firefox等其他浏览器正常. 原因 Js 代码里面,看着也没有什么耗时的操作和后台异步调用.没办法,只能从响应事件的最开始一步一步调查.经过一番调试之后,问题定位在setTimeout 函数.当把setTimeout 里面执行的函数去掉之后,立马就不会出现这种情况.查看setTimeout 里面调用的函数,发现…

jQuery Ajax async=>false异步改为同步时，导致浏览器假死的处理方法

今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到ajax的同步请求了,当时喀喀喀三下五除二写玩了,大概代码如下: /** * 异步当前用户积分 by zgw 20161216 * @return {[type]} [description] */ function flushIntegralSum() { //点击按钮刷新前修改按钮的文案,已经去掉点击事情,防止多次点击 $("#flushbutton").replaceWi…

html5 WebWorkers 防止浏览器假死

在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出“脚本运行时间过长“的提示框,如果出现这种情况说明你的脚本已经失控了. 一个浏览器至少存在三个线程:js引擎线程(处理js).GUI渲染线程(渲染页面).浏览器事件触发线程(控制交互). 1:JavaScript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来然后加以处理,浏览器无论再什么时候都只有一个JS线程在运行JS程序. 2:GUI 渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种…

ajax同步请求与异步请求的区别

ajax 区别: async:布尔值,用来说明请求是否为异步模式.async是很重要的,因为它是用来控制JavaScript如何执行该请求. 当设置为true时,将以异步模式发送该请求,JavaScript代码将继续执行而不再等待响应,且必须使用一个事件处理函数来监控请求的响应. 如果将async设置为false,则将以同步模式发送该请求, JavaScript将等接收到响应后再继续执行剩余代码. 这意味着如果响应时间很长,则用户在浏览器收到响应之前是将无法与其交互的. 基于这个原因,Ajax应…

使用jQuery的ajax同步请求吃过的亏

jQuery是一个非经常常使用的js库.甚至我们开发不论什么一个项目都首先把jquery导入进行.jQuery太过强大,使用起来非常方便.可是在使用的过程中也遇到过非常多坑.我在这里分享一下.避免大家也遇到相同的问题束手无策,也方便以后回归学习. 普通的写法: $.ajax({ url:url, type:'POST', async:false, data:{ id:1 }, dataType:'json', timeout:666666, success:function(resultObj)…

AjaxPro实现异步调用，解决浏览器假死及超时问题

平时使用AjaxPro的时候基本上非常easy var msg = UseClass.Method(argument).value; 由于后台响应比較慢,所以加了个"loading",然后后面调用AjaxPro //载入Loading $("#load").show(); //Ajax var msg = UseClass.Method(argument).value; //隐藏载入 <pre name="code" class="…

js ajax调用请求

<pre name="code" class="html"> function getAppList(env){ var data = {}; data.env = env; var successfn = function(jdata){ $(".deploy_list").html(""); _HTML = "<tr><th>发布清单</th></tr>…

JS Ajax异步请求发送列表数据后面多了[]

还在苦逼的写代码,这里就不详细了,直接抛出问题: 如图所示: 前端ajax请求向后端发送数据的时候,给key添加了[]出现很多找不到原因, 后面在说解决方法: 暂时先这样记录一下,下次方便查找,好了我去写bug去了…

[jQuery]ajax同步请求在方法内问题

在函数内写$.ajax() 的成功函数中return 的值,并没有return到外层方法返回至…

解决js ajax跨越请求 Access control allow origin 异常

// 解决跨越请求的问题 response.setHeader("Access-Control-Allow-Origin", "*");…

JSON(五）——同步请求中使用JSON格式字符串进行交互（不太常见的用法）

在同步请求中使用JSON格式进行数据交互的场景并不多,同步请求是浏览器直接与服务器进行数据交互的大多是用jsp的标签jstl和el表达式对请求中的数据进行数据的渲染.我也是在一次开发中要从其它服务器提供的接口中调取json格式的字符串数据然后把数据渲染到本服务器的jsp页面中发现这种做法的. 当然对于从其他服务器中取得的json格式字符串数据你也可以使用异步请求的方式直接把数据返回,在前端使用js对数据进行渲染,还有就是使用json-lib或者jackson把json格式的字符串转换成javaB…

使用publisher模式控制频繁的UI输出，避免Winform界面假死

http://www.cnblogs.com/Charltsing/p/publisher.html 最近测试task并发任务的效率与线程池的区别,发现了另外一个问题.task建立任务的速度很快,输出到UI的信息过频,导致UI假死. private void TestMakeTasks(object obj) { string msg = ""; //循环创建task for (int i = 0; i < 3000; i++) { //主线程(winform)--子线程(Thr…

js ajax设置和获取自定义header信息的方法总结

目录 1.js ajax 设置自定义header 1.1 方法一: 1.2 方法二: 2.js ajax 获取请求返回的response的header信息 3.js ajax 跨域请求的情况下获取自定义的header信息 1.js ajax 设置自定义header 1.1 方法一: $.ajax({ type: "POST", url: "Handler1.ashx", contentType: "application/x-www-form-urlenc…

原生JS写Ajax的请求函数

一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应数据: 下面简单封装一个函数,之后稍作解释 ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 },…

普通B/S架构模式同步请求与AJAX异步请求区别（个人理解）

在上次面试的时候有被问到过AJAX同步与异步之间的概念问题,之前没有涉及到异步与同步的知识,所以特意脑补了一下,不是很全面... 同步请求流程:提交请求(POST/GET表单相似的提交操作)---服务器对请求进行处理(期间客户端浏览器不能进行其他任何操作)----处理完毕返回数据异步请求流程:通过事件触发请求(移除/点击事件)---服务器对请求进行处理(期间客户端浏览器可以做发送其他请求,不需要管其他请求是否有处理)---处理完毕返回数据同步就是你叫我去吃饭,我听到了就和你去吃饭:如果没有听…

详解Ajax请求（一）前言——同步请求的原理

我们知道,ajax是一种异步请求的方式,想要了解异步请求,就必须要先从同步请求说起.常见的同步请求的方式是form表单的提交,我们先从一种同步请求的示例说起. 我们希望输入姓名可以从后台得到身份证号. 那么用同步请求的方式要这么做前端代码: <form action="" id = "formId"> <input type="button" id="testBtn" value="测试按钮&qu…

JS中如何处理多个ajax并发请求？

js中的多并发处理. 通常为了减少页面加载时间,先把核心内容显示处理,页面加载完成后再发送ajax请求获取其他数据这时就可能产生多个ajax请求,为了用户体验,最好是发送并行请求,这就产生了并发问题,应该如何处理? (1)并行改串行如果业务逻辑和用户体验允许的情况下,可以改为串行,处理起来最简单 function async1(){//do sth...async2();}function async2(){//do sth...}async1(); (2)回调计数 function as…

AJAX同步设置以及请求代码

全局设置ajax同步更正一点:这个的同步,针对的是ajax请求的返回,而不是ajax-success返回后所有进行处理后才进行下一步.所以,window.location.href转跳这个在执行的时候,下面的代码依旧会执行的. <script src="/Scripts/jquery-1.10.2.min.js"></script> <button onclick="c()" style="border:1px solid…

ajax对象。同步与异步及ajax发送请求

ajax对象的属性.方法属性 readyState: Ajax状态码 * 0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法 1:表示对象已初始化,但未发送,调用了open方法,但是未调用send方法 2:已调用send方法进行请求 3:正在接收数据(接收到一部分),客户端已经接收到了一部分返回的数据 4:接收完成,客户端已经接收到了所有数据 * status :http响应状态码 200代表成功获取服务器端数据 404未找到页面等等…… statusText…

js中同步与异步请求方式

异步请求方式: $.ajax({ url : 'your url', data:{name:value}, cache : false, async : true, type : "POST", dataType : 'json/xml/html', success : function (result){ do something.... } }); 同步请求方式: $.ajax({ url : 'your url', data:{name:value}, cache : false…

原生JS代码实现一个Ajax异步请求

异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest 对象.如果不支持创建该对象的浏览器,则需要创建 ActiveXObject. var xmlHttp; function createxmlHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Micros…