ajax发送get和post请求

待我称王封你为后i 2023-10-06 17:19 42阅读 0赞

express.js文件

//1. 引入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 - 2');});
    
    app.post('/server', (request, response)=>{
        //设置响应头  设置允许跨域
        response.setHeader('Access-Control-Allow-Origin', '*');
     
        //设置响应体
        response.send('HELLO AJAX POST');
    });
    
    //4. 监听端口启动服务
    app.listen(8000, ()=>{
        console.log("服务已经启动, 8000 端口监听中....");
    });

get请求

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <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:8000/server?a=100&b=200&c=300');
                //3. 发送
                xhr.send();
                //4. 事件绑定 处理服务端返回的结果
                // on  when 当....时候
                // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
    			//0：未初始化，1：open()方法执行完毕，2：send()方法执行完毕，3：服务端返回部分结果，4：服务端返回全部结果
                // change  改变
                xhr.onreadystatechange = function(){
         
                    //判断 (服务端返回了所有的结果)
                    if(xhr.readyState === 4){
         
                        //判断响应状态码 200  404  403 401 500
                        // 2xx 成功
                        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 的文本
                            result.innerHTML = xhr.response;
                        }else{
         
    
                        }
                    }
                }
    
    
            }
        </script>
    </body>
    </html>

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>
        <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(){
         
                //1. 创建对象
                const xhr = new XMLHttpRequest();
                //2. 初始化 设置类型与 URL
                xhr.open('POST', 'http://127.0.0.1:8000/server');
                //3. 发送
                xhr.send('a=100&b=200&c=300');
                // xhr.send('a:100&b:200&c:300');
                // xhr.send('1233211234567');
                
                //4. 事件绑定
                xhr.onreadystatechange = function(){
         
                    //判断
                    if(xhr.readyState === 4){
         
                        if(xhr.status >= 200 && xhr.status < 300){
         
                            //处理服务端返回的结果
                            result.innerHTML = xhr.response;
                        }
                    }
                }
            });
        </script>
    </body>
    </html>