Ajax概要 - liguofeng29’s blog

Ajaxは、非同期通信を行うための仕組みであり、オブジェクトXMLHttpRequestを使い実現する。

Ajax全称

Asynchronous
Javascript
And
XML

abort() : リクエスト中止
getAllResponseHeaders() : ヘッダ取得
getResponseHeader("key") : 指定ヘッダ取得
setRequestHeader("key", "value") : ヘッダ設定
open("method", "URL", [,asyncFlg[,"username"[,"password"]]]) : 接続を確立する
send(connnet) : リクエスト送信, connectはリクエストパラメータ

openreadystatechange : 状態変更時の処理
readyState : オブジェクトの処理状態
responseText : レスポンスtext取得
responseXML : レスポンスXML取得
status : サーバ応答コード
statusText : 状態テキスト

POSTリクエスト

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>リクエスト送信</title>
<script type="text/javascript">
   // XMLHttpRequestオブジェクト
   var xmlrequest;

   // XMLHttpRequestオブジェクト生成
   function createXMLHttpRequest() {
       if (window.XMLHttpRequest) {
           // DOM2ブラウザ
           xmlrequest = new XMLHttpRequest();
       } else if (window.ActiveXObject) {
           // IE
           try {
               xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
           } catch (e) {
               try {
                   xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
               } catch (e) {
               }
           }
       }
   }
   // リクエスト送信
   function getRandomNum() {
       // XMLHttpRequest初期化
       createXMLHttpRequest();
       //var uri = "random.jsp?num=100";
       var uri = "random.jsp";
       // POSTで接続
       xmlrequest.open("POST", uri, true);
       // POSTの場合、正しくヘッダーを設置する必要がある。
       xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       // 状態変更時のイベント設定
       xmlrequest.onreadystatechange = processResponse;
       // リクエスト送信(POST時のリクエストパラメータ)
       xmlrequest.send("num=" + 100);
       // xmlrequest.send(null);
   }
   // XMLHttpRequest状態変更時の処理
   function processResponse() {
       // レスポンス読み取り終了したのか
       if (xmlrequest.readyState == 4) {
           // 応答が正常なのか
           if (xmlrequest.status == 200) {
               // 画面に表示する
               // var number = xmlrequest.responseText();
               var number = xmlrequest.responseText;
               // 将服务器的响应通过页面显示。
               document.getElementById("number").innerHTML = number;
               // 1秒後に再度リクエスト
               setTimeout("getRandomNum()", 1000);
           }
       }
   }
   // 画面ロード後の関数指定
   // document.body.onload = getRandomNum();
</script>
</head>
<!-- ランダム取得開始 -->
<body onload="getRandomNum();">
サーバから取得したランダム数字：
<div id="number" style="color: red; font-weight: bold;"></div>
</body>
</html>

random.jsp

<%@page import="java.text.ParseException"%>
<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<%@ page import="java.util.Random"%>
<%
// ランダム数字生成
Random rand = new Random(System.currentTimeMillis());

int num;
try {
    System.out.println("number : " +  request.getParameter("num"));
    num = Integer.parseInt(request.getParameter("num"));

} catch (NumberFormatException e) {
    num = 0;
}

out.println(rand.nextInt(num));
%>

f:id:liguofeng29:20160221110735g:plain

GETリクエスト

// リクエスト送信
function getRandomNum() {
    // XMLHttpRequest初期化
    createXMLHttpRequest();

    // GETメソッド時にはURLに後ろにつける (POSTもできる)
    var uri = "random.jsp?num=10";
    // POSTで接続
    xmlrequest.open("GET", uri, true);
    // 状態変更時のイベント設定
    xmlrequest.onreadystatechange = processResponse;
    // リクエスト送信(POST)
    xmlrequest.send(null);
}