ajax方式でローカルリフレッシュを実現します.
2077 ワード
JSを利用してサービス側に要求を送り、要求に応じて3つのポイントに分ける.
1.バックエンド処理ページに要求を送信する
0-(初期化されていません)send()メソッドはまだ起動されていません.
1-(ロード)send()メソッドを呼び出しました.要求を送信しています.
2-(ロード完了)send()メソッドの実行が完了し、応答内容はすべて受信されました.
3-(インタラクティブ)応答内容を解析しています.
4-(完了)応答内容の解析が完了したら、クライアントで呼び出すことができます.
4.Servlet処理コード
request.set CharcterEnccoding(「utf-8」)
レスポンス.set CharcterEnccoding(「utf-8」)
//設定データタイプ戻りデータタイプ
reponse.set ContentType(「text/playin」)
//設定無効キャッシュ
レスポンス.set Header(「Cache-control」「no-cache」)
応答データのフォーマットはServlet設定ContentTypeで決定される.
text/xml xml
text/html html
text/plin テキスト
アプリ/Json Json
1.バックエンド処理ページに要求を送信する
function input() {
var req = new XMLHttpRequest();
// true
req.open("POST","workload/SetWorkloadServlet");
req.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
//
var data = "ktbj=" + document.getElementById("selClassKt").value
+ "&kcmc=" + document.getElementById("selCourseKt").value
+ "&zxs=" + document.getElementById("zxs").value
+ "&realname=" + document.getElementById("realname").value;
//
req.send(data);
//
req.onreadystatechange = callBack;
}
2.傍受応答処理応答function callBack() = {
if (req.readyState === 4) {
if (req.status === 200) {
//
var dataStr = req.responseText;
//
var str = dataStr.split("&");
var myTable = document.getElementById("table1");// table
var newTr = myTable.insertRow(); //table tr
/* document.getElementById("result").innerHTML = str[0]; */
for(var i=0;i
3.ajaxの段階的パラメータreadyStateの意味0-(初期化されていません)send()メソッドはまだ起動されていません.
1-(ロード)send()メソッドを呼び出しました.要求を送信しています.
2-(ロード完了)send()メソッドの実行が完了し、応答内容はすべて受信されました.
3-(インタラクティブ)応答内容を解析しています.
4-(完了)応答内容の解析が完了したら、クライアントで呼び出すことができます.
4.Servlet処理コード
request.set CharcterEnccoding(「utf-8」)
レスポンス.set CharcterEnccoding(「utf-8」)
//設定データタイプ戻りデータタイプ
reponse.set ContentType(「text/playin」)
//設定無効キャッシュ
レスポンス.set Header(「Cache-control」「no-cache」)
応答データのフォーマットはServlet設定ContentTypeで決定される.
text/xml xml
text/html html
text/plin テキスト
アプリ/Json Json