XMLHttpRequest工作原理是什么？W3示例代码本地运行无输出如何解决？

一、本地运行无输出的原因及解决方法 #

核心原因 #

直接在本地用file://协议打开HTML文件时，浏览器的同源安全策略会禁止XMLHttpRequest请求本地的XML文件，哪怕两个文件存放在同一文件夹也会被拦截。W3Schools的示例运行在他们的HTTP服务器上，走的是http/https协议，符合同源策略要求所以能正常运行。

解决方法 #

• 给本地项目启动一个静态HTTP服务即可，最简便的是在VS Code中安装Live Server插件，安装完成后右键你的HTML文件，选择「Open with Live Server」，就会自动在本地启动服务并打开页面，此时请求XML文件就不会被拦截。
• 额外排查点：确认cd_catalog.xml文件和HTML文件放在同一级目录，文件名大小写、拼写完全匹配，且XML文件本身没有语法格式错误。

二、XMLHttpRequest（XHR）工作原理 #

XMLHttpRequest是浏览器原生提供的API，用于在不刷新整个页面的前提下，和服务器异步交换数据，是AJAX技术的核心实现。
它的完整工作流程和你代码的对应关系如下：

1. 实例化XHR对象
   代码里var xmlhttp = new XMLHttpRequest(); 就是创建一个新的XHR请求实例，后续所有请求相关的操作都基于这个实例完成。
2. 绑定状态变化监听回调
   xmlhttp.onreadystatechange 是XHR的状态变化事件，只要请求的readyState属性发生变化，就会触发绑定的回调函数。
   readyState有5个取值，代表请求的不同阶段：

• 0：未初始化，XHR实例创建完成，还没调用open()方法
• 1：启动，已调用open()方法，还没调用send()方法
• 2：发送，已调用send()方法，还没收到服务器返回的响应
• 3：接收中，已经收到部分响应数据
• 4：完成，全部响应数据接收完毕，可以对返回内容进行处理
  你代码里判断this.readyState == 4 && this.status == 200 就是等请求完全完成，且HTTP状态码为200（代表请求成功）时，才处理返回的XML内容。status对应HTTP请求的状态码，常见的还有404（资源不存在）、500（服务器内部错误）等。

3. 配置请求参数
   xmlhttp.open("GET", "cd_catalog.xml", true); 是配置请求的核心参数，三个参数分别对应：

• 第一个：HTTP请求方法，常用的有GET、POST等
• 第二个：请求的目标资源地址
• 第三个：是否异步执行，填true为异步（不会阻塞页面其他交互，是主流用法），填false为同步，会卡住页面直到请求完成。

4. 发送请求
   xmlhttp.send(); 就是正式把配置好的请求发送到服务器。
5. 处理响应结果
   请求成功后，你代码里通过xml.responseXML拿到浏览器自动解析好的XML DOM对象，就可以用普通DOM操作方法（比如getElementsByTagName）提取里面的节点内容，最后插入到页面的demo元素里展示。

快速排查技巧 #

如果调整后还是没有输出，可以在onreadystatechange回调里加一行console.log(this.readyState, this.status)，打开浏览器控制台看打印的数值：

• 如果readyState到了4但status是404，说明XML文件路径不对
• 如果status是0，说明还是跨域问题，检查是不是用了file协议打开页面

内容的提问来源于stack exchange，提问作者user15882535