使用原生xmlhttp请求node后台

5 篇文章 0 订阅

封装好的xmlhttp:

myaxios(method, url, data, callback) {
	let http = new XMLHttpRequest()//创建xmlhttp对象
	http.onreadystatechange = () => {//当状态码发生变化时调用
	    if(http.readyState === 4) {//readyState状态码分为1,2,3,4
		    if(http.status === 200) {//当status等于200代表着请求成功
			    let obj = JSON.parse(http.responseText)//解析后台传来的数据
			    if(obj.status === 1) {//后台返回的status
			    	callback(obj)//调用回调函数
			    }else {
			    	console.log('哇哦')//失败执行
			    }
		    }
	    }
	}
	http.open(method, url, true)//参数, 第一个是方法, 第二个是地址
	http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
	http.send(data)//传入后台的数据
}

调用就方便了

myaxios('get', 'http://localhost:523/getinfo', null, obj => {
		//第一个传方法, 第二个传地址, 第三个传参数, 第四个回调
		console.log('执行成功')
})

后台方面:

let sql = require('mysql')
let express = require('express')
let app = express()

let test = require('./routers/test.js')//引用test路由

let bodyParser = require('body-parser')//引用解析post参数插件
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(express.static('./public/'))

app.all('*', (req, res, next) => {//简单的解决跨域问题, 只是测试所以没有涉及太多东西
	res.header('Access-Control-Allow-Origin', '*')
	res.header('Access-Control-Allow-Methods', 'GET, POST')
	res.header('Access-Control-Allow-Headers', 'x-requested-width, x-access-token, Content-Type')
	next()
})
app.use(test)//应用test路由

app.listen('523', err => {//监听端口
	console.log(err ? err : '成功')
})

而处理逻辑的testjs代码如下:

let express = require('express')
let router = express.Router()
let sqlHelp = require('../sqlHelp.js')//封装好的sql请求文件
router.get('/getinfo', (req, res) => {
	let data = {
		sql: 'select * from che',//sql指令
		params: null,//参数如果有使用[]的方式传
		callback: rut => {//回调
			// console.log(rut)
			if (rut.length > 0) {
				res.json({//返回数据
					status: 1,//状态码
					message: rut//数据
				})
			}
		}
	}
	sqlHelp.exec(data)//调用已经封装好的方法
})
module.exports = router//导出文件

自己封装的sql文件代码如下:

let mysql = require('mysql')
module.exports = {
	config: {
		host: 'localhost',//地址
		user: 'root',//用户名
		password: '123',//密码
		database: 'test'//数据库名字
	},
	conn: null,
	openConn() {
		let _this = this//将this保存为变量
		me.conn = mysql.createConnection(_this.config)//创建链接
	},
	closeConn() {
		let _this = this
		_this.conn.end()//关闭链接
	},
	exec: function (data) {//启动
		let _this = this
		_this.openConn()//打开链接
		_this.conn.query(data.sql, data.params, (err, rut) => {
			//第一个参数: sql语句, 第二个参数: 拼接的参数, 第三个参数: 回调函数
			if (err) throw err//如果有错误, 抛出错误
			data.callback(rut)//回调
		})
		_this.closeConn()//一定要关闭数据库连接, 否则会出现无法下次链接的问题
	}
}

封装以后效率大幅度提升,多多尝试自己封装方法吧!

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值