最近的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. DevExpress GridControl使用方法总结（转）

    一.如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 二.如何新增一条记录 (1).gridView.AddN ...

  2. 更改ubuntu下mysql的密码

    1.首先,进入环境中去,即 mysql  -u  root  -p   ,然后输入原始密码 2.此时会出现 mysql > 3.开始修改密码: mysql >   use  mysql ; ...

  3. ubuntu16.04下opencv安装笔记和例程

    问题: 最近重装了系统,需要重新配置opencv2.4.13,配置完成后每次都出现cmake error,google了报错,尝试了各种方法,都未解决问题,于是重新git clone 了opencv2 ...

  4. openresty(nginx)、lua、drizzle调研

    一.概述: 1.研究目标:nginx中使用lua脚本,及nginx直接访问mysql,redis 2.需要安装的内容: openresty,mysql,redis 3.OpenResty (也称为 n ...

  5. 嵌入式Linux应用程序开发详解------（创建守护进程）

    嵌入式Linux应用程序开发详解 华清远见 本文只是阅读文摘. 创建一个守护进程的步骤: 1.创建一个子进程,然后退出父进程: 2.在子进程中使用创建新会话---setsid(): 3.改变当前工作目 ...

  6. puppet学习笔记（一）

    之前搞了一个月zabbix,基本上是能熟练使用了,不过在后来部署的时候发现这玩意在部署的时候机子少还行,机子多了手动安装手会残的.第一反应是用puppet,后来师父直接用puppet搞定了.索性自己也 ...

  7. three Sum

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  8. [转载] vim带你装逼带你飞(一)

    前言:逃离windows有很长时间了,特别是当今android盛行的时代,我们没有理由不选择ubuntu作为编译开发android之首选.其实操作系统只是我们使用的一个工具, windows也好lin ...

  9. TableViewer使用

    1.自定义编辑器激活方式   /**     * Create a customized editor whose activation process is customized     *    ...

  10. Doctype文档类型、作用及触发方式

    Doctype文档类型 1)  该标签可声明三种 DTD 类型,分别表示严格版本.过渡版本以及基于框架的 HTML 文档. 2)  HTML 4.01 规定了三种文档类型:Strict.Transit ...