最近的PC项目遇到了一个问题，日志记录程序会在1s内多次发起对首页的请求，一时间没有找到原因。

简单描述一下问题：访问一个首页的时候，由于代码质量不高的原因，访问就连接数据库，但是同时存在的问题是一秒了多次发起了对首页的请求，请求中包含/favicon.ico（如此能不能判断是浏览器发起的呢？），也就导致了数据库出现很多连接，到此引起的连锁反应就是服务器内存占用飙升，接着就是卡卡卡……

由于能力不足的原因，一时间排查不出问题的原因，找不到很好的解决方案，找到了一个临时的方案“生成静态首页”。不过后期查看日志，在index.html存在的情况下，还是会出现请求404的问题（无解）。

生成静态首页也很愉快，于是很快就把补丁给打上去了，相反也就遇到了今天的问题，在此予以记录。

愉快的模拟了一个场景：

html代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>jquery-ajax-async</title>

</head>

<body>

	<button id="testAsync">测试</button>

	<script src="script.js"></script>

	<script>

	$("#testAsync").bind("click", function() {

		$.ajax({

			url:"http://demo.pushself.com/index.php",

			success:function(d){

				if(d.result=="OK"){

					alert("生成成功！");

				}

			},

			//async:false,

			dataType:"json"

		});

		console.log(this);

	});

	</script>

</body>

</html>

php代码

<?php

	sleep(3);

	echo json_encode(array('result'=>'OK'));

?>

在注释async: false 的时候，async的默认值是true，连续点击3次测试

IE：连续输出3次<button id="testAsync">测试</button>，3秒后连续弹出3次生成成功

非IE：连续输出3次<button id="testAsync">测试</button>，3秒后依次弹出3次生成成功

如图：

在取消注释async: false 后，连续点击3次测试

IE：3秒后弹出1次生成成功，输出1次<button id="testAsync">测试</button>

非IE：3秒后依次弹出3次生成成功，输出3次<button id="testAsync">测试</button>，而且会提示：Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

如图：

如图：

看到上面的结果，暂且不说alert的事情。异步情况下，IE与非IE浏览器处理的方式是一样的。同步的时候，IE是单线程的，非IE却不是单线程处理。非IE会出现提示ajax同步请求在主线程中不利于用户体验，被弃用了，可见用户体验的重要性。

最后还是需要换取另外的方式来阻止用户多次点击:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>jquery-ajax-async</title>

</head>

<body>

	<button id="testAsync">测试</button>

	<script src="script.js"></script>

	<script>

	var testAsyncEle = $("#testAsync"),

		createIndex = function() {

			testAsyncEle.unbind();

			$.ajax({

				url:"http://demo.pushself.com/index.php",

				success:function(d){

					if(d.result=="OK"){

						alert("生成成功！");

						testAsyncEle.bind("click", createIndex);

					}

				},

				//async:false,

				dataType:"json"

			});

			console.log(this);

		};

	testAsyncEle.bind("click", createIndex);

	</script>

</body>

</html>

jquery-ajax-async之浏览器差异的更多相关文章

  1. jQuery ajax在IE浏览器的跨域问题--jquery.xdomainrequest.min.js

    jquery.ajax 加载数据, chrome, firefox, IE10+ 都可以顺利加载数据,但是IE9及以后版本不执,通过执行 jquery.ajax error 函数显示未执行 拒绝访问. ...

  2. jQuery ajax async

    jQuery 同步调用: jQuery.ajax({ type:'POST', async: false, url:'qcTask/add', contentType:'application/jso ...

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

    今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到ajax的同步请求了,当时喀喀喀三下五除二写玩了,大概代码如下: /** * 异步当前用户 ...

  4. [jQuery]ajax请求导致浏览器崩溃

    $("#xxx").val() not $("#xxx") 如果忘记加上.val()会导致chrome崩溃

  5. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  6. jquery的$.ajax async使用详解

      async在jquery ajax中是一个同步参数了,我们下面来给大家介绍在jquery ajax中使用async时碰到的一些问题与方法介绍,希望例子能给各位同学带来一些帮助哦.   async默 ...

  7. jQuery ajax 当async为false时解决同步操作失败的问题

    jQuery的ajax,当async为false时,同步操作失败.解决方案,jqueryasync 最近做项目遇到jQuery的ajax,当async为false时,同步操作失败的问题,上网搜索下,得 ...

  8. jquery ajax属性async(同步异步)示例

    在jquery的ajax中如果我们希望实现同步或者异步我们可以直接设置async发生为真或假即可true false,下面举几个jquery ajax同步和异步实例 例1.jquery+ajax/&q ...

  9. JQ,JQuery的ajax卡住了,浏览器页面卡住

    在使用ajax的时候浏览器卡住了, 经过测试是因为在ajax中使用的data数据变量写错了 不存在也不报错,直接卡主了 好好检查一下吧.

  10. jQuery Ajax使用实例

    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script> <scr ...

随机推荐

  1. 魔改——MFC SDI程序 转换为 MDI程序

    ==================================声明================================== 本文原创,转载在正文中显要的注明作者和出处,并保证文章的完 ...

  2. CSS中vw和vh单位的使用

    vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%: vh——viewpoint height,视窗高度,1vh等于视窗高度的1%:例子:http://tutorialzine ...

  3. 如何解决分布式系统数据事务一致性问题（HBase加Solr）

    如何解决分布式系统数据事务一致性问题 (HBase加Solr) 摘要:对于所有的分布式系统,我想事务一致性问题是极其非常重要的问题,因为它直接影响到系统的可用性.本文以下所述所要解决的问题是:对于入H ...

  4. python lambda表达式简单用法

    习条件运算时,对于简单的 if else 语句,可以使用三元运算来表示,即: 1 2 3 4 5 6 7 8 # 普通条件语句 if 1 == 1:     name = 'wupeiqi' else ...

  5. 17110 Divisible（basic）

    17110 Divisible 时间限制:1000MS  内存限制:65535K 题型: 编程题   语言: 无限制 Description Given n + m integers, I1,I2,. ...

  6. Android中手机号、车牌号正则表达式

    手机号 手机号的号段说明转载自:国内手机号码的正则表达式|蜗牛的积累 手机名称有GSM:表示只支持中国联通或者中国移动2G号段(130.131.132.134.135.136.137.138.139. ...

  7. C自学笔记-递归与迭代的使用方法笔记与两者的使用场合

    递归和迭代在刚开始学C语言的时候就学过,但是不知道怎么使用.今天遇到一个题目分析过后 我瞬间想起来之前学过递归的方法,做完题后顺便翻了翻书整理了这个笔记.题目大概是这样的. 题目:猴子吃桃问题:猴子第 ...

  8. UESTC 884 方老师的专题讲座 --数位DP

    定义:cnt[L][K]表示长度为L,最高位为K的满足条件C的个数. 首先预处理出cnt数组,枚举当前长度最高位和小一个长度的最高位,如果相差大于2则前一个加上后一个的方法数. 然后给定n,计算[1, ...

  9. java 15-1 Collection集合的概述以及小功能介绍

     集合的由来:  我们学习的是面向对象语言,而面向对象语言对事物的描述是通过对象体现的,为了方便对多个对象进行操作,我们就必须把这多个对象进行存储.  而要想存储多个对象,就不能是一个基本的变量,而应 ...

  10. 获取元素在浏览器中的绝对位置（从jquery1.8中抠出来）

    <style> html,body{margin:0;padding:0;} .d1{margin-left:40px;background:red;width:2000px;height ...