今天动手写Ajax时遇到的问题:按照下面的顺序来写Ajax,功能是alert出txt文档的内容,在Chrome下可以执行onreadystatechange中的事件,在IE11及以下、FF就不能执行onreadystatechange中的代码。

ajax:
1.创建Ajax对象  ——new XMLHttpRequest;/ new ActiveXObject('Microsoft.XMLHTTP');
2.连接到服务器 ——open
3.发送请求 ——send
4.接收返回值 ——onreadystatechange

解决:将onreadystatechange代码块放到open之前,即可在Chrome、IE11及以下、FF完成功能。

为了弄清楚原因以及查看这样对Ajax的影响,添加了一些alert readyState,js代码如下,html中就是写一个"id=btn1"的按钮,open中的文件自行替换:

可以发现onreadystatechange在Chrome和FF中是当状态更改时才执行,在IE11不同版本以后则是顺序有些不同,感兴趣的小伙伴可以跟着查看一下,将onreadystatechange提到open前之后,就全靠函数内的if判断状态来控制http状态码不同情况要做的事情了;

以上提及的浏览器最后都能完成功能解析txt并弹出,而一般开发过程中是关注状态ready State=4的情况就可以,所以可以忽略这些差异。(另外问了其他开发,这样会不会造成资源浪费,大概意思是一般只关注4的,readyState从0到4有限可以忽略)

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    
    oBtn.onclick = function(){
        if(window.XMLHttpRequest){
            var oAjax = new XMLHttpRequest();
        }
        else{
            var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
        };
        alert('创建对象后:'+oAjax.readyState);
        
        oAjax.onreadystatechange = function(){
            alert('enter onreadystatechange'+oAjax.readyState);
            if(oAjax.readyState==4){
                if(oAjax.status==200){
                    alert(oAjax.responseText);
                }
                else{
                    alert('status!=200:'+oAjax.readyState);
                };
            };
        };
        
        oAjax.open('GET', 'readmee.txt', true);
        alert('连接服务器后:'+oAjax.readyState);
        
        oAjax.send();
        alert('发送请求后'+oAjax.readyState);
    };
}
查看《JavaScript高级程序设计(第3版)》中关于onreadystatechange相关的内容,但没找到出问题的原因。

原文链接:https://blog.csdn.net/LongtengGensSupreme/article/details/84062739

Ajax中onreadystatechange函数不执行,是因为放在open()后的更多相关文章

  1. AJAX中success函数的执行顺序

    1,问题,在上图中,数据传输正常,但是一直输出为空的p,再输出66, 2,原因,默认开启了异步加载, 3,解决方法,开启同步,或者在success中添加函数.

  2. $.getJSON('url',function(data){}) 中回调函数不执行

    $.getJSON('url',function(data){}) 中回调函数不执行 url 中的 json 格式不正确 ,浏览器返回并没有报错 {'湖北':[114.11438,30.849429] ...

  3. (转)在网页中JS函数自动执行常用三种方法

    原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...

  4. 在网页中JS函数自动执行常用三种方法

    在网页中JS函数自动执行常用三种方法 在HTML中的Head区域中,有如下函数: <SCRIPT   LANGUAGE="JavaScript">   function ...

  5. ajax中的post方法中回调函数不执行的问题

    前一段时间接触了JQuery Ajax中的.post()方法和.get()方法,感觉到ajax的简洁和强大,当用到.post()方法时,去W3上查找相关的使用方法,感觉十分简单,用法很明了,然后,直接 ...

  6. Unity3D中默认函数的执行顺序

    直接用一张图来说明各个默认函数的执行顺序: FixedUpdate以固定的物理时间间隔被调用,不受游戏帧率影响.一个游戏帧可能会调用多次FixedUpdate.比如处理Rigidbody的时候最好用F ...

  7. python中的函数的执行分类

    author:headsen  chen date: 2018-03-21  17:42:13 notice:This  article created by headsen chen himself ...

  8. android view 中各函数的执行顺数

    这个就好像是 activity 的生命周期一样,如果我们要使用自定义的 view,那么就很有必要了解一下 view 的那些能够被重写的函数的执行顺序.废话不多讲,以常用的5个函数为例子,见下文: pa ...

  9. Linux中Main函数的执行过程

    1. 问题:Linux如何执行main函数. 本文使用一个简单的C程序(simple.c)作为例子讲解.代码如下, int main() { return(0); } 2.  编译 -#gcc -o ...

随机推荐

  1. 代码管理工具:使用github和git工具管理自己的代码

    一.git工具和账户创建 1.1 安装 Git 是 Linus Torvalds 最近实现的源代码管理软件."Git 是一个快速.可扩展的分布式版本控制系统,它具有极为丰富的命令集,对内部系 ...

  2. JavaScript 小工具

    1. 字符串格式化输出 支持形如: Orders of {1} or more {0}' {0},{1}代表第几个参数,包含了完善的异常处理.当给定参数少于格式化串中占位符个数时,未找到的直接留白. ...

  3. Java基础_0311: 数据表与简单Java类映射

    数据表与简单Java类映射 现在假设有如下的关系表,现在要求实现如下的数据关联操作: 一个部门有多个雇员: 一个雇员有一个或零个领导 代码实现 class Dept { private int dep ...

  4. keepalived高可用系列~ keepalived+proxysql

    一 简介:介绍下高可用通用的方案 二 目的:一个中间件提供服务,故障后,另一个中间件提供服务 三 手段: 应用keepalived的vrrp_scripts服务 四 具体配置 global_defs ...

  5. Javascript - ExtJs - TabPanel组件

    示例 Ext.create('Ext.tab.Panel', {     width: "100%",     renderTo: "tabBox",      ...

  6. v2v-VMware/VSphere中虚机离线迁移至openstack平台

    先决条件 exsi到openstack的迁移,分为两种,一种是静态迁移,另一种是在线迁移. 静态迁移(offline migration)也叫做常规迁移,离线迁移.在迁移之前将虚拟机暂停,同时拷贝虚拟 ...

  7. python答题辅助

    最近直播答题app很热门,由于之前看过跳一跳的python脚本(非常棒),于是也想写一个答题的脚本. https://github.com/huanmsf/cai 思路: 1.截图 2.文字识别,提取 ...

  8. NOIP2018 20天训练

    Day 0 2018.10.20 其实写的时候已经是Day 1了--(凌晨两点) 终于停课了,爽啊 get树状数组+线段树(延迟标记) 洛谷:提高组所有nlogn模板+每日一道搜索题(基本的图的遍历题 ...

  9. 【转】Python基础-封装与扩展、静态方法和类方法

    [转]Python基础-封装与扩展.静态方法和类方法 一.封装与扩展 封装在于明确区分内外,使得类实现者可以修改封装内的东西而不影响外部调用者的代码:而外部使用者只知道一个接口(函数),只要接口(函数 ...

  10. Pytorch tutorial 之Datar Loading and Processing (1)

    引自Pytorch tutorial: Data Loading and Processing Tutorial 这节主要介绍数据的读入与处理. 数据描述:人脸姿态数据集.共有69张人脸,每张人脸都有 ...