Ajax インタラクション用の Servlet3.0+JS-jsチュートリアル-php.cn

Ajax インタラクション用の Servlet3.0+JS

php中世界最好的语言

リリース： 2018-06-15 15:21:46

オリジナル

1104 人が閲覧しました

今回は、Ajax 連携のための Servlet3.0+JS について、実際の事例を見てみましょう。

js.html は純粋に静的なページですが、Ajax インタラクションを実現するには次のプログラムを Tomcat サーバーにハングする必要があります。そうしないと効果が表示されません。

Javaee 用の Eclipse。Tomcat を実行する前に、完成したプロジェクトを Tomcat にハングすることに注意してください。

このプロジェクトでは、JSP に必要な Servlet パッケージ以外は何も導入する必要はありません。本当はJSPページを直接使ってこのプロジェクトを完成させたいのですが、今は基本的にJSPをやっている人で.jspファイルに直接何かを書く人はいないですよね。すべてのバックグラウンドアクションは .java にスローされます。

1. 基本目標

フロントエンドの js.html 入力ボックスの入力を、名前が ajaxRequest 、アドレスが /ajaxRequest であるバックエンドの Servlet.java に渡します。 Servlet.java バックグラウンドは、対応する情報をフロントエンド js.html に返します。js.html は更新もジャンプも行わず、すぐに応答します。

2. 基本的な考え方

Servlet3.0なのでWeb上で何も書く必要がありません

1. . Servlet.java と js.html のどちらを先に書いても問題はありません。いずれにせよ、Ajax 対話では、これら 2 つは統合されており、分離することはできません。

まず js.html を見てください。HTML レイアウトは非常にシンプルで、入力ボックスは 2 つだけです。 Ajax オブジェクト XMLHttpRequest を作成するときは、キーワード XMLHttpRequest を Ajax オブジェクト XMLHttpRequest の名前として使用しないように注意してください。使用しないと、一部のブラウザーが処理できません。

<?xml version="1.0" encoding="UTF-8"?> 
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xmlns="http://java.sun.com/xml/ns/javaee" 
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
  version="3.0"> 
</web-app>

ログイン後にコピー

2. 次は Servlet.java です。実際、doGet と doPost は両方ともページに内容を出力しますが、この異なる形式をとります。 PrintStreamは以前のJDKの出力ストリームで、JDK1.4以降はPrintWriterが出力ストリームになるようです。しかし、この部分は単純すぎます。入力ストリームと出力ストリームはすべて Java の必須コースですよね。

js.html が param1 と param2 をこの Servlet.java に渡した後、この Servlet.java が対応する内容を出力するのを待ち、フロントデスクの XMLHttpRequest1.responseText 変数を通じてそれらを直接読み取ります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Js</title> 
</head> 
 
<body> 
  <input type="text" id="param1" /> 
  <input type="text" id="param2" /> 
  <button onclick="ajax()">Go!</button> 
</body> 
</html> 
<script> 
  //创建Ajax对象，不同浏览器有不同的创建方法，其实本函数就是一个简单的new语句而已。  
  function createXMLHttpRequest() { 
    var XMLHttpRequest1; 
    if (window.XMLHttpRequest) { 
      XMLHttpRequest1 = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
      try { 
        XMLHttpRequest1 = new ActiveXObject("Msxml2.XMLHTTP"); 
      } catch (e) { 
        XMLHttpRequest1 = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
    } 
    return XMLHttpRequest1; 
  } 
  function ajax() { 
    //param1与param2就是用户在输入框的两个参数 
    var param1=document.getElementById("param1").value; 
    var param2=document.getElementById("param2").value; 
    var XMLHttpRequest1 = createXMLHttpRequest(); 
    //指明相应页面  
    var url = "./ajaxRequest"; 
    XMLHttpRequest1.open("POST", url, true); 
    //这里没法解释，你所有JavaScript的请求头都这样写就对了，不会乱码  
    XMLHttpRequest1.setRequestHeader("Content-Type", 
        "application/x-www-form-urlencoded"); 
    //对于ajaxRequest，本js.html将会传递param1与param2给你。  
    XMLHttpRequest1.send("param1=" + param1 + "¶m2=" + param2); 
    //对于返回结果怎么处理的问题  
    XMLHttpRequest1.onreadystatechange = function() { 
      //这个4代表已经发送完毕之后  
      if (XMLHttpRequest1.readyState == 4) { 
        //200代表正确收到了返回结果  
        if (XMLHttpRequest1.status == 200) { 
          //弹出返回结果  
          alert(XMLHttpRequest1.responseText); 
        } else { 
          //如果不能正常接受结果，你肯定是断网，或者我的服务器关掉了。  
          alert("网络连接中断！"); 
        } 
      } 
    }; 
  } 
</script>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vueを使用したツリーメニューバー関数の実装

preload()関数と画像アップロード

以上がAjax インタラクション用の Servlet3.0+JSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。