Node之简单的前后端交互(实例讲解)
2019/6/27 20:33:54
本文主要是介绍Node之简单的前后端交互(实例讲解),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的。
这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学node的朋友可以看一看。一方面理解服务端与客户端是如何交互的,一方面更熟悉node开发。
先贴代码:(有兴趣的可以copy到本地自己run一下)
主页面的html
index.html:
<!doctype> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="btn1">food</button> <button id="btn2">other</button> <h1 id="content"></h1> <script type="text/javascript" src="./client.js"></script> </body> </html>
接下来是服务器端的代码,运行方式是在node环境下输入命令:node server.js
server.js:
let http = require('http'); let qs = require('querystring'); let server = http.createServer(function(req, res) { let body = ''; // 一定要初始化为"" 不然是undefined req.on('data', function(data) { body += data; // 所接受的Json数据 }); req.on('end', function() { res.writeHead(200, { // 响应状态 "Content-Type": "text/plain", // 响应数据类型 'Access-Control-Allow-Origin': '*' // 允许任何一个域名访问 }); if(qs.parse(body).name == 'food') { res.write('apple'); } else { res.write('other'); } res.end(); }); }); server.listen(3000);
引入的qs模块用于解析JSON
req.on('data', callback); // 监听客户端的数据,一旦有数据发送过来就执行回调函数
req.on('end', callback); // 数据接收完毕
res // 响应
客户端的js(功能就是负责一些DOM操作以及发送ajax请求)
client.js:
let btn1 = document.getElementById('btn1'); let btn2 = document.getElementById('btn2'); let content = document.getElementById('content'); btn1.addEventListener('click', function() { ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML); }); btn2.addEventListener('click', function() { ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML); }); // 封装的ajax方法 function ajax(method, url, val) { // 方法,路径,传送数据 let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { content.innerHTML = xhr.responseText; } else { alert('Request was unsuccessful: ' + xhr.status); } } }; xhr.open(method, url, true); if(val) xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(val); }
这个简单的交互就是这样的,其实我们在第一次学习后端语言的时候第一件事就是写一个前后端交互程序,这样会帮助我们更好的理解前后端的分工。
run方法:
先将server.js运行起来,然后打开html来请求响应。
以上这篇Node之简单的前后端交互(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持找一找教程网。
这篇关于Node之简单的前后端交互(实例讲解)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南