基本上 和
不過在index.html 方面改用 XMLHttpRequest 呼叫server
範例網站
http://6.latest.catontest.appspot.com/例子這裡就簡單的介紹三個功能
- 新增
- 查詢所有
- 和更新三個功能
js 檔案格式如下
//-----------------------------------------------------// 宣告 set httprequest by explorer //-----------------------------------------------------XmlsReq = false;
if(window.XMLHttpRequest) {
XmlsReq = new XMLHttpRequest();
} else if(window.ActiveXObject) {
try {
XmlsReq = new ActiveXObject("Msxml2.XMLHTTP"); // ie
} catch(e) {
XmlsReq = new ActiveXObject("Microsoft.XMLHTTP"); // ie
}
}
//---------------------------------------------------------- // 新增 PostHttpRequestAdd() //---------------------------------------------------------- function PostHttpRequestAdd() {
// servlet name 記得要在web.xml 設定 var uri='add';
// 連接成功傳回訊息 XmlsReq.onreadystatechange=function() {
if (XmlsReq.readyState==4 && XmlsReq.status == 200) {
alert(XmlsReq.responseText);
}
}
// 取得輸入檔案的值 var aUserName = document.getElementById('aUserName').value;
var aUserPassword =document.getElementById('aUserPassword').value;
var aUserContent= document.getElementById('aUserContent').value;
// 設定要傳到server的值 var param = "aUserName="+aUserName+"&aUserPassword="+aUserPassword+"&aUserContent="+aUserContent;
// 以POST 方式 像server 傳送資料 XmlsReq.open("POST",uri,true);
XmlsReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XmlsReq.send(param);
}
2. 查詢所有
//---------------------------------------------------------- // 新增 GetHttpRequestShow() //---------------------------------------------------------- function GetHttpRequestShow() {
// servlet name 記得要在web.xml 設定 var uri='show';
// 連接成功傳回訊息 XmlsReq.onreadystatechange=function() {
if (XmlsReq.readyState==4 && XmlsReq.status == 200) {
alert(XmlsReq.responseText);
}
}
// 以GET方式 像server 傳送資料 XmlsReq.open("GET",uri,true);
XmlsReq.send(null);
}
//---------------------------------------------------------- // 新增 PostHttpRequest() //---------------------------------------------------------- function PostHttpRequest() {
// servlet name 記得要在web.xml 設定 var uri='update';
// 連接成功傳回訊息 XmlsReq.onreadystatechange=function() {
if (XmlsReq.readyState==4 && XmlsReq.status == 200) {
alert(XmlsReq.responseText);
}
}
// 取得輸入檔案的值 var uUserName = document.getElementById('uUserName').value;
var uUserPassword =document.getElementById('uUserPassword').value;
var uUserContent= document.getElementById('uUserContent').value;
// 設定要傳到server的值 var param = "uUserName="+uUserName+"&uUserPassword="+uUserPassword+"&uUserContent="+uUserContent;
// 以POST 方式 像server 傳送資料 XmlsReq.open("POST",uri,true);
XmlsReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XmlsReq.send(param);
}
三個功能的 server 端 檔案如下
//-----------------------------------------------------// add.java //-----------------------------------------------------import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import java.util.List;
import javax.jdo.PersistenceManager;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import jdo.cookie.example.PMF;
import jdo.cookie.example.User;
@SuppressWarnings("serial")
public class add extends HttpServlet {
public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws IOException {
/// get content
String UserName = req.getParameter("aUserName");
String UserPassword = req.getParameter("aUserPassword");
String UserContent = req.getParameter("aUserContent");
System.out.println(UserName);
/// Set new user
User newUesr=new User(UserName,UserPassword,UserContent );
/// Get Persistence Manager
PersistenceManager pm = PMF.get().getPersistenceManager();
/// check the name is already exist
String query = "select from " + User.class.getName() + " where Name == "+ "'"+UserName+"'";
List
UserAll = (List) pm.newQuery(query).execute();
/// declare the output function,
/// out.println the html code in the client browser
PrintWriter out = resp.getWriter();
if(UserAll.isEmpty()){
out.println(newUesr.GetName());
/// add user in data store
pm.makePersistent(newUesr);
out.println("Success");
}
else
{
out.println("already exist");
}
}
}
//-----------------------------------------------------
// show.java
//-----------------------------------------------------
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.jdo.PersistenceManager;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import jdo.cookie.example.PMF;
import jdo.cookie.example.User;
@SuppressWarnings("serial")
public class show extends HttpServlet{
public void doGet(HttpServletRequest req, HttpServletResponse resp)
throws IOException {
/// set response type
resp.setContentType("text/plain");
/// get Persistence Manager
PersistenceManager pm = PMF.get().getPersistenceManager();
/// set query String
String query = "select from " + User.class.getName() ;
/// start query
List userAll = (List) pm.newQuery(query).execute();
/// declare the output function,
/// out.println the html code in the client browser
PrintWriter out = resp.getWriter();
/// check the data is exist or not
if(userAll.isEmpty()){
out.println("no data exist");
}
else
{
/// print all data name and content
for (User g : userAll) {
resp.getWriter().println(g.GetName()+" :"+" Content ="+g.GetContent());
}
}
}
}
//-----------------------------------------------------
// update .java
//-----------------------------------------------------
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.jdo.PersistenceManager;
import javax.jdo.Transaction;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import jdo.cookie.example.PMF;
import jdo.cookie.example.User;
public class update extends HttpServlet {
public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws IOException {
/// set response type
resp.setContentType("text/html;charset=UTF-8");
req.setCharacterEncoding("UTF-8");
/// get content
String UserName = req.getParameter("uUserName");
String UserPassword = req.getParameter("uUserPassword");
String UserContent = req.getParameter("uUserContent");
System.out.println(UserName);
/// get Persistence Manager
PersistenceManager pm = PMF.get().getPersistenceManager();
/// check the name is already exist
String query = "select from " + User.class.getName() + " where Name == "+ "'"+UserName+"'";
List UserAll = (List) pm.newQuery(query).execute();
/// declare the output function,
/// out.println the html code in the client browser
PrintWriter out = resp.getWriter();
/// declare Transaction when you update
Transaction tx = pm.currentTransaction();
try {
tx.begin();
/// get the User you want update
Iterator iter=UserAll.iterator();
User my_obj=(User)iter.next();
if (my_obj.GetPassword().equals(UserPassword))
{
my_obj.SetContent(UserContent); // Change the value
out.println("OK");
/// must be commit or will be do nothing
tx.commit();
}
}
catch (Exception e)
{
/// when no this data
if (tx.isActive())
{
out.println("sorry retry again");
tx.rollback();
}
}
}
}
