<!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 idCheck(){ var id = document.getElementById("id").value; var queryString;
if(id.length<6){ document.getElementById("idcheckLayer").innerHTML = "ID는 6자리 이상 넣으세요."; return; } queryString ="command=idcheck&id="+id; //1.xhr 생성 createXhr(); //2. callback함수 등록 xhr.onreadystatechange = checkId; //3.open() xhr.open("POST","/javascript_ajax_class/AjaxServlet",true); //4.Post방식 설정 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8"); //5.send() xhr.send(queryString);
} function checkId(){ //서버로부터 응답이 왔다면 일한다. if(xhr.readyState==4){//응답을 다 받은 경우 if(xhr.status==200){//응답코드가 200인 경우 - OK var resTxt = xhr.responseText;//서버가 보낸 응답 // alert(resTxt); document.getElementById("idcheckLayer").innerHTML = resTxt; }else{ alert("요청처리가 정상적으로 안되었습니다.\n"+xhr.status); } } } </script> </head> <body> ID : <input type="text" name="id" id="id" onkeyup="idCheck()"> <span id="idcheckLayer"></span> </body> </html>
if(command.equals("getHello")){ getHello(request,response); }else if(command.equals("postHello")){ postHello(request,response); }else if(command.equals("idcheck")){ idcheck(request,response); } } //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(){ //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>
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);
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>
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);
• Call Back 함수 – 서버가 보낸 응답을 처리할 함수 – 서버와의 송수신 상태에 따라 Web Browser가 호출 – 개발자는 call back 함수를 정의 하고 XMLHttpRequest를 통해 등록 • Call Back 함수 등록 – xhr.onreadystatechange = call back 함수 – onreadystatechange : request에 대한 상태가 변화할 때 마다 call back 함수를 호출 한다. • Call Back 함수 구현 – 서버와의 연결 상태 변화 체크 • readyState == 4 – 응답 status 체크 • status == 200 • 서버의 응답 데이터 읽기 • TEXT 응답 – XMLHttpRequest객체.responseText • xml 형식 응답 – XMLHttpRequest객체.responseXML
