原生 js 封装简单 ajax 方法以及使用 nodejs 配置测试跨域环境

2020-4-7 Jon nodeJS

有事业务需求很简单,只需要调用后台接口,
然后简单的页面布局,数据填充,没有太多交互的操作,
如果这时还使用框架或者jQuery库的话,未免大材小用,造成不必要的代码冗余。
其实只需要使用 ajax 的和简单的操作 dom 的话,自己封装下就好了

原生js模拟简单的 jQuery ajax 方法

  1. 封装代码
// ajax封装
function ajax() {
  var ajaxData = {
    type:arguments[0].type || 'GET',
    url:arguments[0].url || '',
    async:arguments[0].async || 'true',
    data:arguments[0].data || null,
    dataType:arguments[0].dataType || 'text',
    contentType:arguments[0].contentType || 'application/x-www-form-urlencoded',
    beforeSend:arguments[0].beforeSend || function(){},
    success:arguments[0].success || function(){},
    error:arguments[0].error || function(){}
  }
  ajaxData.beforeSend()
  var xhr = createxmlHttpRequest();
  xhr.responseType=ajaxData.dataType;
  xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);
  xhr.setRequestHeader('Content-Type',ajaxData.contentType);
  xhr.send(convertData(ajaxData.data));
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if(xhr.status == 200){
        ajaxData.success(xhr.response)
      }else{
        ajaxData.error()
      }
    }
  }
}
function createxmlHttpRequest() {
  if (window.ActiveXObject) {
    return new ActiveXObject('Microsoft.XMLHTTP');
  } else if (window.XMLHttpRequest) {
    return new XMLHttpRequest();
  }
}
function convertData(data){
  if( typeof data === 'object' ){
    var convertResult = '';
    for(var c in data){
      convertResult+= c + '=' + data[c] + '&';
    }
    convertResult=convertResult.substring(0,convertResult.length-1)
    return convertResult;
  }else{
    return data;
  }
}
  1. 使用 类似 jQuery
ajax({
  type: 'get',
  url: 'https://api.github.com/users',
  dataType: "json",
  beforeSend: function(){
    // 请求之前做的一些操作
  },
  success: function(res) {
    console.log(msg)
  },
  error:function(err) {
    console.log("error")
  }
});

使用 node 来配置下跨域 便于调试

  1. 新建项目文件夹
  2. 项目文件夹下面建src文件夹
  3. src文件夹放开发用的代码
  4. 安装node依赖

yarn add express http-proxy-middleware --dev
或者
npm i express http-proxy-middleware --save-dev

  1. 新建 server.js 文件
// 引入express框架
const express = require('express');
// 引入跨域代理中间件
const { createProxyMiddleware } = require('http-proxy-middleware');
// 框架初始化
const app = express();
// 定义监听端口
const PORT = 5000;
// 定义默认访问目录
app.use(express.static('src'));
// 跨域配置
const apiProxy = createProxyMiddleware({
  target: "https://xxx.com", // 需要跨域的
  changeOrigin: true,
  secure: false,
  // bypass: function (req, res, proxyOptions) {
  //   req.headers[""] = ""; // 这里可以给请求头加内容 可选
  // }
});
// 使用跨域配置 路径以 '/uniform-api' 开始的请求进行代理
app.use('/uniform-api', apiProxy);
// 监听端口
app.listen(PORT, function(err) {
  if (err) {
    console.log('err :', err);
  } else {
    console.log('Listen at http://localhost:' + PORT);
  }
});
  1. 项目目录下运行 node server
  2. 打开 http://localhost:5000

做了两件事,1、封装了简单的ajax方法。2、配置了跨域环境。
这两者都可以单独使用,没有强关联性。

 

标签: jquery ajax node 跨域 原生js

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2020 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap