企业官网建设流程全解析

网站模块建设方案,wordpress中文注释,深圳建设企业网站,下载中国建设银行app一、前言 在前后端分离开发模式中#xff0c;AJAX 是实现页面无刷新数据交互的核心技术#xff0c;而 XMLHttpRequest#xff08;简称 XHR#xff09;正是浏览器原生支持的 AJAX 底层 API。 相比于现代的 fetch 和 Axios#xff0c;XMLHttpRequest 兼容性更好#xff0…一、前言在前后端分离开发模式中AJAX是实现页面无刷新数据交互的核心技术而XMLHttpRequest简称XHR正是浏览器原生支持的 AJAX 底层 API。相比于现代的fetch和 AxiosXMLHttpRequest兼容性更好支持 IE 等老旧浏览器也是理解 AJAX 通信原理的基础。本文将通过GET 数据查询和POST 数据提交两个核心场景带你从零掌握XMLHttpRequest的使用方法。二、核心概念回顾1. XMLHttpRequest 作用在不刷新整个页面的情况下向服务器发送 HTTP 请求、接收响应数据并更新页面局部内容。2. 核心流程plaintext创建 XHR 实例 → 配置请求参数 → 设置请求头 → 监听状态变化 → 发送请求 → 处理响应3. 关键状态码状态码描述readyState 0未初始化实例已创建未调用open()readyState 1已打开调用open()未调用send()readyState 2已发送调用send()已接收响应头readyState 3正在接收正在加载响应体数据readyState 4请求完成响应数据已全部接收核心判断条件HTTP 响应状态码200~299表示请求成功4xx客户端错误5xx服务端错误。三、实战案例 1GET 请求查询数据GET 请求用于从服务器获取数据参数通过 URL 拼接查询字符串传递适用于数据查询、列表加载等场景。1. 完整代码html预览!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleXHR GET 请求示例/title style #result { margin-top: 20px; padding: 15px; border: 1px solid #eee; border-radius: 4px; } .success { border-color: #4CAF50; color: #388E3C; } .error { border-color: #f44336; color: #D32F2F; } /style /head body h3XMLHttpRequest GET 请求演示/h3 button onclicksendGetRequest()点击发送 GET 请求/button div idresult/div script // 发送 GET 请求的函数 function sendGetRequest() { // 1. 创建 XMLHttpRequest 实例 const xhr new XMLHttpRequest(); // 2. 配置请求参数open(method, url, async) // method: 请求方式 GET/POST // url: 请求地址使用 JSONPlaceholder 免费模拟接口 // async: 是否异步true推荐/false const url https://jsonplaceholder.typicode.com/todos/1; xhr.open(GET, url, true); // 3. 设置请求头可选GET 请求一般可省略 // 告诉服务器期望返回 JSON 格式数据 xhr.setRequestHeader(Accept, application/json); // 4. 监听请求状态变化事件 xhr.onreadystatechange function() { // 核心判断请求完成 响应成功 if (xhr.readyState XMLHttpRequest.DONE) { const resultDom document.getElementById(result); if (xhr.status 200 xhr.status 300) { // 5. 处理成功响应数据 const response JSON.parse(xhr.responseText); resultDom.className success; resultDom.innerHTML p✅ 请求成功状态码${xhr.status}/p p任务 ID${response.id}/p p任务标题${response.title}/p p任务状态${response.completed ? 已完成 : 未完成}/p ; } else { // 6. 处理失败情况 resultDom.className error; resultDom.innerHTML p❌ 请求失败状态码${xhr.status}/p p错误信息${xhr.statusText}/p ; } } }; // 7. 发送请求GET 请求 send 参数为 null 或省略 xhr.send(null); } /script /body /html2. 关键要点异步请求open()第三个参数设为true请求过程中不会阻塞页面渲染。响应解析xhr.responseText是服务器返回的文本数据需用JSON.parse()转为 JS 对象。错误处理必须同时判断readyState 4和status范围避免提前处理不完整的响应。3. 运行效果将代码保存为xhr-get.html用浏览器打开。点击按钮页面下方会显示从接口获取的任务数据成功时边框为绿色失败时为红色。四、实战案例 2POST 请求提交数据POST 请求用于向服务器提交数据参数放在请求体中安全性更高支持提交大量数据适用于表单提交、创建资源等场景。1. 完整代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleXHR POST 请求示例/title style #result { margin-top: 20px; padding: 15px; border: 1px solid #eee; border-radius: 4px; } .success { border-color: #4CAF50; color: #388E3C; } .error { border-color: #f44336; color: #D32F2F; } /style /head body h3XMLHttpRequest POST 请求演示/h3 button onclicksendPostRequest()点击发送 POST 请求/button div idresult/div script // 发送 POST 请求的函数 function sendPostRequest() { // 1. 创建 XHR 实例 const xhr new XMLHttpRequest(); // 2. 配置请求参数 const url https://jsonplaceholder.typicode.com/posts; xhr.open(POST, url, true); // 3. 设置请求头POST 请求必须配置 // 声明请求体为 JSON 格式 xhr.setRequestHeader(Content-Type, application/json; charsetutf-8); // 4. 监听状态变化 xhr.onreadystatechange function() { if (xhr.readyState XMLHttpRequest.DONE) { const resultDom document.getElementById(result); if (xhr.status 200 xhr.status 300) { const response JSON.parse(xhr.responseText); resultDom.className success; resultDom.innerHTML p✅ 请求成功状态码${xhr.status}/p p新建文章 ID${response.id}/p p文章标题${response.title}/p p文章内容${response.body}/p ; } else { resultDom.className error; resultDom.innerHTML p❌ 请求失败状态码${xhr.status}/p p错误信息${xhr.statusText}/p ; } } }; // 5. 准备请求体数据 const postData { title: XMLHttpRequest 实战教程, body: 这是一篇通过 POST 请求提交的文章, userId: 1 }; // 6. 发送请求将 JS 对象转为 JSON 字符串 xhr.send(JSON.stringify(postData)); } /script /body /html2. 关键要点请求头配置POST 请求必须设置Content-Type告诉服务器如何解析请求体application/jsonJSON 格式前后端分离首选。application/x-www-form-urlencoded表单格式如nametestage20。请求体处理需用JSON.stringify()将 JS 对象转为 JSON 字符串作为send()的参数。模拟接口JSONPlaceholder是免费的 REST API可用于测试 POST 请求会返回提交的数据 自动生成的id。五、GET vs POST 核心区别特性GETPOST用途查询数据提交数据参数位置URL 拼接请求体中数据大小受 URL 长度限制一般 2KB无限制安全性低参数暴露在 URL高参数隐藏在请求体请求头可选设置必须设置Content-Type六、常见问题与解决方案跨域请求失败原因浏览器同源策略限制。解决服务端配置 CORS跨域资源共享或使用代理服务器。JSON 解析报错原因服务器返回非 JSON 格式数据或数据格式错误。解决先打印xhr.responseText查看原始数据确认格式正确后再解析。同步请求阻塞页面原因open()第三个参数设为false。解决优先使用异步请求true避免页面卡死。七、总结本文通过两个可直接运行的案例详细讲解了XMLHttpRequest的 GET 和 POST 请求用法核心要点如下核心流程创建实例 → 配置请求 → 设置请求头 → 监听状态 → 发送请求 → 处理响应。GET 请求用于查询参数拼 URL无需设置Content-Type。POST 请求用于提交参数放请求体必须配置Content-Type。状态判断必须同时满足readyState 4和status 200~299才是请求成功。掌握XMLHttpRequest是理解 AJAX 原理的关键后续学习fetch和 Axios 会更加轻松。博主寄语如果本文对你有帮助欢迎点赞、收藏、关注你的支持是我持续创作的动力评论区交流你在使用XMLHttpRequest时遇到过哪些问题欢迎在评论区分享