2012-5-30 ajax POST, GET방식으로 보내기
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xhr;
function createXhr(){
if(window.ActiveXObject){//IE6 예전버전이라면
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xhr = new XMLHttpRequest();
}
}
function getHello(){
//1.XMLHttpRequest객체 생성
createXhr();
//2.이벤트 핸들러 등록
//xhr.onreadystatechange = function(){}
xhr.onreadystatechange = callback;//callback()를 핸들러로 등록
//open()를 통해 요청관련 설정을 설정
xhr.open("GET", "../AjaxServlet?command=getHello", true);//true비동기적방식
//send()를 통해 요청
xhr.send(null);
//GET방식이기에 null 이 들어가고 POST방식이라면 url 값을 null 자리에 넣어줘야 한다.
}
function callback(){
//서버로부터 응답이 왔다면 일한다.
if(xhr.readyState==4){//응답을 다 받은 경우
if(xhr.status==200){//응답코드가 200인 경우 - OK
var resTxt = xhr.responseText;//서버가 보낸 응답
alert(resTxt);
document.getElementById("resultLayer").innerHTML = resTxt;
}else{
alert("요청처리가 정상적으로 안되었습니다.\n"+xhr.status);
}
}
}
</script>
</head>
<body>
<button id="btn" onclick="getHello()">인사말요청</button>
<div id="resultLayer"></div>
</body>
</html>
package ajax.basic;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxServlet() {
super();
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String command = request.getParameter("command");
if (command.equals("getHello")) {
getHello(request, response);
} else if (command.equals("postHello")) {
postHello(request, response);
} else if (command.equals("idcheck")) {
idcheck(request, response);
} else if (command.equals("getSubway")) {
getSubway(request, response);
}
}
protected void getSubway(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String[] seoulSubway = { "1호선", "2호선", "3호선", "4호선", "5호선", "6호선",
"7호선", "8호선", "9호선" };
String[] busanSubway = { "1호선", "2호선", "3호선", "4호선" };
String[] deguSubway = { "1호선", "2호선" };
String message = "";
String city = request.getParameter("city");
System.out.println("city : " + city);
message += "<select name='subwayLine' id='subwayLine'><option>호선선택</option>";
if (city.equals("seoul")) {
for (int i = 0; i < seoulSubway.length; i++) {
message += "<option>" + seoulSubway[i] + "</option>";
}
} else if (city.equals("busan")) {
for (int i = 0; i < busanSubway.length; i++) {
message += "<option>" + busanSubway[i] + "</option>";
}
} else if (city.equals("degu")) {
for (int i = 0; i < deguSubway.length; i++) {
message += "<option>" + deguSubway[i] + "</option>";
}
}
message += "</select>";
System.out.println("message : " + message);
// 응답 메세지1 : 사용할 수 있는 ID 입니다.
// 응답 메세지2 : 이미 등록된 ID입니다.
response.setContentType("text/html;charset=utf-8");
response.setHeader("Cache-control", "no-cache");// cache를 사용하지 않겠다. 새로운
// 값이 나오게 한다.
PrintWriter out = response.getWriter();
out.println(message);
}
// ID 중복검사 처리
protected void idcheck(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
ArrayList<String> ids = new ArrayList<String>();
ids.add("aaaaaaa");
ids.add("bbbbbbb");
ids.add("bbbbbb");
ids.add("ccccccc");
String id = request.getParameter("id");
String message = null;
if (ids.contains(id)) {
message = "<font size=2 color=red>미이 등록된 ID입니다.</font>";
} else {
message = "<font size=2 color=green>사용할 수 있는 ID입니다.</font>";
}
// 응답 메세지1 : 사용할 수 있는 ID 입니다.
// 응답 메세지2 : 이미 등록된 ID입니다.
response.setContentType("text/html;charset=utf-8");
response.setHeader("Cache-control", "no-cache");// cache를 사용하지 않겠다. 새로운
// 값이 나오게 한다.
PrintWriter out = response.getWriter();
out.println(message);
}
protected void postHello(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String lang = request.getParameter("lang");
String name = request.getParameter("name");
String str = null;
System.out.println("lang : " + lang);
if (lang.equals("kor")) {
str = "<font color=green>" + name + "님 안녕하세요 반갑습니다.</font>";
} else if (lang.equals("eng")) {
str = "<font color=green>" + name
+ " hello, nice to meet you!</font>";
} else {
str = lang + "은 알수없는 언어 입니다.";
}
response.setContentType("text/html;charset=utf-8");
response.setHeader("Cache-control", "no-cache");// cache를 사용하지 않겠다. 새로운
// 값이 나오게 한다.
PrintWriter out = response.getWriter();
out.println(str);
}
// getHello.html에서의 요청처리
protected void getHello(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
response.setHeader("Cache-control", "no-cache");// cache를 사용하지 않겠다. 새로운
// 값이 나오게 한다.
PrintWriter out = response.getWriter();
int j = (int) (Math.random() * 100);
out.println("<font color=green>안녕하세요 반갑습니다." + j + "</font>");
}
}
* 결과
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xhr;
function createXhr(){
if(window.ActiveXObject){//IE6 예전버전이라면
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xhr = new XMLHttpRequest();
}
}
function getHello(){
var langRa = document.getElementsByName("lang");
var name = document.getElementById("name").value;
name = encodeURIComponent(name);
var lang = "";
for(i=0;i<langRa.length;i++){
if(langRa[i].checked){
alert(langRa[i].value);
lang = langRa[i].value;
break;
}
}
var queryString = "command=postHello&name="+name+"&lang="+lang;
//1.XMLHttpRequest객체 생성
createXhr();
//2.이벤트 핸들러 등록
//xhr.onreadystatechange = function(){}
xhr.onreadystatechange = getGreeting;//callback()를 핸들러로 등록
//open()를 통해 요청관련 설정을 설정
xhr.open("GET", "/javascript_ajax_class/AjaxServlet?"+queryString, true);//true비동기적방식 xhr.open("GET", "../AjaxServlet?"+queryString, true);
//send()를 통해 요청
xhr.send(null);
//GET방식이기에 null 이 들어가고 POST방식이라면 url 값을 null 자리에 넣어줘야 한다.
}
function getHello2(){
var langRa = document.getElementsByName("lang");
var name = document.getElementById("name").value;
var lang = "";
for(i=0;i<langRa.length;i++){
if(langRa[i].checked){
alert(langRa[i].value);
lang = langRa[i].value;
break;
}
}
var queryString = "command=postHello&name="+name+"&lang="+lang;
//1.XMLHttpRequest객체 생성
createXhr();
//2.이벤트 핸들러 등록
//xhr.onreadystatechange = function(){}
xhr.onreadystatechange = getGreeting;//callback()를 핸들러로 등록
//open()를 통해 요청관련 설정을 설정
xhr.open("POST", "/javascript_ajax_class/AjaxServlet", true);//true비동기적방식 xhr.open("GET", "../AjaxServlet?"+queryString, true);
// Header에 contentType설정
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
//send()를 통해 요청
xhr.send(queryString);
//GET방식이기에 null 이 들어가고 POST방식이라면 url 값을 null 자리에 넣어줘야 한다.
}
function getGreeting(){
//서버로부터 응답이 왔다면 일한다.
if(xhr.readyState==4){//응답을 다 받은 경우
if(xhr.status==200){//응답코드가 200인 경우 - OK
var resTxt = xhr.responseText;//서버가 보낸 응답
alert(resTxt);
document.getElementById("resultLayer").innerHTML = resTxt;
}else{
alert("요청처리가 정상적으로 안되었습니다.\n"+xhr.status);
}
}
}
</script>
</head>
<body>
이름 : <input type="text" name="name" id="name"><br>
한글 : <input type="radio" name="lang" value="kor">
영문 : <input type="radio" name="lang" value="eng">
<br>
<input type="button" onclick="getHello()" value="인사말조회">
<input type="button" onclick="getHello2()" value="인사말조회-POST">
<div id="resultLayer"></div>
</body>
</html>
package ajax.basic;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxServlet() {
super();
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String command = request.getParameter("command");
if (command.equals("getHello")) {
getHello(request, response);
} else if (command.equals("postHello")) {
postHello(request, response);
} else if (command.equals("idcheck")) {
idcheck(request, response);
} else if (command.equals("getSubway")) {
getSubway(request, response);
}
}
protected void getSubway(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String[] seoulSubway = { "1호선", "2호선", "3호선", "4호선", "5호선", "6호선",
"7호선", "8호선", "9호선" };
String[] busanSubway = { "1호선", "2호선", "3호선", "4호선" };
String[] deguSubway = { "1호선", "2호선" };
String message = "";
String city = request.getParameter("city");
System.out.println("city : " + city);
message += "<select name='subwayLine' id='subwayLine'><option>호선선택</option>";
if (city.equals("seoul")) {
for (int i = 0; i < seoulSubway.length; i++) {
message += "<option>" + seoulSubway[i] + "</option>";
}
} else if (city.equals("busan")) {
for (int i = 0; i < busanSubway.length; i++) {
message += "<option>" + busanSubway[i] + "</option>";
}
} else if (city.equals("degu")) {
for (int i = 0; i < deguSubway.length; i++) {
message += "<option>" + deguSubway[i] + "</option>";
}
}
message += "</select>";
System.out.println("message : " + message);
// 응답 메세지1 : 사용할 수 있는 ID 입니다.
// 응답 메세지2 : 이미 등록된 ID입니다.
response.setContentType("text/html;charset=utf-8");
response.setHeader("Cache-control", "no-cache");// cache를 사용하지 않겠다. 새로운
// 값이 나오게 한다.
PrintWriter out = response.getWriter();
out.println(message);
}
// ID 중복검사 처리
protected void idcheck(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
ArrayList<String> ids = new ArrayList<String>();
ids.add("aaaaaaa");
ids.add("bbbbbbb");
ids.add("bbbbbb");
ids.add("ccccccc");
String id = request.getParameter("id");
String message = null;
if (ids.contains(id)) {
message = "<font size=2 color=red>미이 등록된 ID입니다.</font>";
} else {
message = "<font size=2 color=green>사용할 수 있는 ID입니다.</font>";
}
// 응답 메세지1 : 사용할 수 있는 ID 입니다.
// 응답 메세지2 : 이미 등록된 ID입니다.
response.setContentType("text/html;charset=utf-8");
response.setHeader("Cache-control", "no-cache");// cache를 사용하지 않겠다. 새로운
// 값이 나오게 한다.
PrintWriter out = response.getWriter();
out.println(message);
}
protected void postHello(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String lang = request.getParameter("lang");
String name = request.getParameter("name");
String str = null;
System.out.println("lang : " + lang);
if (lang.equals("kor")) {
str = "<font color=green>" + name + "님 안녕하세요 반갑습니다.</font>";
} else if (lang.equals("eng")) {
str = "<font color=green>" + name
+ " hello, nice to meet you!</font>";
} else {
str = lang + "은 알수없는 언어 입니다.";
}
response.setContentType("text/html;charset=utf-8");
response.setHeader("Cache-control", "no-cache");// cache를 사용하지 않겠다. 새로운
// 값이 나오게 한다.
PrintWriter out = response.getWriter();
out.println(str);
}
// getHello.html에서의 요청처리
protected void getHello(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
response.setHeader("Cache-control", "no-cache");// cache를 사용하지 않겠다. 새로운
// 값이 나오게 한다.
PrintWriter out = response.getWriter();
int j = (int) (Math.random() * 100);
out.println("<font color=green>안녕하세요 반갑습니다." + j + "</font>");
}
}
* 결과
