程序1 簡單的ajax代碼框架 *******************************
package com.tarena.ajax;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ajaxServlet extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=gbk");
PrintWriter out = response.getWriter();
out.println("Hello Ajax 我來了");
out.flush();
out.close();
}
}
http://127.0.0.1:8080/jsp-app/servlet/ajaxServlet
///////////////////////////////////////////////
http://127.0.0.1:8080/jsp-app/ajax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax.html</title>
</head>
<script>
function ajaxtest(){
//ajax 編程模式
var oajax;
var data=document.getElementById("data");
//////////////////////////////
try{
oajax=new XMLHttpRequest();
data.innerHTML="<B>標準方式</B>";
}catch(e){
try{
oajax=new ActiveXObject("Microsoft.XMLHTTP");
data.innerHTML="<B>MS方式</B>";
}catch(me){
data.innerHTML="<B>false</B>";
}
}
//
oajax.open("get","http://127.0.0.1:8080/jsp-app/servlet/ajaxServlet");
data.innerHTML="打開連接成功";
//
//oajax.onreadystatechange=deal;
oajax.onreadystatechange=function(){
var state=oajax.readyState;
//if(state==4){data.innerHTML="服務器處理完畢";}
switch(state){
case 0:break;
case 1:break;
case 2:break;
case 3:data.innerHTML="數據發送...";break;
case 4:var txt=oajax.responseText;data.innerHTML=txt;break;
}
};
//
oajax.send(null);
data.innerHTML="發送完畢";
//
}
function deal(){
data.innerHTML="響應";
}
</script>
<body>
<button οnclick="ajaxtest();">
測試test
</button>
<!-- test -->
<div id="data"></div>
</body>
</html>
程序2 ajax的多種參數傳遞方式演示 *********************************************
package com.tarena.ajax;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TableServlet extends HttpServlet {
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String querystring=request.getQueryString();
String key1=request.getParameter("key1");
String key2=request.getParameter("key2");
String code=request.getHeader("mycode");
//String usernamepassword=request.getHeader("A");
response.sendError(602, "my err 602");
BufferedReader reader=request.getReader();
String body="";
String temp="";
while((temp=reader.readLine())!=null){
body=body+temp;
}
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
out.println("<table border=1>");
out.println("<tr");
out.println("<td>學號</td><td>姓名</td>");
out.println("</tr");
out.println("<tr");
out.println("<td>"+key1+"</td><td>"+key2+"</td>");
out.println("</tr");
out.println("<tr");
out.println("<td>"+body+"</td><td>"+code+"</td>");
out.println("</tr");
out.println("</table>");
out.flush();
out.close();
}
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>query.html</title>
<script type="text/javascript">
function query(){
var aj=new XMLHttpRequest();
var inf=document.getElementById("info");
inf.innerHTML="正在查詢。。。。";
aj.open("post","http://127.0.0.1:8080/jsp-app/servlet/TableServlet?key1=value1001&key2=ren",
true,"Louis","123abc");
aj.setRequestHeader("mycode","code123");
aj.onreadystatechange=function(){
if(aj.readyState==4){
//inf.innerHTML=aj.responseText;
var sta=aj.statusText;
inf.innerHTML=sta;//顯示 my err
}
}
//aj.send(null);
aj.send("<stu><name>hello,i am ren</name></stu>");
}
</script>
</head>
<body>
<center>
<h1>
學生明細查詢
</h1>
<hr>
<input type="button" value="查詢" οnclick="query();">
<div id="info" style="width: 300; height: 200;">
查詢結果
</div>
</center>
</body>
</html>
程序3 ajax實用案例 ***********************************************
<input type="button" value="Other!" οnclick="selectP(4);" />
function selectP(a){
alert(a);
var aj=new XMLHttpRequest();
var inf=document.getElementById("data");
aj.open("post","http://127.0.0.1:8080/shopcart/servlet/SelectP?key1="+a,
true);
aj.onreadystatechange=function(){
if(aj.readyState==4){
inf.innerHTML=aj.responseText;
}
}
aj.send(null);
}