原生js XMLhttprequest请求onreadystatechange执行两次如何解决

发布时间:2023-02-24 09:50:46 作者:iii
来源:亿速云 阅读:113

这篇文章主要讲解了“原生js XMLhttprequest请求onreadystatechange执行两次如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“原生js XMLhttprequest请求onreadystatechange执行两次如何解决”吧!

原生js XMLhttprequest请求onreadychange执行两次

最近做到一个页面需要兼容IE,然后就写了一个原生 XMLhttprequest请求

直接上错误代码

xmlHttp = new XMLHttpRequest();
        xmlHttp.open("post","https://baidu.com/mianxiang/baidu/biancheng");
        xmlHttp.setRequestHeader("Content-Type","application/json");
        xmlHttp.send(XXXXXXXXXX) ;
        xmlHttp.onreadystatechange = function () {
            if(this.status==200){
                console.log("responseText",this.responseText);
            }
        };

在上面代码中,当status == 200 的console.log内容每次请求,都会在控制台打印两次,也就是说里面的逻辑会被执行两次,百度了很多都没有发现相似问题,和具体解决办法。

xmlHttp = new XMLHttpRequest();
        xmlHttp.open("post","https://baidu.com/mianxiang/baidu/biancheng");
        xmlHttp.setRequestHeader("Content-Type","application/json");
        xmlHttp.send(XXXXXXXXXX) ;
        xmlHttp.onreadystatechange = function () {
            if(xmlHttp.readyState == 4 && this.status==200){
                console.log("responseText",this.responseText);
            }
        };

最后偶然发现了和正确代码的差距,补上“ xmlHttp.readyState == 4 ”

执行一次,问题解决。

分析,可能是因为在没有添加判断readyState时,当options预请求执行时,也会有一次状态码200的,所以会被执行两次,但是疑惑点是预请求不会返回数据,但是在打印时,两次打印都是有数据的。

查资料+请教大佬 = get 知识

知识:

关于readyState不同状态总结

(0) 未初始化

此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备。

值为0表示对象已经存在,否则浏览器会报错--对象不存在。

(1) 载入

此阶段对XMLHttpRequest对象进行初始化,即调用open()方法,根据参数(method,url,true)完成对象状态的设置。

并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。

(2) 载入完成

此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。

值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。

(3) 交互

此阶段解析接收到的服务器端响应数据。

即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式,为在客户端调用作好准备。

状态3表示正在解析数据。

(4) 完成

此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。

值为4表示数据解析完毕,可以通过XMLHttpRequest对象的相应属性取得数据。

这个时候再回顾之前为何执行两次onreadystatechange, 因为当state每次变化的时候都会执行到onreadystatechange,其实是readyState每次变化都会有执行onreadystatechange,因为我判断了this.status == 200 ,所以当服务器响应了之后返回了200的状态码,才会执行console.log(),才有上面的执行两次的问题。

感谢各位的阅读,以上就是“原生js XMLhttprequest请求onreadystatechange执行两次如何解决”的内容了,经过本文的学习后,相信大家对原生js XMLhttprequest请求onreadystatechange执行两次如何解决这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. php和js怎么通过json互相传递数据
  2. 如何使用PHP和js将时间以距今多久的形式表示

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js xmlhttprequest onreadystatechange

上一篇:python中的xlwt模块如何使用

下一篇:numpy中hstack、vstack、stack和concatenate函数怎么使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》