AJAX (2) — AJAX请求的基本操作、设置请求参数、发送POST请求，POST设置请求体、AJAX设置请求头信息

最新推荐文章于 2024-05-24 11:14:56 发布

吃不到棒棒糖的小熊

最新推荐文章于 2024-05-24 11:14:56 发布

阅读量3.1k

点赞数 3

分类专栏： AJAX 文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/m0_59897687/article/details/122153655

版权

目录一、AJAX请求的基本操作 1.server.js文件 2.GET.html文件二、AJAX设置请求参数三、AJAX发送POST请求 1.POST.html文件 2.server.js文件四、POST设置请求体五、AJAX设置请求头信息 1.预定义头信息 2.自定义头信息一、AJAX请求的基本操作先设计出一个需求：如下图，点击按钮，向服务端发送请求，将服务端返回的响应体结果展示在div中，页面不刷新 ...

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

一、AJAX请求的基本操作

先设计出一个需求：

如下图，点击按钮，向服务端发送请求，将服务端返回的响应体结果展示在div中，页面不刷新

完成该需求需要准备前端与服务端内容，准备一个html文件和一个js文件

1.server.js文件

//1.引入express
const { response } = require('express');
const express = require('express');

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

//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应体
    response.send('HELLO AJAX GET')
});

//4.监听端口启动服务
app.listen(5000,()=>{
    console.log('服务已经启动，5000端口监听中....');
})

2.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>AJAX GET 请求</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];
        const result = document.getElementById("result");

        //绑定事件
        btn.onclick = function(){
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化，设置请求方法和 url
            xhr.open('GET','http://127.0.0.1:5000/server')
            //3.发送
            xhr.send();
            //4.事件绑定 处理服务端返回的结果
            xhr.onreadystatechange = function(){
                //判断(服务端返回了所有的结果)
                if(xhr.readyState === 4){
                    //判断响应状态码 200 404 403 401 500
                    if(xhr.status >= 200 && xhr.status < 300){
                        //设置re

最低0.47元/天解锁文章

吃不到棒棒糖的小熊

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
AJAX (2) — AJAX请求的基本操作、设置请求参数、发送POST请求，POST设置请求体、AJAX设置请求头信息

目录一、AJAX请求的基本操作 1.server.js文件 2.GET.html文件二、AJAX设置请求参数三、AJAX发送POST请求 1.POST.html文件 2.server.js文件四、POST设置请求体五、AJAX设置请求头信息 1.预定义头信息 2.自定义头信息一、AJAX请求的基本操作先设计出一个需求：如下图，点击按钮，向服务端发送请求，将服务端返回的响应体结果展示在div中，页面不刷新 ...
复制链接

扫一扫

专栏目录