ナレッジノート|フロントエンドの相互作用を実現するためのエクスプレスサーバーに基づく

エクスプレスサーバーに基づいて前後の相互作用を実現

エクスプレス入門

• expressは、Node.jsプラットフォームに基づく高速でオープンな最小限のウェブ開発フレームワークであり、小さなデモの演習でフロントエンドにデータを送信するサーバーとして使用したり、ローカルリクエストアドレスとして使用したりできます。

• Expressのインストール

  npm install express
  

• Expressフレームワークを導入する

  const express = require('express');
  //创建应用对象
  const app = express();
  

Ajaxの紹介

• 非同期実装により、ブラウザ全体を更新せずに部分的なデータ更新を実行することが可能です
• 欠点は、クロスドメインの問題があることです（詳細に解決する必要があります）

JSONを使用してリクエストを実装する

以前のajaxリクエストは、ネットワークでのデータ送信としてxmlを使用していましたが、後でJSONに置き換えられました

• データを転送する

  const data={name:'aixuexi'}
  let str=JSON.stringify(data);
  response.send(str)
  

• HTMLページのデータを変更します

  • データを手動で変更する

    let data = JSON.parse(xhr.response)
    console.log(data);
    result.innerHTML = data.name;
    

  • xhr属性を使用した自動変更

    xhr.responseType='json';
    result.innerHTML = xhr.response.name;//直接可以获取需要的内容
    

小さなエクササイズのための特定の指示

• jQueryを使用してボタンの動作を取得し、Ajaxリクエストアクセスをバインドします

• Ajaxを使用してリクエストを送信する場合は、フォーマットURLアクセスアドレス、パスパラメータ、リクエストタイプ、レスポンスボディの結果タイプ、成功と失敗のコールバック関数を定義します。

• 背景データをhtmlページに戻し、ネイティブjsを使用して非同期オブジェクトを実装します

  • オブジェクトを作成する

    const xhr = new XMLHttpRequest();
    

  • イベントを非同期オブジェクトにバインドする

     xhr.onreadystatechange = function() {}
    

  • 非同期リクエストオブジェクト

    xmlHttp.open(请求方式get|post，“请求服务器端的地址”，true（异步)）
    

  • オブジェクトを非同期で送信する

    xmlHttp.send()
    

• アクセス要求のクロスドメイン問題の解決に関するもう1つのポイント

  フロントエンドから要求されたURLとバックエンドサーバーのURL、プロトコル、ドメイン名、ポート番号が完全に同じでない場合、アクセスできないという問題があります。

  • サーバー側のコードによって実装されたjsonpメソッド
  • CORSは、HTTP応答ヘッダーを設定することにより、アクセスがクロスドメインである必要があることをブラウザーに通知します。