JSPページでJavaScriptを使用する方法-フロントエンドQ&A-php.cn

JSPページでJavaScriptを使用する方法

PHPz

リリース： 2023-04-25 17:41:19

オリジナル

2210 人が閲覧しました

JSP (Java Server Pages) は、動的な Web サイトや Web アプリケーションの構築に使用できる、Java テクノロジに基づくサーバー側 Web 開発フレームワークです。 JSP には、開発者が高品質の Web アプリケーションを迅速かつ効率的に構築できるようにする豊富な Java ライブラリとツールのセットが含まれています。ただし、JSP を使用して Web サイトを構築するときに多くの開発者が遭遇する問題の 1 つは、JavaScript の使用方法です。

JavaScript は、Web サイトに対話性とダイナミクスを追加するために使用される強力なクライアント側プログラミング言語です。 JavaScript を使用すると、フォームの検証、HTML 内の要素の変更、アニメーション効果の実装、およびその他の機能を実行できます。ただし、JSP はサーバー側で実行される Java プログラムであり、クライアントブラウザで JavaScript を直接呼び出すことができないため、多くの開発者は JSP では JavaScript を使用できないと考えています。

しかし、実際には、JSP では JavaScript を使用できます。 JSP には JavaScript を使用するためのさまざまな方法が用意されています。これらのメソッドを 1 つずつ見てみましょう。

JavaScript コードを JSP ページに直接埋め込む

これは最も簡単で一般的な方法です。次に示すように、script タグを使用して JSP ページに JavaScript コードを埋め込みます。

<html>
<head>
  <title>JSP 中使用 JavaScript</title>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <script type="text/javascript">
    // 在这里编写 JavaScript 代码
    alert("Hello World!");
  </script>
</body>
</html>

ログイン後にコピー

このメソッドを使用すると、JSP ページに JavaScript コードを直接記述して、さまざまな関数を実装できます。

外部 JavaScript ファイルで関数を定義し、JSP ページでそれらを呼び出す

JSP ページは、外部 JavaScript ファイルにリンクすることで JavaScript 関数を呼び出すことができます。このアプローチにより、ページに大量の JavaScript コードを埋め込むことがなくなり、コードの保守が容易になります。

外部 JavaScript ファイルで関数を定義します:

// 引用外部 JavaScript 文件
function sayHello() {
  alert("Hello World!");
}

ログイン後にコピー

JSP ページで上記の関数を呼び出します:

<html>
<head>
  <title>JSP 中使用 JavaScript</title>
  <script type="text/javascript" src="hello.js"></script>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <button onclick="sayHello()">点击这里</button>
</body>
</html>

ログイン後にコピー

ここでは HTML の onclick 属性を使用して関数を呼び出しますユーザーがボタンをクリックすると、「Hello World!」を示すダイアログボックスが表示されます。

JSP で AJAX テクノロジを使用してサーバー側 Java メソッドを呼び出す

AJAX は、Asynchronous JavaScript and XML の略語で、JavaScript および XML テクノロジの使用を指します。全体を更新せずにページの場合、ページコンテンツの一部を更新する技術。 AJAX テクノロジを通じて、JSP ページはサーバー側の Java メソッドを呼び出して、いくつかの高度な機能を実現できます。以下は簡単な例です。

Java クラスを定義します:

public class MyUtil {
  public static String getData() {
    // 这里返回一些数据
    return "some data";
  }
}

ログイン後にコピー

JSP ページで JavaScript コードを定義します:

function getData() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var data = xhr.responseText;
      // 处理返回的数据
      alert(data);
    }
  }
  xhr.open("GET", "MyServlet", true);
  xhr.send();
}

ログイン後にコピー

JSP ページ:

<html>
<head>
  <title>JSP 中使用 JavaScript</title>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <button onclick="getData()">获取数据</button>
</body>
</html>

ログイン後にコピー

この例では、JavaScript 関数 getData() が JSP ページで定義されており、AJAX テクノロジを通じてサーバー側 Java メソッド MyUtil.getData() を呼び出し、返されたデータをダイアログボックス。

上記は、JSP で JavaScript を使用する 3 つの方法です。開発者は、特定の状況に基づいて最適な方法を選択できます。 JSP はブラウザ内で JavaScript を直接呼び出すことはできませんが、上記の方法を通じて、JSP はさまざまな強力な対話や動的な効果を簡単に実現できます。

以上がJSPページでJavaScriptを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。