阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript XMLHttpRequest是什么、怎样完整地执行一次GET请求、怎样检测错误

      问题

      JavaScript XMLHttpRequest是什么、怎样完整地执行一次GET请求、怎样检测错误

      答案

      XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。

       所以我们先从XMLHttpRequest讲起,来看看它的工作原理。

      XMLHttpRequest 属性

      它的属性有:

      • onreadystatechange 每次状态改变所触发事件的事件处理程序。

      • responseText 从服务器进程返回数据的字符串形式。

      • responseXML 从服务器进程返回的DOM兼容的文档数据对象。

      • status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)

      • status Text 伴随状态码的字符串信息

      • readyState 对象状态值

        • 0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)

        • 1 (初始化) 对象已建立,尚未调用send方法

        • 2 (发送数据) send方法已调用,但是当前的状态及http头未知

        • 3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,

        • 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据 但是,由于各浏览器之间存在差异,所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest

      var xmlhttp;
      function loadXMLDoc (url) {
        xmlhttp = null;
        if (windows.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
          //For IE5 IE6
          xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
      
        if (xmlhttp != null) {
          xmlhttp.onreadystatechange = stateChange;
          xmlhttp.open("GET", url, true)
          xmlhttp.send(null);
        } else {
          alert("不支持XMLHTTP")
        }
      }
      
      function stateChange () {
        // 4 'load'
        if (xmlhttp.readState == 4) {
          // 200 'load'
          if (xmlhttp.status == 200) {
            //...
          } else {
            alert("problem retrieving XML data")
          }
        }
      }
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录