Ajaxの初期使用
1672 ワード
What is Ajax?
AjaxはAsynchronous JavaScript and XMLと呼ばれていますが、実は新しい技術を使っていません.JavaScript技術とXMLを結合し、発展させ、Webアプリケーションをより効率的かつ迅速にします.
Why use Ajax?
B/S構造の不足
l表現力は比較的に弱くて、C/S構造の中のクライアントプログラムに比べて、ブラウザの表現力はたくさん食べます
l効率は比較的に低く、毎回の「要求」--「応答」の過程で、多くのデータが重複している.
Ajaxはある程度の問題を解決できる
How to use Ajax?
l Ajaxの動作原理
ページにJavaScriptを埋め込み、その内蔵オブジェクトXMLHttpRequestを介してサーバにデータを送信します.サーバが処理した後に返されるのはXMLデータで、最後にローカルページでローカルリフレッシュを行います.
l Simple Example
1.jsp
server.jsp
効果:
クリックするとページが更新されず、ボタンの下にHelloWorldが表示されます.これがAjaxの最も簡単なアプリケーションです.
AjaxはAsynchronous JavaScript and XMLと呼ばれていますが、実は新しい技術を使っていません.JavaScript技術とXMLを結合し、発展させ、Webアプリケーションをより効率的かつ迅速にします.
Why use Ajax?
B/S構造の不足
l表現力は比較的に弱くて、C/S構造の中のクライアントプログラムに比べて、ブラウザの表現力はたくさん食べます
l効率は比較的に低く、毎回の「要求」--「応答」の過程で、多くのデータが重複している.
Ajaxはある程度の問題を解決できる
How to use Ajax?
l Ajaxの動作原理
ページにJavaScriptを埋め込み、その内蔵オブジェクトXMLHttpRequestを介してサーバにデータを送信します.サーバが処理した後に返されるのはXMLデータで、最後にローカルページでローカルリフレッシュを行います.
l Simple Example
1.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>Ajax Simple Example</title>
</head>
<script type="text/javascript">
var req;
function test() {
req = new ActiveXObject('Microsoft.XMLHTTP');
req.open('get','server.jsp',true);
// URL true
req.onreadystatechange=callback; //
req.send(null); //
}
function callback() {
var state = req.readyState;
if (state == 4) { //
var data = req.responseText;
fillinfo(data);
}
}
function fillinfo(message) {
var info = document.getElementById("info");
info.innerHTML = message;
}
</script>
<body>
<input type="button" value="click" onclick="test()">
<div id="info"></div>
</body>
</html>server.jsp
<%
out.println("HelloWorld");
%>効果:
クリックするとページが更新されず、ボタンの下にHelloWorldが表示されます.これがAjaxの最も簡単なアプリケーションです.