這兩天剛好踹到AJAX與Axis(Java的Web Services套件), 就把整合一個sample套餐如下:
下載材料:prototype.js, Axis套件(axis-bin-1_4.zip)
下載廚具:Java Web Server(如Tomcat, OC4J...)本人用OC4J 10.1.13
料理砧板:NotePad就行(我用高級一點的EditPlus)
1.Axis套件解壓縮,取出webapps目錄下的Axis子目錄(相當於一個WAR),copy到 Web Server放Application目錄下備用(Web Server如何新增一個Web Context自行參考說明)
2.寫個Java Web Service, 叫Hello.jws(副檔名一定要叫jws), 如下
public class Hello {
public String say(String name, int age) {
return "Hello! " + name + " " + age;
}
}
料理完畢後,請將Hellow.jws放在axis目錄下
3.寫個HTML,做測試Ajaxis之用,代碼如下:
<HTML>
<HEAD>
<TITLE> Test Ajaxis </TITLE>
</HEAD>
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="./ajaxis.js"></script>
<BODY>
Name: <INPUT TYPE="text" NAME="Name" size=10/>
Age: <INPUT TYPE="text" NAME="Age" size=5/>
<INPUT TYPE="button" value="詢問" onClick="callAjaxis()"><p>
<TEXTAREA NAME="msg" ROWS="20" COLS="80"></TEXTAREA>
</BODY>
</HTML>
紅字必須排在藍字之前.
4.寫個Java Script透過Ajax去call webservices, 名叫ajaxis.js
function callAjaxis() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var url = "http://localhost:8888/axis/Hello.jws?method=say&name=" + name + "&age=" + age;
new Ajax.Request(url, { method: 'get',onComplete: handleAjaxis });
}
function handleAjaxis(httpObj) {
document.getElementById("msg").value = httpObj.responseText;
}
5.記得html, prototype.js與ajaxis.js要放在同一個目錄,用IE開啟html,輸入Name, Age, 按[詢問], 它會執行ajaxis.js的callAjaxis, 回傳值會經由指定的function(handleAjaxis)取得放在名為msg的textArea, 會有一堆討厭的soap tag, 可以改良使用DOM去取得所需要的資訊.