4. AJAX初步学习（3）

最新推荐文章于 2024-08-12 21:44:16 发布

大神糖逗逗

最新推荐文章于 2024-08-12 21:44:16 发布

阅读量76

点赞数

文章标签： ajax js html

本文链接：https://blog.csdn.net/t13268668791/article/details/118648116

版权

本文档介绍了如何使用AJAX发送POST请求，实现在鼠标悬停时更新div内容。首先，通过XMLHttpRequest对象创建并初始化POST请求，绑定事件监听器。然后，服务端使用Express接收POST请求，设置响应头以允许跨域。接着，展示了如何在请求体中设置参数，并在响应中处理。最后，讨论了设置自定义请求头的问题，以及服务端如何接受所有类型的头信息。

摘要由CSDN通过智能技术生成

AJAX初步学习（3）

1.AJAX发送POST请求，目的是在一个div盒子中，实现鼠标在上面停留时，就发送POST请求，之后响应体在div盒子中呈现出来。

首先在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>AJAX POST 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function () {
            console.log("test");
            //1、创建对象
            const xhr = new XMLHttpRequest();
            //2、初始化 设置类型与URL
            xhr.open('POST', 'http:127.0.0.1:8000/server')//第一个是请求的类型，第二个是请求的url路径
            //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>

但是运行后在控制台中会发现报错
在这里插入图片描述
这是因为服务端并没有与之匹配的一个规则，且并没有设置一个对应的响应头（之前设置的响应头是GET类型的），这是只用把服务端之前写的代码中get改成post就可以啦

//1、引入express
const express = require('express');

//2、创建应用对象
const app = express();


//3、创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装

app.post('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')

    //设置响应体
    response.send('HELLO AJAX PPPPPOST')

});

//4、监听端口启动服务
app.listen(8000, () => {
    console.log("服务已启动，8000 端口监听中......")
})

再在页面中打开，这时候鼠标放在div盒子上，就会显示出内容了
在这里插入图片描述

2.第二个任务：在post请求中设置参数
post请求中设置参数是在请求体内设置在这里插入图片描述
如图，这里就是在xhr.send中设置了abc的参数。这在页面中打开在控制台也是可以看到的！就不放图片展示了！和在url中设置参数查看类似。

3. 设置请求头信息
只用多进行一个请求头的设置就可以了，加一行代码在这里插入图片描述
但是如果添加自定义的头，页面中就会报错。
比如我加了一条xhr.setRequestHeader('name', 'tttttnnnzzz');就会报错。
但是如果在服务端这是一个特殊的响应头，并且改一下相关格式，就不会报错了。

app.all('/server', (request, response) => {
   //设置响应头  设置允许跨域
   response.setHeader('Access-Control-Allow-Origin', '*')
   //响应头
   response.setHeader('Access-Control-Allow-Headers', '*')// *号意思是所有类型的头都可以接受
   //设置响应体
   response.send('HELLO AJAX PPPPPOST')

});

在服务端加上以上代码，all是可以接受所有类型的请求。*号意思是所有类型的头都可以接受。
这样在浏览器中打开就可以查看到添加的头信息了。
在这里插入图片描述
这周的学习就到这里啦，下周就放假了，要利用好时间好好努力了！

大神糖逗逗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4. AJAX初步学习（3）

AJAX初步学习（3）1.AJAX发送POST请求，目的是在一个div盒子中，实现鼠标在上面停留时，就发送POST请求，之后响应体在div盒子中呈现出来。首先在HTML页面中写出大概代码，并进行事件绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
复制链接

扫一扫