js ajax请求封装及解决node请求跨域问题

╰+攻爆jí腚メ 2022-12-17 10:59 84阅读 0赞

#### ajax请求 ####

var ajax = new XMLhttpRequest(); // 实例化一个ajax请求的对象
    
        ajax.open(method, url, false) // 开启一个ajax请求 第一个参数是请求的方式 可以是get/post 第二个参数是请求的地址 第三个参数是否发送同步请求
    
        ajax.send() // 向服务器发送ajax请求
    
        // 获取ajax请求的响应数据
    
        ajax.onreadystatechange = function() { 
            // readystate的状态变化
            // 0: 请求未初始化
            // 1: 服务器连接已建立
            // 2: 请求已接收
            // 3: 请求处理中
            // 4: 请求已完成，且响应已就绪
            // status 200 表示请求成功 404 表示页面丢失 请求地址错误
            if(ajax.readystate === 4 && ajax.status === 200) { 
                // 记录响应数据
                var data = JSON.parse(ajax.responseText);
                console.log(data) // 就是服务返回的数据
            }
        }

#### ajax请求封装 ####

// options 调用ajax请求是传递过来的参数
     function ajax(options) { 
         var ajax = new XMLhttpRequest();
    
         ajax.open(options.method, options.url, false)
    
         ajax.send()
    
         ajax.onreadystatechange = function() { 
             var data = JSON.parse(ajax.responseText);
             if(ajax.readystate === 4 && ajax.status === 200) { 
                 // 传递出响应的数据
                 options.success(data)
             } else if(ajax.readystate === 4 && ajax.status !== 200) { 
                 options.fail(data)
             }
         }
     }
     ajax({ 
         method: "get" || "post",
         url: '你的请求地址',
         success: function(res) { 
             // res就是响应的数据了
         },
         fail: function(err) { 
    
         }
     })

#### 请求头方法解决express跨域问题 ####

var express = require('express');
     var router = express.Router();
    
     router.all('*', function(req, res, next) { 
         // 设置允许跨域的域名 * 表示允许所以的域名跨域请求
         res.header('Access-Control-Allow-Origin', '*');
         // 设置允许跨域请求的请求方式 * 表示允许所以的请求方式可以跨域
         res.header('Access-Control-Allow-Methods', '*')
    
         next()
     })