ホームページ > 記事 > ウェブフロントエンド > Ajax インタラクション用の Servlet3.0+JS
Ajax インタラクション用の Servlet3.0+JS
- php中世界最好的语言オリジナル
- 2018-06-15 15:21:461169ブラウズ
今回は、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を使用したツリーメニューバー関数の実装
以上がAjax インタラクション用の Servlet3.0+JSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。