前端常见面试题之ajax、http

已于 2024-01-16 17:45:40 修改
阅读量1.7k 收藏 25
点赞数 22
分类专栏： 前端面试题 文章标签： 前端 ajax http
于 2024-01-16 17:08:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jieyucx/article/details/135619752
版权
本文详细介绍了Ajax请求的手动实现，包括GET和POST方法，以及xhr对象的状态和status属性。此外，文章还涵盖了跨域问题、Cookie、localStorage和sessionStorage的区别、HTTP状态码、常用headers、RESTfulAPI的概念、HTTP缓存机制以及HTTPS的安全性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

一、手写ajax请求

1. get

        // 1.创建一个XMLHttpRequest对象
        let xhr = new XMLHttpRequest();
        // 2.设置请求行
        xhr.open('get', 'http://localhost:3000/get');
        // 3.设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // 4.设置请求体
        xhr.send(null);
        // 5.监听请求状态
        xhr.onreadystatechange = function() {
            // 6.判断请求状态
            if(xhr.readyState === 4 && xhr.status === 200) {
                // 7.获取响应体
                console.log(xhr.responseText);
            }
        }

2. post

        // 1.创建一个XMLHttpRequest对象
        let xhr = new XMLHttpRequest();
        // 2.设置请求行
        xhr.open('post', 'http://localhost:3000/post');
        // 3.设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // 4.设置请求体
        xhr.send('name=小明&age=18'); // 这里得传字符串
        // 5.监听请求状态
        xhr.onreadystatechange = function() {
            // 6.判断请求状态
            if(xhr.readyState === 4 && xhr.status === 200) {
                // 7.获取响应体
                console.log(xhr.responseText);
            }
        }

3. xhr.readyState

xhr.readyState 有以下状态值，分别代表的意思如下：

状态值意思
0未初始化，尚未调用open方法
1启动，已经调用open方法
2发送，已经调用send方法
3接收，正在接收响应数据
4完成，已经接收到全部响应数据

请注意，在这个表格中，状态值是从0开始的，0代表xhr对象已经被创建但尚未调用open方法，直到4代表请求已完成且响应数据已接收完毕。

4. xhr.status

http状态码

状态码含义说明
200OK请求成功
301Moved Permanently资源被永久移动到新的URL
302Found资源被临时移动到新的URL
400Bad Request请求有误，服务器无法处理
401Unauthorized请求需要身份验证
403Forbidden服务器拒绝该请求
404Not Found请求的资源不存在
500Internal Server Error服务器遇到错误
502Bad Gateway服务器作为网关或代理时收到无效响应
503Service Unavailable服务器暂时不可用
504Gateway Timeout服务器作为网关或代理时在等待上游服务器响应时超时

5. xhr.open

xhr.open方法有三个参数，含义如下：

  1. method：表示HTTP请求的方法，比如GET、POST等。
  2. url：表示请求的URL地址。
  3. async：表示请求是否为异步，默认为true，即异步请求。

如果第三个参数为true，则表示异步请求，即浏览器不需要等待服务器返回响应即可继续执行后面的代码。如果第三个参数为false，则表示同步请求，即浏览器需要等待服务器返回响应后才能继续执行后面的代码。

二、跨域

大家可以看看这篇什么是跨域(浏览器同源政策)，如何解决跨域

三、cookie、localStorage和sessionStorage

cookie、localStorage和sessionStorage都是用于在浏览器端存储数据的技术。它们的用途、区别和大小如下所示：

CookielocalStoragesessionStorage
用途用于在浏览器和服务器之间传递数据，包括会话管理、持久性登录状态等用于在浏览器端存储较大量的数据，包括长期保存的用户配置、个人信息等用于在浏览器端存储临时性的数据，仅在当前会话有效
存储位置存储在客户端，会自动随HTTP请求发送到服务器存储在客户端，不会自动发送到服务器存储在客户端，不会自动发送到服务器
大小限制最大可以存储4KB的数据最大可以存储5MB的数据最大可以存储5MB的数据
生命周期可设置过期时间，可以在浏览器重启后仍然存在除非被手动清除，否则会一直存在仅在当前会话有效，关闭浏览器后会被自动清除
访问限制对于每个具体的cookie，可以设置访问限制（如域名、路径等）仅对于设置localStorage的网页可访问仅对于设置sessionStorage的网页可访问
API可以使用document.cookie来读取和写入cookie可以使用localStorage对象的方法（如setItem、getItem、removeItem等）可以使用sessionStorage对象的方法（如setItem、getItem、removeItem等）

需要注意的是，每个浏览器对cookie、localStorage和sessionStorage的实现可能会有一些细微的差异，例如存储上限可能会略有不同。上述表格仅提供了一般情况下的常见规范。

四、http

1. http常见的状态码有哪些

http状态码

状态码含义说明
200OK请求成功
301Moved Permanently资源被永久移动到新的URL
302Found资源被临时移动到新的URL
400Bad Request请求有误，服务器无法处理
401Unauthorized请求需要身份验证
403Forbidden服务器拒绝该请求
404Not Found请求的资源不存在
500Internal Server Error服务器遇到错误
502Bad Gateway服务器作为网关或代理时收到无效响应
503Service Unavailable服务器暂时不可用
504Gateway Timeout服务器作为网关或代理时在等待上游服务器响应时超时

2. http常见的header有哪些

常见的HTTP请求头（Request Headers）如下所示：

Header字段说明
Accept告诉服务器可以发送的媒体类型
Accept-Charset告诉服务器请求的字符集
Accept-Encoding 告诉服务器请求的内容编码方式 gzip
Accept-Language告诉服务器请求的语言
Authorization包含用户凭证的认证信息
Cache-Control缓存机制指令
Connection管理持久连接 keep-alive
Content-Length请求体的大小
Content-Type请求体的媒体类型
Cookie之前保存的服务器发送的Cookie
Host请求的主机名或IP地址
User-Agent包含发送请求的用户代理的信息
Referer发送请求的页面的URL
Origin发起一个对跨域资源的请求

常见的HTTP响应头（Response Headers）如下所示：

Header字段说明
Accept-Ranges标识服务器是否支持范围请求
Cache-Control 缓存机制指令
Content-Encoding响应内容的编码方式 gzip
Content-Length响应的大小
Content-Type响应内容的媒体类型
Set-Cookie服务器发送的Cookie
Date响应生成的日期和时间
Etag 客户端缓存检查标识符
Server服务器标识
Last-Modified资源最后修改的时间
Location资源被重新定位的URL
Access-Control-Allow-Origin允许跨域资源共享的域
Access-Control-Allow-Headers允许的跨域请求的自定义请求头

请注意，这些是其中一些常见的HTTP头部字段，实际上还有很多其他的头部字段可以用于请求和响应。

3. 什么是RestfulAPI

RESTful API 是一种使用 HTTP 协议和标准 REST（Representational State Transfer）原则设计的 API，用于系统之间的通信。它允许客户端通过 HTTP 方法（GET、POST、PUT、DELETE）对资源进行操作，并使用 URL 定位资源。

与传统的 API 相比，RESTful API 有以下区别：

  1. 设计风格：RESTful API 遵循资源的风格，将每个资源都用一个唯一的 URI 表示，并使用合适的 HTTP 方法对其进行操作。而传统的 API 常常使用不同的 URI 和操作来表示不同的功能。
  2. 状态无关：RESTful API 是无状态的，每个请求都应该包含足够的信息来处理请求，不依赖于之前的请求或状态。传统的 API 常常依赖于会话状态。
  3. 结果表现：RESTful API 返回的结果通常是资源的表现形式，比如 JSON 或 XML 格式的数据。传统的 API 则常常返回各种包装过的数据格式。
  4. 缓存支持：RESTful API 支持缓存，可以减少网络传输和服务器负载。传统的 API 不一定具备缓存能力。
  5. 可扩展性：RESTful API 的设计使得系统易于扩展和维护，因为它使用标准的 HTTP 协议和约束。传统的 API 可能因为实现的特定细节而难以扩展。

总的来说，RESTful API 更加简单、灵活、可扩展和易于使用，适用于不同平台和系统的集成。

4. 描述一下http的缓存机制

HTTP的缓存机制是为了提高网页加载速度，减轻服务器和网络的负载。具体过程如下：

  1. 客户端发起HTTP请求时，服务器会在响应头部的Cache-Control字段或Expires字段中设置缓存策略。常见的缓存策略有：no-cache（不缓存）, no-store（不缓存和存储）, public（可公开缓存）, private（仅个人缓存）等。

  2. 客户端收到服务端的响应后，将响应内容以及缓存策略保存到本地缓存中。

  3. 客户端下一次请求相同资源时，先检查本地缓存，如果缓存有效则直接从本地缓存中读取响应内容，不再发送请求到服务器。

  4. 当缓存过期或者被标记为无效时，客户端会发送一个条件请求到服务器，其中会包含一个If-Modified-Since或者If-None-Match字段，用于告诉服务器上次缓存的响应的最后修改时间或者ETag。

  5. 服务器收到条件请求后，会根据请求中的If-Modified-Since或者If-None-Match字段与资源的最后修改时间或者ETag进行比较。如果资源没有更新，则返回状态码304 Not Modified，客户端可以继续使用本地缓存；如果资源已经更新，则返回新的响应内容。

  6. 当服务器返回新的响应内容时，客户端会将新的响应内容和缓存策略更新到本地缓存中，以备下一次使用。

需要注意的是，客户端和服务器之间的缓存是相互独立的，服务器可以通过在响应头中设置Cache-Control字段或Expires字段来控制客户端的缓存策略，而客户端也可以通过设置请求头中的Cache-Control字段来控制服务器的缓存策略。

HTTP的缓存机制可以用以下图示来描述：

                 ┌───────┐            ┌───────┐
           ┌────►│ Client│◄──────────┤ Server│
           │     └───────┘            └───────┘
           │           ↑                    │
           ├───────────┘                    │
           │                                │
           ▼                                ▼
  ┌─────────────┐               ┌───────────────────┐
  │    Cache    │               │     Origin        │
  │    Store    │◄─────►Cache-Control: max-age     │
  └─────────────┘               └───────────────────┘
           ▲                                ▲
           │                                │
           ├───────────┐                    │ Cache Miss
           │           ▼                    │
           │     ┌───────┐            ┌───────┐
           └─────│ Client│◄──────────┤ Server│
                 └───────┘            └───────┘
                   Cache Hit

在这个图示中：

  1. Client发起HTTP请求，请求会经过缓存（Cache）。
  2. 如果缓存中没有对应的资源，缓存会将请求发送给Server。
  3. Server响应请求，并在响应头中携带Cache-Control指令，例如：max-age指定缓存的有效时间。
  4. 缓存将来自Server的响应存储在Cache Store中，并将响应返回给Client。
  5. 当Client再次请求相同的资源时，请求会首先发送到缓存。
  6. 如果缓存中存在对应资源且仍在有效期内（未过期），则缓存命中，缓存将直接返回该资源给Client。
  7. 如果缓存中不存在对应资源或已过期，缓存会重新向Server发起请求，重复上述过程。

这种缓存机制可以减少对服务器的请求，提高响应速度，减轻服务器负载。

5. https

HTTPS（Hypertext Transfer Protocol Secure）是HTTP协议的安全版本，用于保护网络通信的安全性。HTTPS通过使用SSL（Secure Sockets Layer）或TLS（Transport Layer Security）协议来加密HTTP通信内容，从而防止数据被窃听、篡改或伪造。

在HTTPS通信中，客户端与服务器之间建立安全的加密通道，确保数据的隐私和完整性。它使用SSL或TLS协议进行加密，以保护数据传输过程中的机密信息，例如用户敏感数据、登录凭证、付款信息等。

HTTPS的工作原理大致如下：

  1. 客户端发起HTTPS请求时，服务器会将自己的数字证书发送给客户端。
  2. 客户端收到服务器的数字证书后，会验证证书的合法性和可信任性。若验证通过，则生成一个随机的对称密钥，并使用服务器的公钥对该密钥进行加密。
  3. 客户端将加密后的对称密钥发送给服务器。
  4. 服务器收到加密的对称密钥后，使用自己的私钥进行解密得到对称密钥。
  5. 客户端和服务器之间使用对称密钥进行加密和解密通信内容。

HTTPS可以提供以下安全保护：

  1. 数据加密：通过SSL/TLS协议将通信内容加密，防止数据被窃听。
  2. 数据完整性验证：使用数字签名保证数据的完整性，防止数据被篡改。
  3. 身份验证：通过数字证书验证服务器的身份，防止伪造的服务器进行攻击。

使用HTTPS可以有效提高网络通信的安全性，特别是在涉及敏感信息传输的场景，如在线支付、个人信息提交等。

前端面试题HTTP总结（随缘更新）
阿宇的博客
03-28 2724
平时刷面试题总结的 1.localhost 与 127.0.0.1 有什么区别 localhost 可以更改后指向其它地址。 127.0.0.1 是约定的本机 IP。 类似互联网中域名与服务器 IP 的关系。如果在浏览器访问时，当前页面的 location.hostname(host) 不同，配置代理的时候要注意 2.简述HTTPS和HTTP的区别 1.https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。 2.http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传
前端面试题之ajax
qq_45335911的博客
09-11 257
谈谈你对ajax的理解，以及用原生JS实现有哪些要点需要注意。 ajax，全称是异步JavaScript和XML，是用来和服务器进行数据交互的，让无刷新页面替换数据变成了可能。 ajax最核心的就是依赖于浏览器提供的XMLHttpRequest对象 原理就是通过XMLHttpRequest对象向服务器发出异步请求，从服务器获取数据，然后用JavaScript来操作DOM实现页面的局部刷新。 至于有哪些要点呢，来一个简短点的ajax请求： var xhr = new XMLHttpRequest() //首
前端面试宝典之Ajax篇
Corey
11-29 291
什么是 Ajax? 如何创建一个Ajax？ AJAX(Asynchronous Javascript And XML) = 异步 JavaScript + XML 在后台与服务器进行异步数据交换，不用重载整个网页，实现局部刷新。 创建 ajax 步骤： 1.创建 XMLHttpRequest 对象 2.创建一个新的 HTTP 请求，并指定该 HTTP...
前端请求全面解析：AJAX、Axios 与 Fetch 的使用详解与代码示例
最新发布
草药味儿の岁月
03-16 1052
适合了解底层原理，但代码结构较为复杂，较少在新项目中直接使用。Fetch API：语法简洁、基于 Promise，适用于现代浏览器，但需要注意对错误状态的手动处理。Axios：功能丰富、支持拦截器及更多高级特性，适合大型项目和复杂需求。根据项目需求和团队习惯，选择合适的请求方式可以大大提升开发效率和代码可维护性。希望本文的详解与代码示例能够为你在前端请求的开发实践中提供参考和帮助！快动手试试这些代码示例，体验不同请求方式带来的开发便利吧！
小猿圈WEB前端面试题之AJAX面试题
weixin_33898876的博客
05-10 258
金三银四已经过去了，你升值加薪了吗？你重新找工作了吗？你跳槽了吗？你面试的时候紧张了吗啊？你注意过面试管问你的问题了吗？小猿圈web前端讲师分享WEB前端面试题之AJAX面试题，希望对小伙伴们有所帮助。1，Ajax是什么? 如何创建一个Ajax？ajax是一种创建交互式网页的计算，ajax的全称：Asynchronous Javascript And XML。异步传输+js+xml。所谓异步，在这...
Ajax介绍以及工作原理和实现详解（JS实现Ajax 和 JQ实现Ajax）
BookSea的博客
06-21 6733
注重版权，转载请注明原作者和原文链接 作者：码农BookSea 原文链接：https://editor.youkuaiyun.com/md?articleId=106881795 1.认识Ajax Ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 Ajax 不是新的编程语言，而是一种使用现有标准的新方法。 Ajax 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下，说的简单点就是Ajax可以实现局部刷新。（如百度地.
web前端面试之ajax
qq_36987708的博客
08-18 199
ajax请求时，如何解释json数据？ 使用eval方法解析的时候，eval()：不会去判断该字符串是否合法，而且json对象里的js方法也会被执行，这是非常危险的； 推荐使用JSON.parse()； JSON.parse()：把字符串转化成json。 readyState状态码 readyState，是指运行Ajax所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为Ajax运行步骤，使用“ajax.readyState”获得。 readyState是XMLHttpRequest对象
ajax前端面试,前端面试必问之AJAX
weixin_35551554的博客
08-05 258
概述AJAX全称是 Asynchronous JavaScript and XML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新。AJAX实现在现代浏览器上写AJAX主要依靠XMLHttpRequest对象var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象request.onreadysta...
面试问题——前端之ajax
weixin_43895133的博客
03-25 171
ajax中常见的参数 url：发送请求的地址。 type: 请求方式（post或get）默认为get。 async: 同步异步请求，默认true所有请求均为异步请求。 timeout : 超时时间设置，单位毫秒。 data：要求为Object或String类型的参数，发送到服务器的数据。 cache：默认为true（当dataType为script时，默认为false）, 设置为false将不会...
前端面试知识整理——AJAX
suuuuuki98的博客
04-16 162
前端面试知识整理——AJAX 题目： 手写一个简易的AJAX 跨域的常用实现方式 知识点： XMLHttpRequest 状态码 跨域：同源策略，跨域解决方案 XMLHttpRequest 12-1
前端面试题总结(Ajax部分)
go
07-17 864
六、Ajax 1、Ajax是什么?如何创建一个 Ajax？ 2、同步和异步的区别? 3、如何解决跨域问题? 4、页面编码和被请求的资源编码如果不一致如何处理？ 5、简述 ajax 的过程。 6、阐述一下异步加载。 7、请解释一下 JavaScript 的同源策略。 8、GET 和 POST 的区别，何时使用 POST？ 9、ajax是什么?ajax的交互模型?同步和异步的区别?如何解决跨域问题? 10、 Ajax 的最大的特点是什么。 11、ajax 的缺点 12、ajax 请求的时候 get 和 post
前端面试题整理—ajax篇
aoxi9939的博客
03-18 337
1、什么是Ajax和JSON，它们的优缺点 　　Ajax是全称是asynchronous JavaScript andXML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新 　　优点：可以实现异步通信效果，页面局部刷新，带来更好的用户体验 　　JSON是一种轻量级的数据交换格式，看着像对象，本质是字符串 　　优点：轻量级、易于人的阅读和编...
AJAX是什么？
weixin_30741653的博客
03-20 128
AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 　　ajax不是新的编程语言，而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 　　ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 　　ajax是一种用于创建快速动态网页的技...
ajax相关类web前端面试题
web前端学习部落22群
02-04 2267
1. ajax的跨域问题和缓存原理？      答： 推荐：ajax处理跨域有几种方式？实现原理是什么？ 推荐：ajax缓存原理      2. 同步与异步的区别？      答： 1. 同步请求：顺序处理，即当我们向服务器发出一个请求时，在服务器没返回结果给客户端之前，我们要一直处于等待状态直至服务器将结果返回到客户端，我们才能执行下一步操作。 2. 异步请求：并行处理
前端面试大全（Ajax篇——面试官这样问，你答得上来吗？）
cai niaoyihao_的博客
05-25 2514
前端面试大全（Ajax篇）
前端ajax的问题
designpc的专栏
10-28 394
1 有时候前端ajax请求，无响应，没有进入后端 可能是参数和后端接口中的参数对不上 2 尽量将返回值设为json格式
ajax 和 http
m0_52289188的博客
11-25 976
`headers`：可选的，是即将被发送的自定义请求头，类型为 Object对象，例如：`{'Content-Type': 'Application/json'}`- `responseType`: 可选的，表示服务器响应的数据类型，可以是 'json', 'text' 等，默认值为 'json'注意，这里有很多可以做特殊处理，比如说，请求结束，成功，超时，出错，还可以设置请求头，请求数据类型。- `method`：可选的，是创建请求时使用的方法，类型为 字符串，默认值为: 'get'
前端面试之http
YanzYan的博客
08-12 450
排版可能会有点乱 后期会再整理一版 既然是http的专题，那么首先要知道什么是http？ http是超文本传输协议(hypertext transfer prototal)！是客户端和服务器端互相通信时必须遵守的协议。HTTP协议是应用层协议，底层是基于TCP协议。默认是用80端口。 tips：TCP/IP协议(协议群的统称)，计算机网络分层（五层） 应用层http - 传输层tcp/udp - 网络层IP - 数据链路层 - 物理层。可通过以下链接了解详细信息（了解即可）： https://blog.cs
Ajax与HTTP协议
weixin_52102646的博客
10-29 591
HTTP协议与PHP AJAX AJAX全称为(Asynchronous JavaScript and XML),就是异步的JS和XML。 提供AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新 获取数据。 AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML XML可扩展标记语言，被设计用来传输和存储数据 XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 现在使用JSON表示数据。 AJAX的特点
前端手写ajax
03-11
<think>好的，我现在需要帮用户解决如何用原生JavaScript手写AJAX请求的问题。首先，用户明确提到要使用Vanilla JavaScript，也就是不依赖任何框架的原生代码，所以我要确保提供的示例不涉及jQuery或其他库。 首先，我应该回忆一下XMLHttpRequest对象的基本用法，因为这是原生AJAX的核心。用户可能需要一个简单的示例，包括创建XHR对象、设置请求方法、处理响应等步骤。同时，需要注意现代浏览器的兼容性问题，比如onload和onerror事件的支持情况。 接下来，用户可能希望看到GET和POST请求的示例。对于GET，相对简单，设置open方法，然后send。POST则需要设置Content-Type头，并在send中传递数据。这部分需要详细说明，尤其是设置请求头的地方，容易出错。 然后，错误处理也是关键。XHR对象有onerror事件，但可能还需要处理HTTP状态码，比如404或500错误。所以示例中应该包含onreadystatechange的处理，检查readyState和status。 另外，用户可能对异步处理不太熟悉，需要解释onload和onreadystatechange的区别。或者，是否需要使用Promise或async/await来封装？但用户要求的是手写示例，可能保持基础写法更好，避免复杂化。 还需要注意，示例代码的格式要正确，使用代码块标注，并且注释清晰。同时，引用相关的资料，比如站内引用提到的Vanilla JavaScript在Web开发中的重要性，可以引用[^1]。 另外，用户可能想知道更现代的fetch API，但问题明确要求AJAX，也就是基于XHR的方法。不过或许可以提一下fetch作为补充，但主要展示XHR的用法。 最后，生成的相关问题需要与AJAX、原生JS相关，比如跨域问题、处理JSON数据、安全性等，这样用户可以有进一步学习的路径。</think>以下是如何使用原生JavaScript（Vanilla JavaScript）实现AJAX请求的详细说明和示例代码： ### 一、基础AJAX请求步骤 1. **创建XMLHttpRequest对象** ```javascript const xhr = new XMLHttpRequest(); ``` 2. **配置请求参数** ```javascript xhr.open('GET', 'https://api.example.com/data', true); // 第三个参数表示异步请求 ``` 3. **设置响应处理器** ```javascript xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { console.log(JSON.parse(xhr.responseText)); } else { console.error('请求失败:', xhr.statusText); } }; ``` 4. **设置错误处理器** ```javascript xhr.onerror = function() { console.error('网络错误'); }; ``` 5. **发送请求** ```javascript xhr.send(); ``` ### 二、完整示例代码 #### GET请求示例 ```javascript const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log('响应数据:', JSON.parse(xhr.responseText)); } else { console.log('错误状态码:', xhr.status); } } }; xhr.send(); ``` #### POST请求示例 ```javascript const postData = JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }); const xhr = new XMLHttpRequest(); xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts'); xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); xhr.onload = function() { if (xhr.status === 201) { console.log('创建成功:', xhr.responseText); } }; xhr.send(postData); ``` ### 三、关键参数说明 1. **readyState状态值** - 0: 请求未初始化 - 1: 服务器连接已建立 - 2: 请求已接收 - 3: 请求处理中 - 4: 请求已完成 2. **HTTP状态码处理** - 2xx: 成功（如200 OK） - 3xx: 重定向 - 4xx: 客户端错误（如404 Not Found） - 5xx: 服务端错误 ### 四、现代替代方案（补充） 虽然XMLHttpRequest仍被广泛支持，现代浏览器推荐使用`fetch API`： ```javascript fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ``` : 原生JavaScript仍然是Web开发的基础要求，特别是在理解底层机制时
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jieyucx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值