在使用ajax的时候要注意，在只定义了一个ajax请求对象的全局变量时，如果同打开发送了一个请求，但在请求还未结束时，又利用这一个全局变量发送另外一个ajax请求，就会出现某一个请求的状态码为canceled的情况。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>使用ajax出错</title>

</head>

<body>

    <button id="sendRequest">

        发送请求

    </button>

    <script>

        var xmlhttp;

        if (window.XMLHttpRequest) {

            xmlhttp=new XMLHttpRequest();

        } else {

            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

        }

        document.getElementById("sendRequest").onclick = function () {

            xmlhttp.onreadystatechange = null;

            xmlhttp.open("GET", "www.baidu.com", true);

            xmlhttp.send(null);

			// 这里发送了第二个请求

            xmlhttp.onreadystatechange = null;

            xmlhttp.open("GET", "www.taobao.com", true);

            xmlhttp.send(null);

        }

    </script>

</body>

</html>

最终会导致如下的结果：



可以看到，最初的请求被取消了，至于第二个请求是404，这与主题无关，状态是404，说明是请求成功了，有返回值。

这种情况在js文件特别大时比较难被发现，尤其是在页面加载完后进行的某些ajax页面初始化操作。

避免出现这种问题，可以在发送请求时，单独new一个对象来完成请求工作。但是也要考虑占用内存过多的问题，在请求完成后要及时地释放掉无用的资源。

使用ajax出现canceled情况的更多相关文章

  1. ie ajax 跨域情况遇到的各种问题

    jQuery.support.cors = true; http://blog.csdn.net/jupiter37/article/details/25694289 jQuery ajax跨域调用出 ...

  2. [jquery-ajax] jquery ajax 三种情况对比

    <button class="btn1">async:false</button> <button class="btn2"> ...

  3. ajax请求cookie有效性问题验证

    与人讨论时遇到一个问题,就是: 浏览器中后台发起的一个异步ajax请求,服务器做响应时,附带了cookie信息,那么后续对同域名下其他页面请求时,该cookie是否有效,会一并随请求提交到web服务器 ...

  4. 【温故而知新-Javascript】使用 Ajax

    Ajax 是现代Web 应用程序开发的一项关键工具.它让你能向服务器异步发送和接收数据,然后用 Javascript 解析. Ajax 是 Asynchronous JavaScript and XM ...

  5. JavaScript基础---AJAX

    内容提纲: 1.XMLHttpRequest 2.GET与POST 3.封装Ajax  发文不易,转载请注明链接出处,谢谢! 2005年Jesse James Garrett发表了一篇文章,标题为:“ ...

  6. 10.MVC框架开发（Ajax应用）

    1.MVC自带的Ajax应用, 使用步骤: 第一步,引入js框架 <script src="../../Scripts/jquery-1.4.4.js" type=" ...

  7. 纯Html+Ajax和JSP两者对比的个人理解

    最近写个人web,用jsp+servlet做,突然想到一个问题:html+ajax似乎和jsp实现效果一样:那么,两者到底有什么区别呢? 这里参考老猿的一段话: 全站ajax会维护大量的js代码,如何 ...

  8. JavaScrpit中异步请求Ajax实现

    在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面. 一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只因为需 ...

  9. 关于ajax的content-download时间过慢问题的解决方案与思考

    前言:   做前端架构很久很久了,经常到我这里都是些棘手的问题,之前没有养成很好的记录问题的习惯,以后会努力成文,积累. 于是今天就有个这篇文章.关于ajax的content-download时间过慢 ...

随机推荐

  1. TS数据流PAT和PMT分析（转载）

    转自:http://www.cnblogs.com/hjj801006/p/3837435.html TS流,是基于packet的位流格式,每个packet是188个字节或者204个字 节(一般是18 ...

  2. Android buffer_handle_t的定义（转载）

    转自:http://www.cnblogs.com/eustoma/archive/2012/06/08/2541416.html 1. buffer_handle_t 文件位置:system\cor ...

  3. bzoj 3784: 树上的路径【点分治+st表+堆】

    参考:https://www.cnblogs.com/CQzhangyu/p/7071477.html 神奇的点分治序(或者叫点剖?).就是把点分治扫过的点依次放进队列里,然后发现,对于每一棵树摊到序 ...

  4. [Usaco2003 Open]Lost Cows

    Description N (2 <= N <= 8,000) cows have unique brands in the range 1..N. In a spectacular di ...

  5. 链表中用标兵结点简化代码 分类： c/c++ 2014-09-29 23:10 475人阅读 评论(0) 收藏

    标兵结点(头结点)是在链表中的第一个结点,不存放数据,仅仅是个标记 利用标兵结点可以简化代码.下面实现双向链表中的按值删除元素的函数,分别实现 带标兵结点和不带标兵结点两版本,对比可见标兵结点的好处. ...

  6. .NET框架概述

    .NET战略目标: 任何时候(when),任何地方(where),使用任何工具(what)都能通过.NET的服务获得网络上的任何信息. .NET优势: 1.提供了一个面向对象的编程环境,完全支持面向对 ...

  7. js拿到焦点所在的标签对象

    通过 document.activeElement 此时是js对象,如果要调用jQuery的API那么就转换成jquery对象 $(document.activeElement)

  8. 【Java】包装类型

    Java中的基本类型功能简单,不具备对象的特性,为了使基本类型具备对象的特性,所以出现了包装类,就可以像操作对象一样操作基本类型数据. 一.基本类型对应的包装类 基本类型                ...

  9. [BZOJ1798][AHOI2009]Seq维护序列 线段树

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1798 一眼看过去线段树,事实上就是线段树.对于乘和加的两个标记,我们可以规定一个顺序,比如 ...

  10. Spark学习之Spark调优与调试（7）

    Spark学习之Spark调优与调试(7) 1. 对Spark进行调优与调试通常需要修改Spark应用运行时配置的选项. 当创建一个SparkContext时就会创建一个SparkConf实例. 2. ...