AJAX的请求操作

最新推荐文章于 2025-06-14 20:41:11 发布
最新推荐文章于 2025-06-14 20:41:11 发布
阅读量348 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Ajax 文章标签： ajax javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/124741489
本文详细介绍了AJAX的基础知识，包括如何使用XMLHttpRequest对象发送GET和POST请求，以及设置请求参数和请求头。通过实例展示了在前端页面和服务器端的交互过程，帮助理解AJAX在数据传输中的应用。

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

文章目录

案例准备

前端页面准备：GET.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    
</body>
</html>

服务器页面准备:GET.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// 如果请求行的路径是/server就会执行回调韩式里面的内容
app.get('/server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    
    // 设置响应体
    response.send('HELLO AJAX')
})
// 4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000端口监听中……')
})

启动GET.js
在这里插入图片描述

AJAX发送get请求

  1. 创建AJAX对象：const xhr = new XMLHttpRequest();
  2. 初始化 设置请求方法和url（向谁发送请求）：xhr.open('GET','http://127.0.0.1:8000/server')
    ——请求行
  3. 发送请求： xhr.send()
  4. 事件绑定，处理服务端返回的结果：
 xhr.onreadystatechange = function (){
 }
  • on:当…的时候
  • readystate是xhr对象中的属性，表示状态:
    0(未初始化)
    1(open方法调用完毕)
    2(send方法调用完毕)
    3(服务端返回了部分结果)
    4(服务端返回了所有结果)
  • change 改变

处理结果:行 头 空行 体：

// 1.响应行
 console.log(xhr.status);//状态码
 console.log(xhr.statusText)//状态字符串
 //2.响应头
 console.log(xhr.getAllResponseHeaders)
 // 3.响应体
 console.log(xhr.response)

eg：实际应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
        // 获取button
        const btn=document.getElementsByTagName('button')[0];
        btn.onclick = function (){
        //    创建对象
        const xhr = new XMLHttpRequest()
        // 初始化 设置请求方法和url（向谁发送请求）
        xhr.open('GET','http://127.0.0.1:8000/server')
        // 发送请求
        xhr.send()
        // 事件绑定，处理服务端返回的结果
        // on:当...的时候
        // readystate是xhr对象中的属性
        // 表示状态:0(未初始化) 1(open方法调用完毕) 2(send方法调用完毕) 3(服务端返回了部分结果) 4(服务端返回了所有结果)
        // change 改变
        xhr.onreadystatechange = function (){
           if(xhr.readyState === 4){
            //    判断响应状态码 200(成功) 404 403 401 500
            //  2开头的都是成功
            if(xhr.status >=200 && xhr.status<300){
                // 处理结果:行 头 空行 体
                // 1.响应行
                console.log(xhr.status);//状态码
                console.log(xhr.statusText)//状态字符串
                //2.响应头
                console.log(xhr.getAllResponseHeaders)
                // 3.响应体
                console.log(xhr.response)

                // 将相应结果放到页面上
                const result = document.getElementById('result')
                result.innerHTML = xhr.response
            }else{

            }
           }
        }
        }
    </script>
    
</body>
</html>

运行结果：
在这里插入图片描述
点击后：
在这里插入图片描述
在这里插入图片描述

AJAX的get请求设置参数——(请求体)

ajax传递参数值需要在url后面添加参数即可。
格式 ：url?参数名 = 参数值&参数名 = 参数值
url和参数之间使用?分隔，多个参数之间使用&分隔。
eg：

xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300')

在这里插入图片描述

AJAX发送post请求

和发送get请求类似，将get换成post
post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: solid 1px;
        }
    </style>
</head>
<body>
    <div id = 'result'></div>
    <script>
        // 获取元素
        const result = document.getElementById('result')
        // 绑定事件
        result.addEventListener('mouseover',function  (){
        //    1.创建对象
        const xhr = new XMLHttpRequest();
        // 2. 初始化类型与URL
        xhr.open('POST','http://127.0.0.1:8000/server')
        // 3.发送
        xhr.send()
        // 4.事件绑定
        xhr.onreadystatechange = function (){
           if(xhr.readyState === 4){
               if(xhr.status >=200 && xhr.status<300){
                //    处理返回结果
                result.innerHTML = xhr.response
               }
           }
        }

        })
    </script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// 如果请求行的路径是/server的GET请求就会执行回调函数里面的内容
app.get('/server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX GET')
})
// 如果请求行的路径是/server的POST请求就会执行回调函数里面的内容
app.post('/server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX POST')
})
// 4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000端口监听中……')
})

输出：
在这里插入图片描述
在这里插入图片描述

AJAX的post请求设置参数

post请求是在send中1进行设置的
格式：xhr.send('参数名=参数值&参数名=参数值')
或者xhr.send('参数名:参数值&参数名:参数值')
eg：

xhr.send('a=100&b=200&c=300')

在这里插入图片描述

AJAX请求头的设置

在open后面设置请求头。
设置请求头格式：setRequestHeader('头的名字','头的值')
我们一般把身份校验的信息放到头信息中，传递到后端进行验证

eg：预定义的响应头

// 设置请求头(setRequestHeader('头的名字','头的值'))
// Content-Type请求体类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

POST.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: solid 1px;
        }
    </style>
</head>
<body>
    <div id = 'result'></div>
    <script>
        // 获取元素
        const result = document.getElementById('result')
        // 绑定事件
        result.addEventListener('mouseover',function  (){
        //    1.创建对象
        const xhr = new XMLHttpRequest();
        // 2. 初始化类型与URL
        xhr.open('POST','http://127.0.0.1:8000/server')
        // 设置请求头(setRequestHeader('头的名字','头的值'))
        // Content-Type请求体类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        // 3.发送
        xhr.send('a=100&b=200&c=300')
        // 4.事件绑定
        xhr.onreadystatechange = function (){
           if(xhr.readyState === 4){
               if(xhr.status >=200 && xhr.status<300){
                //    处理返回结果
                result.innerHTML = xhr.response
               }
           }
        }

        })
    </script>
</body>
</html>

在这里插入图片描述
eg：自定义的响应头
自定义的响应头浏览器的安全检验机制会检验出来，所以需要对server.js的post请求做如下修改（修改成all，表示接受所有请求）

// 如果请求行的路径是/server的POST请求就会执行回调函数里面的内容
app.all('/server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers','*')
    // 设置响应体
    response.send('HELLO AJAX POST')
})

前端设置响应头

xhr.setRequestHeader('name','yang')

重新启动server.js
浏览器显示如下：
在这里插入图片描述
完整代码：
post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: solid 1px;
        }
    </style>
</head>
<body>
    <div id = 'result'></div>
    <script>
        // 获取元素
        const result = document.getElementById('result')
        // 绑定事件
        result.addEventListener('mouseover',function  (){
        //    1.创建对象
        const xhr = new XMLHttpRequest();
        // 2. 初始化类型与URL
        xhr.open('POST','http://127.0.0.1:8000/server')
        // 设置请求头(setRequestHeader('头的名字','头的值'))
        // Content-Type请求体类型
        // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr.setRequestHeader('name','yang')

        // 3.发送
        xhr.send('a=100&b=100&c=100')
        // 4.事件绑定
        xhr.onreadystatechange = function (){
           if(xhr.readyState === 4){
               if(xhr.status >=200 && xhr.status<300){
                //    处理返回结果
                result.innerHTML = xhr.response
               }
           }
        }

        })
    </script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// 如果请求行的路径是/server的GET请求就会执行回调函数里面的内容
app.get('/server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX GET')
})
// 如果请求行的路径是/server的POST请求就会执行回调函数里面的内容
app.all('/server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers','*')
    // 设置响应体
    response.send('HELLO AJAX POST')
})
// 4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000端口监听中……')
})
AJAX 总结：ajax请求的几种方法。
小白的博客
07-24 3189
首先我们得知道AJAX是干嘛的，为什么要学习它把。 这里我看了一个博客，写的挺好。传送门：看这一篇就够了！-Ajax详解_Oriental_的博客-优快云博客。 第二个重要的是 你要知道http协议中的请求报文和响应报文，要不学的一脸懵。 请求报文： 请求行，请求头，请求空行，请求体。 借一个博主文章讲一下请求报文。 第一行就是请求行，请求行中含有请求方法，请求URL，还有HTTP协议版本。 下面的圈4全部都是请求头，请求头是关键字/值对的形式。最下面的一行就是请求体，注意GET方法没.
AJAX请求
qq_49633562的博客
08-01 626
AJAX即“AsynchronousJavascriptAndXML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。对AJAX的印象。...
jquery实现Ajax请求的几种常见方式总结
12-12
本文实例讲述了jquery实现Ajax请求的几种常见方式。分享给大家供大家参考，具体如下： 用原生的javascript开发ajax有着许多重复的代码，当然你也可以封装成可以复用的js代码，但却不一定那么通用。但jquery  提供的几种AJAX请求的几种方式，从简单到复杂，有更多的选择空间，下面总结几种在项目中常用的jquery ajax请求的方式，由于AJAX 与语言不相关，所以省略后台语言部分，重点放在前端。 1. 用jquery 的 load() 方法实现ajax请求 2. 用jquery 的 post() ,get() 方法 3. 用jquery 的 Ajax() 方法，这个最强悍
Ajax请求的使用
weixin_45274554的博客
09-14 249
AJAX介绍 AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。 1.XMLHttpReques
Ajax-概述、XMLHttpRequest对象、AJAX GET请求、AJAX POST请求
最新发布
m0_73941339的博客
06-14 928
本文深度解析传统请求痛点（页面刷新/体验割裂），详解AJAX核心XMLHttpRequest对象四步使用法（创建→回调→开启→发送），手写GET/POST请求解决缓存与数据提交难题，并附表单模拟实战代码。助你彻底掌握异步交互，实现页面无刷新更新！
ajax请求的使用
心如止水的博客
06-28 2026
<script> document.querySelector('#btn').onclick = function () { //ajax向服务器发请求要依赖XMLHttpRequest对象, //这个对象一开始是没有的,要实例化出来一个 //1.创建ajax对象 "小黄人" ...
Ajax请求方法总结
Guan'Blog
07-16 1180
导语：网站Ajax技术的出现，使得web开发由1.0走向了2.0时代。并且被谷歌地图和谷歌邮箱应用。后来原生的Ajax请求使用繁琐，便出现了jQuery框架，其中的封装的ajax方法非常方便快捷。之后由于回调地狱的问题出现了promise，一个承诺，一旦状态改变就固定了。之后又出现了generator方法，最后就是同步写法的async await。 目录 原生的Ajax技术 jQuery的a...
为jquery的ajax请求添加超时timeout时间的操作方法
10-18
在现代Web开发中，使用jQuery进行Ajax请求是一种常见的操作。jQuery作为一个广泛使用的JavaScript库，简化了从客户端到服务器的数据交互，而Ajax超时的设置则是保证请求响应时效性的重要手段。当客户端向服务器发送...
chrome扩展插件获取ajax请求记录
04-06
其中，获取Ajax请求记录是开发者调试过程中非常关键的一环，因为它可以帮助开发者检查数据的发送和接收情况，排查网络问题，以及理解应用程序的工作流程。 Chrome扩展插件就是一种增强浏览器功能的方式，它们可以...
Jquery ajax请求导出Excel表格的实现代码
10-22
以上知识点覆盖了jQuery、AJAX、前端与后端交互、数据请求和处理、页面动态操作、以及代码的场景应用等多个方面，能够为开发者提供关于使用jQuery实现AJAX请求导出Excel表格功能的全面理解和实现细节。
jQuery实现监控页面所有ajax请求的方法
10-23
`$.ajaxComplete`用于注册全局Ajax完成事件处理器，`$.ajaxError`用于注册全局Ajax错误事件处理器，以及`$.when`用于并发处理多个异步操作，它们都可以在特定情况下辅助进行Ajax请求的监控和管理。 6. **$.promise*...
原生js实现ajax请求和JSONP跨域请求操作示例
10-15
原生js实现ajax请求和JSONP跨域请求操作示例的知识点涉及了Web前端技术中的核心知识点，主要介绍的是如何使用JavaScript原生代码来发起网络请求以及如何处理跨域问题。以下是对给定文件内容中知识点的详细解读： 1....
Ajax常见请求方法（详细）
小卡拉米的博客
01-06 8305
同源：协议，域名，端口完全相同。//CORS跨域资源共享。
Spring MVC 教程,快速入门,深入分析——处理ajax请求
weixin_33726313的博客
10-16 95
十五、处理ajax请求1、引入下面两个jar包，我用的是1.7.2，好像1.4.2版本以上都可以，下载地址：http://wiki.fasterxml.com/JacksonDownloadjackson-core-asl-1.7.2.jarjackson-mapper-asl-1.7.2.jar2、spring的配置文件中要有这一行，才能使用到spring内置支持的j...
ajax请求
2201_75694264的博客
10-11 988
首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在 data-original 属性中，当页面滚动的时候需要去监听 scroll 事件，在 scroll 事件的回调中，判断我们的懒加载的图片是否进入可视区域，如果图片在可视区内则将图片的 src 属性设置为 data-original 的值，这样就可以实现延迟加载。2.配置请求信息 xhr.open("get|post","url",false/true);3.发送请求 xhr.send();2.减少无效资源的加载。
JAVA互联网架构学习之ajax&Json
sinat_36449151的博客
08-18 417
1.AJAX [1] AJAX简介 > 全称： Asynchronous JavaScript And XML > 异步的JavaScript和XML > AJAX就是通过JavaScript向服务器发送请求，并接收响应，然后我们在通过DOM来修改页面。 > XML指的是服务器响应的数据的格式。 > 目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。
postman上传文件
ldzm
11-28 1403
postman上传文件一 ftl文件二 Postman操作 一 ftl文件 请注意以下代码的uploadingFiles，用于postman中文件的key <body οnlοad="updateSize();"> <form name="uploadingForm" enctype="multipart/form-data" action="/up" method="POST...
掌握Selenium实现Ajax POST请求操作
在这种情况下，测试脚本需要等待Ajax请求完成并获取数据，才能继续执行后续的测试操作。Selenium提供了WebDriverWait和expected_conditions等方法来处理这种情况。 5. 使用Selenium发送Ajax POST请求： 本资源中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值