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

最新推荐文章于 2023-10-18 15:58:29 发布

w7022@

最新推荐文章于 2023-10-18 15:58:29 发布

阅读量132

点赞数

原文链接：https://blog.csdn.net/wjw0125/article/details/107670181

版权

本文讲解了如何使用AJAX实现异步请求，并展示了如何通过Express设置请求头解决跨域问题。重点介绍了封装AJAX请求的方法和处理响应状态的技巧，以及在后端设置Access-Control-Allow-Origin策略。

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

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()
 })