最近的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. HBase 高性能加入数据 - 按批多“粮仓”式解决办法

    摘要:如何从HBase中的海量数据中,以很快的速度的获取大批量数据,这一议题已经在<HBase 高性能获取数据>(http://www.cnblogs.com/wgp13x/p/42451 ...

  2. Linux查看BIOS信息

    http://www.linuxde.net/2013/02/12499.html

  3. hdu Flow Problem （最大流 裸题）

    最大流裸题,贴下模版 view code#include <iostream> #include <cstdio> #include <cstring> #incl ...

  4. Qt与VC编程合作起龌龊

    由于历史原因,某软件项目的界面采用QT,而后台用了VC,界面静态调用了VC生成的dll,一直以来都能够快乐的合作,然而最近出现两个小问题,觉得两者之间的合作并没有想象的那么美好. 在VC下用多媒体定时 ...

  5. 数据持久化之sqlite基本用法

    一.ACID 即原子性(Atomicity).一致性(Consistency).隔离性(Isolation).持久性(Durability). 原子性:整个事务中的所有操作,要么全部完成,要么全部不完 ...

  6. selenium如何解决window安全验证问题

    解决办法 IE浏览器: 1.使用autoit,捕捉到控件后,编写au3脚本,生成exe,然后java调用exe au3脚本 Dim $account = "username" Di ...

  7. HDU 4041 Eliminate Witches! --模拟

    题意: 给一个字符串,表示一颗树,要求你把它整理出来,节点从1开始编号,还要输出树边. 解法: 模拟即可.因为由括号,所以可以递归地求,用map存对应关系,np存ind->name的映射,每进入 ...

  8. HDU 5033 Building --离线+单调栈

    题意:给一些建筑物,x表示横坐标,h表示高度,然后查询某些坐标x,问从该点看向天空的最大张角是多大. 解法:离线操作,读入所有数据,然后按x升序排序,对每一个查询的x,先从左到右,依次添加x坐标小于x ...

  9. ZOJ 2674 Strange Limit

    欧拉函数. #include<iostream> #include<stdio.h> #include<string.h> #include<algorith ...

  10. RabbitMQ 一二事(4) - 路由模式介绍

    路由模式其实和订阅模式差不多,只不过交换机的类型不同而已 路由模式可以用下图来表示,比订阅模式多了一个key,举个栗子就是根据不同的人群来订阅公众号,来收取消息 根据不同的key来获取不同的消息 最简 ...