有事业务需求很简单，只需要调用后台接口，
然后简单的页面布局，数据填充，没有太多交互的操作，
如果这时还使用框架或者jQuery库的话，未免大材小用，造成不必要的代码冗余。
其实只需要使用 ajax 的和简单的操作 dom 的话，自己封装下就好了
原生js模拟简单的 jQuery ajax 方法
- 封装代码
// 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;
}
}- 使用 类似 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 来配置下跨域 便于调试
- 新建项目文件夹
- 项目文件夹下面建src文件夹
- src文件夹放开发用的代码
- 安装node依赖
yarn add express http-proxy-middleware --dev
或者
npm i express http-proxy-middleware --save-dev
- 新建 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);
}
});- 项目目录下运行 node server
- 打开 http://localhost:5000
做了两件事，1、封装了简单的ajax方法。2、配置了跨域环境。
这两者都可以单独使用，没有强关联性。
发表评论：