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

目录
  • 原生js XMLhttprequest请求onreadychange执行两次
  • 关于readyState不同状态总结
    • (0) 未初始化
    • (1) 载入
    • (2) 载入完成
    • (3) 交互
    • (4) 完成
  • 总结

原生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 知识

知识：

  • 创建xmlhttprequest对象之后没有调用open之前readystate值为0，调用open()之后就变为1了，并且此时onreadystatechange函数与open()几乎是同时执行的。
  • 在之后调用send方法之后，在startHttpRequest函数中readystate值仍为1，而调用send方法之后应该有2，3，4三个状态，而只有在startHttpRequest函数用alert语句才可以观察到3个值！
  • 这是为什么呢？这是因为在startHttpRequest函数中当解析到send这一句时，并没有真正开始执行send执行。
  • 只有send执行，才可以在onreadystatechange函数观察到状态值的变化。
  • readystate不是发送的状态，它是准备发送的状态，要把它想像成“人间大炮一级准备、二级准备、放”这样的口号，不是请求发送本身。
  • 同时xmlhttp也不是监听服务器信息，它是在send的时候获取服务器返回的状态信息而已，只有一次，监听则是一直在观察状态。

关于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()，才有上面的执行两次的问题。

至此问题解决！！！

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS XMLHttpRequest原理与使用方法深入详解

    本文实例讲述了JS XMLHttpRequest原理与使用方法.分享给大家供大家参考,具体如下: 你真的会使用XMLHttpRequest吗? 看到标题时,有些同学可能会想:"我已经用xhr成功地发过很多个Ajax请求了,对它的基本操作已经算挺熟练了." 我之前的想法和你们一样,直到最近我使用xhr时踩了不少坑儿,我才突然发现其实自己并不够了解xhr,我知道的只是最最基本的使用. 于是我决定好好地研究一番xhr的真面目,可拜读了不少博客后都不甚满意,于是我决定认真阅读一遍W3C的XML

  • XMLHttpRequest对象_Ajax异步请求重点(推荐)

    一.XMLHttpRequest对象 1.Ajax能够是实现异步传输,所依赖的就是JavaScript中的XMLHttpRequest 2.XMLHttpRequest对象是XMLHttp组件的对象,它是一个抽象对象,允许脚本从服务器获取返回的eXML数据或将数据发送到服务器端 3.XMLHttpRequest可以实现客户端与服务器只进行数据层面的交互,不必每次刷新页面 4.XMLHttpRequest最早在Microsoft Internet Explorer5.0中作为一个ActiveX控件

  • JavaScript下通过的XMLHttpRequest发送请求的代码

    使用XMLHttpRequest对象分为4部完成: 1.创建XMLHttpRequest组建 2.设置回调函数 3.初始化XMLHttpRequest组建 4.发送请求 实例代码: 复制代码 代码如下: var userName; var passWord; var xmlHttpRequest; //XmlHttpRequest对象 function createXmlHttpRequest(){ if(window.ActiveXObject){ //如果是IE浏览器 return new

  • 原生js更改css样式的两种方式

    原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  "的方式直接更改CSS样式. 2. 先在CSS样式表中对特定的类如"active类"设置样式(这里的active类是假定的,暂时不存在),然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设

  • jquery trigger函数执行两次的解决方法

    jquery trigger函数执行两次的解决方法

    本文实例讲述了jquery trigger函数执行两次的解决方法.分享给大家供大家参考,具体如下: 一.问题如下: 有如下代码: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> *{margin:0;pa

  • DOM操作原生js 的bug,使用jQuery 可以消除的解决方法

    js的 bug 类型:  Uncaught TypeError:Cannot set/read property 'xxx' of null 在进行DOM操作的时候比较容易发生这个错误,比如: 1.  document.getElementById('test1').style.display='none' 2.  document.getElementById('test1').onclick=function(){/*相关代码*/} 假如DOM中无此 test1对象,将会抛出上面的错误,发生

  • 原生JS发送异步数据请求

    在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到原生JS进行异步数据请求.这时候无非有两种请求方式,一种是AJAX,另一个是JSONP.通过原生JS对异步请求进行简单的封装. AJAX AJAX是一种数据请求方式,不需要刷新整个页面就能够更新局部页面的数据.AJAX的技术核心是XMLHttpRequest对象,主要请求过程如下: 创建XMLHttpRequest对象(new) 连接服务器(open) 发送请求(send) 接收响应数据(onreadystat

  • 原生js jquery ajax请求以及jsonp的调用方法

    ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待 异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高 ajax的语言载体是JavaScript,最大的特点是页面不刷新 1.获取ajax对象 主流浏览器获取方式:火狐.谷歌.

  • 原生js实现ajax请求和JSONP跨域请求操作示例

    本文实例讲述了原生js实现ajax请求和JSONP跨域请求.分享给大家供大家参考,具体如下: 直接上代码: const ajax = (params = {}) => { const nowJson = params.jsonp ? jsonp(params) : json(params); function jsonp(params){ //创建script标签并加入到页面中 var callbackName = params.jsonp; var head = document.getEle

  • vue网络请求方案原生网络请求和js网络请求库

    vue网络请求方案原生网络请求和js网络请求库

    一. 原生网络请求 1. XMLHttpRequest(w3c标准)    // 没有promise时的产物 当时的万物皆回调,太麻烦 2. Fetch    // html5提供的对象,基于promise 因为promise的存在,为了简化网络请求. 使用 Fetch - Web API 接口参考 | MDN Fetch是新的ajax解决方案 Fetch会返回Promise对象.fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象. 参数: 1.第一个参数

  • 原生js 封装get ,post, delete 请求的实例

    现在的项目中都在用VUE 以及react 等MVC, MVVM  框架. 丢弃了原始的JQ .不可能为了个$.ajax();而把JQ引进来吧. 在vue1的开发中 提供了 vueResouce, vue2 出来后明确提出了不在更新vueResouce 而提供axios 的方法. 在react 的开发中提供fetch 封装的方法.等等.但在工作与后台的交互中基本都是form表单的形式.于是自己封装了个 POST,GET,DELETE 的请求方式.当然根据不同的公司,不同的方式.都可以自己扩展.目前

  • 原生 JS Ajax,GET和POST 请求实例代码

    javascript/js的ajax的GET请求代码如下所示: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();

  • 原生JS写Ajax的请求函数功能

    一般我们写网页的时候,如果用到 Ajax 请求服务器,都是使用 JQuery 等已经封装好的库来调用,比较简单. 但是一般这些库的功能很多,引入了太多我们用不到的东西,如果我们需要写一个功能单一,简单的页面,完全用不到引用如此庞大的库文件. 我们可以简单实现一个自己的 Ajax 请求功能,具体的代码如下: var ajax = {}; ajax.x = function () { if (typeof XMLHttpRequest !== 'undefined') { return new XM

随机推荐

其他