最近的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. 读书笔记——Windows环境下32位汇编语言程序设计（9）ANSII字符大小写转大写

    在罗云彬的<Windows环境下32位汇编语言程序设计>中第321页 ... .const szAllowedChar db '0123456789ABCDEFabcdef',08h .. ...

  2. 谈谈Java的集合组件

    让我们一起谈谈Java的集合组件 我们在使用Java的时候,都会遇到并使用到Java的集合.在这里通过自己的理解和网上的资源对Java的集合方面的使用做一个简单的讲解和总结. Java主要分为3个集合 ...

  3. 修改Tomcat服务器的端口号

    关键技术: Connector子元素下的port是设置服务器端口,而connection Timeout则是服务器连接超时单位为毫秒. 操作过程: (1)采用记事本打开Tomcat安装目录下的conf ...

  4. 烂泥：SQL Server 2005数据库备份与恢复

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 服务器的迁移,因为业务使用的数据库是SQL Server 2005,所以就要首先对数据库进行备份. 备份可以分为手动备份和自动备份,我们先来介绍手动备份 ...

  5. poj 3667 Hotel(线段树，区间合并)

    Hotel Time Limit: 3000MSMemory Limit: 65536K Total Submissions: 10858Accepted: 4691 Description The ...

  6. JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)

    在Firefox,chrome,opera,safari,ie9,ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法. JSON.stringify(obj)将JSO ...

  7. linux --备份oracle

    1.exp\imp 导入导出命令使用exp username/pwd@sid file=path.dmp owner=user 不导出表数据:rows=n举例:exp iflashbuy/qwerwh ...

  8. android窗口泄漏,isInEditMode解决可视化编辑器无法识别自定义控件的问题

    android窗口泄漏 在做项目是遇到这个错误:google:WindowManager: Activity has leaked window. 产 生原因:我们知道Android的每一个Activ ...

  9. mysqli常用错误处理函数

    mysqli扩展库包含三个类库,分别是mysqli连接库,mysqli_result处理结果集库和预处理库: 当使用select语句返回的结果集就是mysqli_result类库的对象,所以就可以用这 ...

  10. 自定义WPF ListBox的选中项样式

    首先介绍一种简单地方法:就是通过自定义SystemColors类的参数来自定义WPF ListBox选择颜色的,SystemColors的HighlightBrushKey和HighlightText ...