ノードはシンプルなフロントエンドとバックエンドの対話を実装します。

小云云
リリース: 2017-12-21 11:13:56
オリジナル
1535 人が閲覧しました

ノードはフロントエンドにとって必須のスキルです。ノードを学習する前に、ノードがフロントエンドとバックエンドの相互作用をどのように実装するかを理解する必要があります。この記事では、Node の簡単なフロントエンドとバックエンドの対話について説明します (例を示した説明)。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ここでは、ネイティブ ajax とノードの間の簡単な対話を示します。ノードを学習したばかりの友達は見てください。一方では、サーバーとクライアントがどのように対話するのかを理解し、他方では、ノード開発についての知識が深まります。

最初にコードを投稿します: (興味がある場合は、ローカルにコピーして自分で実行できます)

メイン ページの 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>
ログイン後にコピー

次のステップはサーバー側のコードです。実行方法は、ノード環境でコマンドを入力することです:nodeserver.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);を解析するために使用されます。 // クライアントのデータを監視し、データが送信されたらコールバックを実行します。 Function

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.js+Koa フレームワーク

PHP フロントエンドとバック- インタラクション終了

以上がノードはシンプルなフロントエンドとバックエンドの対話を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート