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前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

面试题
HTML CSS JavaScript
jQuery Vue.js React
算法 HTTP Babel
BootStrap Electron Gulp
Node.js 前端经验相关 前端综合
Webpack 微信小程序 -

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


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>