Ajaxの初期実装(vscode+node.js+expressフレームワークを使用)。
要求事項 ボタンをクリックしてサーバーにリクエストを送信し、ページを更新せずにレスポンスの結果をdivにレンダリングする。
I. サーバーサイドの準備
node.jsのインストール https://nodejs.org/en/download/
インストールに成功したかどうかを確認するには、コマンドラインにnode -vと入力してEnterキーを押すと、バージョン番号が表示され、インストールに成功したことを示します(下図)。
vscodeによるexpressのインストール(node.jsが正常にインストールされていることが条件です)
ファイルの下に2つのファイルを含むvscodeの新しいフォルダを作成します。 一つはあなたのフロントエンドページのコードです。.html、もう一つは準備したサーバーサイドのコードです ここでは、一番外側のディレクトリのファイルにserver.jsがあります クリックして統合ターミナルで開く
npm initと入力して初期化し、パッケージ名を入力してEnterを押し続けます。
5. 引き続き npm i express と入力し、express フレームワークをインストールします。
6. ファイルディレクトリにパッケージの lock.json ファイルと node_modules ファイルが生成されているのが見えますが、これはフレームワークがインストールされたことを意味します
expressの基本的な使い方(jsファイル名は
expressBasicUse.js
).
1 .
//1. introduce express
const express = require('express');
//2. Create the application object
const app = express();
//3. Create routing rules
// request is a wrapper around the request message
// response is a wrapper around the response message
app.get('/', (request, response) => {
// Set the response
response.send('HELLO EXPRESS 1');
});
app.post('/', (request, response) => {
// Set the response
response.send('HELLO EXPRESS 2');
});
app.all('/', (request, response) => {
// Set the response
response.send('HELLO EXPRESS 3');
});
//4. listen to the port to start the service
app.listen(8000, () => {
console.log("Service has started, listening on port 8000 .... ");
});
統合ターミナルに node -express basic use.js と入力します。
3. ブラウザのアドレスバーに「http://127.0.0.1:8000/」と入力すると、次の画像が表示され、サーバーの設定が完了します。
II. クライアントの準備(
The front-end code all references jquery to get the Dom element
)
Clicking a button sends a request to the server and then renders the result of the server's response in a div without refreshing the page.
ネイティブajaxを使用します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>AJAX GET request</title>
<script src=". /js/jquery-3.0.0.min.js"></script>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px red;
}
</style>
</head>
<body>
<button>Send request</button>
<div id="result"></div>
</body>
<script>
// 1. Get the element to add a click event to the button
$('button').on('click', function () {
// alert(1);
// 2. Create the object
const xhr = new XMLHttpRequest();
// 3. Initialize Set the request method and url
xhr.open('GET', 'http://127.0.0.1:8000/server');
// 4. Send
xhr.send();
// 5. event binding Process the results returned by the server
xhr.onreadystatechange = function () {
// readystate is a property of the xhr object with 0 1 2 3 4
// Determine (4 means all results were returned by the server)
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300) {
// The result is: line header empty line body
// 1. Response line
// 2. Return the response body to the client page
$('div').html(xhr.response);
}
}
else {
}
}
})
</script>
</html>
重要なのは
III. プログラムの実行
ディレクトリフォルダを右クリックし、統合ターミナルで開く タイプ:node server.js
実行中のhtmlコード
クリックでリクエスト送信
注:この時点でAjaxは基本的に実装されています !!!
jsスクリプトのコードを実行し、ウィンドウを何度も開かないようにするには、expressと同じように、ターミナルでnpm install -g nodemonとタイプして、nodemonをインストールする必要があります。
jqueryの紹介をダウンロードしたくない場合は、ウェブページにbootcdnと入力してください https://www.bootcdn.cn/
注意:エラーが報告されないようにするためには、以下のように
crossorign="anonymous"
上記は、Ajaxの予備的な実装(vscode+node.js+expressフレームワークを使用)の詳細であり、Ajaxの予備的な実装についての詳細は、スクリプトホームの他の関連記事に注意を払うしてください!.
関連
-
AJAXは、省、市、郡レベルの連携効果を実現するために
-
メッセージ効果を更新することなくページを実現するAjax
-
ユーザー名が占有されているかどうかを検出するためにAjaxを使用する完全な例
-
springmvcとAjax一括追加メソッドの組み合わせ
-
ajax post download flaskのファイルストリームと中国語のファイル名の問題
-
バックエンドのAjaxから動的にデータを取得するbootstrap select2コード
-
AJAXを使ったユーザーログイン認証の手順(正規表現を含む)
-
AJAXによるページ更新効果の指定部分の実現
-
ajaxによるチェックフォーム方式での投稿
-
XMLHttpRequestオブジェクトを使わずにAjaxの効果を実現する方法まとめ
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン