AJAX的几种请求方式（包括get,post,json含后台)

最新推荐文章于 2025-04-09 02:58:17 发布

林小鹅

最新推荐文章于 2025-04-09 02:58:17 发布

阅读量1.8k

点赞数 3

分类专栏：前呀前端呀文章标签： javascript node.js html es6

本文链接：https://blog.youkuaiyun.com/xiaolingshi_/article/details/108570425

版权

前呀前端呀专栏收录该内容

4 篇文章

订阅专栏

AJAX的几种请求方法

1.GET

<!DOCTYPE html>
<html lang="en">

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

    </div>
</body>

</html>
<script>
    //获取button元素
    const btn = document.getElementsByTagName('button')[0];
    //绑定事件
    btn.onclick = function() {
        //1.创建对象
        const xhr = new XMLHttpRequest();
        const result = document.getElementById("result")
        //2.设置初始化
        xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');
        //3.发送
        xhr.send();
        //4.事件绑定 处理服务器返回的结果
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    //处理结果 行 头 空行 体
                    //1.响应行
                    //   console.log(xhr.status);//状态码
                    //   console.log(xhr.statusText);//状态字符串
                    //   console.log(xhr.getAllResponseHeaders());//所有响应头
                    //   console.log(xhr.response);//响应体
                    result.innerHTML = xhr.response;
                } else {}
            }
        }
    }
</script>

2.POST

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
</head>
<style>
    #result {
        width: 200px;
        height: 100px;
        border: solid 1px #90b;
    }
</style>

<body>
    <div id="result">

    </div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function() {
            // console.log("test");
            //1.创建对象
            const xhr = new XMLHttpRequest();
            const result = document.getElementById('result')
            //2.初始化
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            //设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('name', 'atguigu')
            //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;
                    } else {}
                }
            }
        })
    </script>
</body>

</html>

3.JSON

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
</head>
<style>
    #result {
        width: 200px;
        height: 100px;
        border: solid 1px #90b;
    }
</style>

<body>
    <div id="result">

    </div>
    <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function() {
            //发送请求
            const xhr = new XMLHttpRequest();
            //设置响应体数据的类型
            xhr.responseType = "json";
            //初始化（原来的/server改成/json-server了）
            xhr.open('GET', 'http://127.0.0.1:8000/json-server');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response;
                        //手动对数据转换
                        // let data = JSON.parse(xhr.response);
                        console.log(data);
                        // result.innerHTML = data.name;
                        //自动转换(xhr.responseType = "json";)
                        console.log(xhr.response)
                        result.innerHTML = xhr.response.name;
                    } else {
                        
                    }
                }
            }
        }
    </script>
</body>

</html>

总的后台文件


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

global.fetch = require("node-fetch");


//创建应用对象
const app = express();
//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应 允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO AJAX');
});
//可以接受任意类型的请求
app.all('/server',(request,response)=>{
//设置响应头 允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应头
response.setHeader('Access-Control-Allow-Headers','*')
//设置响应体
response.send('HELLO AJAX POST-2');
});

//JSON响应
app.all('/json-server',(request,response)=>{
//设置响应头 允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应头
response.setHeader('Access-Control-Allow-Headers','*')
//响应一个数据
const data ={
name:'atguigu'
}
//对对象进行字符串转换
let str = JSON.stringify(data);
//设置响应体
response.send(str);
});

app.all('/server',(request,response)=>{
//设置响应头 允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应头
response.setHeader('Access-Control-Allow-Headers','*')
//设置响应体
response.send('HELLO AJAX POST-2');
});

//针对IE缓存
app.all('/ie',(request,response)=>{
//设置响应头 允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应头
response.setHeader('Access-Control-Allow-Headers','*')
//设置响应体
response.send('HELLO IE');
});

//延时处理
app.all('/delay',(request,response)=>{
//设置响应头 允许跨域

response.setHeader('Access-Control-Allow-Origin','*');
setTimeout(()=>{
    //设置响应体
    response.send('延时响应')
})
//响应头
response.setHeader('Access-Control-Allow-Headers','*')
//设置响应体
response.send('HELLO IE');
});


//axios服务
app.all('/axios-server',(request,response)=>{
    //设置响应头 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*')
    //设置响应体
    const data = {name:'尚硅谷'}
    response.send(JSON.stringify(data));
    });

//fetch服务
    app.all('/fetch-server',(request,response)=>{
        //设置响应头 允许跨域
        response.setHeader('Access-Control-Allow-Origin','*');
        response.setHeader('Access-Control-Allow-Headers','*')
        //设置响应体
        const data = {name:'尚硅谷'}
        response.send(JSON.stringify(data));
        });    
 //监听端口
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中...")
});

ps：运用了express和自动重启工具nodemon