2013년 5월 9일 목요일

[ajax] 입문 예제(servlet 사용)

<test.html>
------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sending Request Data Using GET and POST</title>
<script type="text/javascript">
var xmlHttp;
/*
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
*/

function createXMLHttpRequest() {
   if (window.ActiveXObject) {
       try {
           return new ActiveXObject("Msxml2.XMLHTTP");//IE 상위 버젼
       } catch (e1) {
           try {
               return new ActiveXObject("Microsoft.XMLHTTP");//IE 하위 버젼
           } catch (e2) {
               return null;
           }
       }
   } else if (window.XMLHttpRequest) {
       return new XMLHttpRequest();//IE 이외의 브라우저(FireFox 등)
   } else {
       return null;
   }
}// XMLHttpRequest 객체 얻기

function createQueryString() {
var firstName = document.getElementById("firstName").value;
var middleName = document.getElementById("middleName").value;
var birthday = document.getElementById("birthday").value;

var queryString = "firstName=" + firstName + "&middleName="
+ middleName + "&birthday=" + birthday;

return queryString;
}

function doRequestUsingGET() {
alert("doRequestUsingGET");
xmlHttp = createXMLHttpRequest();

var queryString = "ajaxResponseTestServlet?";
queryString = queryString + createQueryString() + "&timeStamp="
+ new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", queryString, true);
xmlHttp.send(null);
}

function doRequestUsingPOST() {
alert("doRequestUsingPOST");
xmlHttp = createXMLHttpRequest();

var url = "ajaxResponseTestServlet?timeStamp=" + new Date().getTime();
var queryString = createQueryString();

xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded;charset=utf-8");            
                                                                  → 한글 때문에
xmlHttp.send(queryString);
}

function handleStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
parseResults();
}
}
}

function parseResults() {
var responseDiv = document.getElementById("serverResponse");
if (responseDiv.hasChildNodes()) {
responseDiv.removeChild(responseDiv.childNodes[0]);
}

var responseText = document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);
}
</script>
</head>
<body>
<h1>Enter your first name, middle name, and birthday:</h1>

<table>
<tbody>
<tr>
<td>First name:</td>
<td><input type="text" id="firstName"/></td>
</tr>
<tr>
<td>Middle name:</td>
<td><input type="text" id="middleName"/></td>
</tr>
<tr>
<td>Birthday:</td>
<td><input type="text" id="birthday"/></td>
</tr>
</tbody>

</table>

<form action="#">
<input type="button" value="Send parameters using GET"
onclick="doRequestUsingGET();" />

<br />
<br />
<input type="button" value="Send parameters using POST"
onclick="doRequestUsingPOST();" />
</form>
<br />
<h2>Server Response:</h2>
<div id="serverResponse"></div>
</body>
</html>
------------------------------------------------------------
인터넷에서 사용하는 소스를 가지고 테스트를 했는데, 왜 에러가 나는거니..
(어쨌든 수정 후, 테스트 완료!)


<ajaxResponseTestServlet>
eclipse juno version은 web.xml이 없다.
servlet을 생성하고 한참 web.xml을 찾았는데 java파일을 보니 annotation 마크와 함께 뭔가가 생성. (익숙했던 방법이 아니라 멍....;;)
------------------------------------------------------------

package test;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ajaxResponseTestServlet
 */
@WebServlet("/ajaxResponseTestServlet")
public class ajaxResponseTestServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void processRequest(HttpServletRequest request,
HttpServletResponse response, String method)
throws ServletException, IOException {

// Set content type of the response to text/xml
response.setContentType("text/xml");
response.setCharacterEncoding("utf-8"); → 한글 때문에

// Get the user's input
String firstName = request.getParameter("firstName");
String middleName = request.getParameter("middleName");
String birthday = request.getParameter("birthday");

// Create the response text
String responseText = "Hello " + firstName + " " + middleName
+ ". Your birthday is " + birthday + "." + " [Method: "
+ method + "]";

// Write the response back to the browser
PrintWriter out = response.getWriter();
out.println(responseText);
// Close the writer
out.close();
}

/**
* @see HttpServlet#HttpServlet()
*/
public ajaxResponseTestServlet() {
super();
// TODO Auto-generated constructor stub
}

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
*      response)
*/
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("GET");
processRequest(request, response, "GET");
}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
*      response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("POST");
processRequest(request, response, "POST");
}

}
------------------------------------------------------------

댓글 없음:

댓글 쓰기