2012-5-30 ajax를 활용한 지하철 노선도 검색[select]사용
<!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 getSubwayLine(){
var sel = document.getElementById("city");
var city = sel.options[sel.selectedIndex].value;
//sel.value로 값을 받아 올 수는 있지만 option value가 없는 경우는 안되므로 잘 사용하지 않는다.
var queryString = "command=getSubway&city="+city;
//1.XMLHttpRequest객체 생성
createXhr();
//2.이벤트 핸들러 등록
//xhr.onreadystatechange = function(){}
xhr.onreadystatechange = SubwayLine;//callback()를 핸들러로 등록
//open()를 통해 요청관련 설정을 설정
xhr.open("GET", "/javascript_ajax_class/AjaxServlet?"+queryString, true);//true비동기적방식 xhr.open("GET", "../AjaxServlet?"+queryString, true);
//send()를 통해 요청
xhr.send(null);
}
function SubwayLine(){
//서버로부터 응답이 왔다면 일한다.
if(xhr.readyState==4){//응답을 다 받은 경우
if(xhr.status==200){//응답코드가 200인 경우 - OK
var resTxt = xhr.responseText;//서버가 보낸 응답
// alert(resTxt);
document.getElementById("subwayline").innerHTML = resTxt;
}else{
alert("요청처리가 정상적으로 안되었습니다.\n"+xhr.status);
}
}
}
</script>
</head>
<body>
<select name="city" id="city" onchange="getSubwayLine()">
<option>도시선택</option>
<option value="seoul">서울</option>
<option value="busan">부산</option>
<option value="degu">대구</option>
</select>
<span id="subwayline"></span>
</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);
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>");
}
}
* 결과
