Ajax入門例子
Ajax的入門例子不少，這裡也寫一個湊個熱鬧。
1）最核心的ajax.js檔案SRC
/**
* Create HTTPRequest
*
* @sample oj = createHttpRequest()
* @return HTTPRequest
**/
function createHttpRequest(){
if(window.ActiveXObject){
//Win e4,e5,e6
try {
return new ActiveXObject("Msxml2.XMLHTTP") ;
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP") ;
} catch (e2) {
return null ;
}
}
} else if(window.XMLHttpRequest){
//Win Mac Linux m1,f1,o8 Mac s1 Linux k3?p
return new XMLHttpRequest() ;
} else {
return null ;
}
}
// httpReqeust send function
//
// @sample sendRequest(onloaded,'&prog=1','POST','./about2.jsp',true,true)
// @param callback received to callback function name
// @param data request Data (&Name1=Value1&Name2=Value2...)
// @param method "POST" or "GET"
// @param url URL
// @param async async= true sync=false
// @param sload
// @param user
// @param password
function sendRequest(callback,data,method,url,async,sload,user,password){
//XMLHttpRequest
var oj = createHttpRequest();
if( oj == null ) return null;
//URL Data Encode
data = uriEncode(data)
if(method.toUpperCase() == 'GET') {
url += data
}
//Open http Connection
oj.open(method,url,async,user,password);
//Header Encode
setEncHeader(oj)
//Send request
oj.send(data);
//Decode result
var res ;
oj.onreadystatechange = function (){
if (oj.readyState == 4) {
res = decodeURIComponent(oj.responseText)
callback(res);
}
}
return res;
///////////Private Function Area///////////////
/**
* HttpRequest Header setting
**/
function setEncHeader(oj){
var contentTypeUrlenc = 'application/x-www-form-urlencoded; charset=UTF-8';
if(!window.opera){
oj.setRequestHeader('Content-Type',contentTypeUrlenc);
} else {
if((typeof oj.setRequestHeader) == 'function')
oj.setRequestHeader('Content-Type',contentTypeUrlenc);
}
return oj
}
function uriEncode(data){
if(data!=""){
//encode
var encdata = '';
var datas = data.split('&');
for(i=1;i<datas.length;i++){
var dataq = datas[i].split('=');
encdata += '&'+encodeURIComponent(dataq[0])+'='+encodeURIComponent(dataq[1]);
}
} else {
encdata = "";
}
return encdata;
}
return oj
}
2)jsp程式碼
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<html>
<head>
<title>Dynamic Column</title>
<script type="text/javascript" src = "ajax.js"></script>
<script language="javascript">
function setAjax(result){
document.all("testFrm:ajaxTxt").value=result;
document.all("testFrm:ajaxTxt").style.color="green";
}
function getValue(){
var rst =sendRequest(setAjax,"","POST","ajaxServerlet.jsp",true,true,true);
}
</script>
<body>
<B>AJAX SAMPLE</B>
onblur AJAX:<input type=text value=""id="ajaxTxt" onblur="getValue()" style="width:120px;color:red"/>
</body>
</html>
3)Servlet程式碼
非常簡單的例子，也是一個jsp檔案：
<%
System.out.println("AJAX Servlet Run!");
out.println(new Date().getTime());
%>