Node implements simple front-end and back-end interaction

Node is a skill that must be learned in the front-end. We all know that node uses js as the back-end. Before learning node, we need to understand how node realizes front-end and back-end interaction. This article brings you a simple front-end and back-end interaction of Node (explanation with examples). The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

Here is a simple interaction between native ajax and node. Friends who have just learned node can take a look. On the one hand, you understand how the server and client interact, and on the other hand, you are more familiar with node development.

Post the code first: (If you are interested, you can copy it locally and run it yourself)

The html of the main page

index.html:

 
  <meta>
  <title></title>
 
 
  <button>food</button>
  <button>other</button>
  <h1></h1>

  <script></script>
 

Next is the server-side code. The running method is to enter the command in the node environment: 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);

The qs module introduced is used to parse JSON

req.on('data', callback); // Monitor the client's data and execute the callback function once data is sent

req.on('end', callback); // Data reception completed

res //Response

Client js (the function is responsible for some DOM operations and sending ajax requests)

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 <p>This simple interaction is like this. In fact, when we first learn a back-end language, the first thing we do is to write a front-end and back-end interactive program. This will help us better understand the division of labor between the front and back ends. </p><p>run method: </p><p>First run server.js, and then open html to request a response. </p><p>Related recommendations: </p><p><a href="http://www.php.cn/js-tutorial-366080.html" target="_self">Related content summary about front-end and back-end interaction</a></p><p>##Node.js+Koa framework realizes front-end and back-end interaction<a href="http://www.php.cn/js-tutorial-354077.html" target="_self"></a></p><p>PHP front-end and back-end interaction<a href="http://www.php.cn/php-weizijiaocheng-326402.html" target="_self"></a></p>

The above is the detailed content of Node implements simple front-end and back-end interaction. For more information, please follow other related articles on the PHP Chinese website!