Ajax——设置请求参数

最新推荐文章于 2024-05-24 10:14:06 发布

像费曼%

最新推荐文章于 2024-05-24 10:14:06 发布

阅读量552

点赞数 1

分类专栏： Ajax 文章标签：服务器前端 ajax

本文链接：https://blog.csdn.net/weixin_53052268/article/details/126264168

版权

Ajax 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.目录结构

2.需求：

点击按钮获取服务端响应的结果

3. 代码展示

<!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 #6789ad;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result">

    </div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');

        btn.onclick = function (){
            //测试
            // console.log('ok')
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');
            //3.发送请求
            xhr.send();
            //4.事件绑定 处理服务端返回的结果
            //on when 当....时候
            //resdystatus是xhr对象中的属性，表示状态0 1 2 3 4
            //change 改变
            xhr.onreadystatechange = function(){
                //判断响应状态码 200 404 403 401 500
                if(xhr.readyState === 4){
                    //2XX表示成功
                    if(xhr.status >= 200 && xhr.status < 300)
                    //处理结果 行 头 空行 体
                    //响应行
                    console.log(xhr.status);
                    console.log(xhr.statusText);//状态字符串
                    console.log(xhr.getAllResponseHeaders());//所有响应头
                    console.log(xhr.response);
                    result.innerHTML= xhr.response;

                }else{

                }

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

server.js

// 1.引入express
const { request, 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')
})


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

4.结果截图