js ajax請求封裝及解決node請求跨域問題

w7022@發表於2020-10-23

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

相關文章