12_ajax_test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Test</title>
</head>
<body>
<h1>Get Request</h1>
<button type="button" onclick="sendRequest(1)">send(GET)</button>
<p id="gettext"></p>
<h1>Post Request</h1>
<button type="button" onclick="sendRequest(2)">send(Post)</button>
<p id="posttext"></p>
<hr>
<h3>Request Status</h3>
<p id="statustext"></p>
</body>
<script>
function sendRequest(typ){
console.log("request type : " + typ);
//1.XMLHttpRequest 생성
var hr = new XMLHttpRequest();
//2.Request 방식에 따라 jsp 호출
if(typ == 1) //Get
{
hr.open("Get", "12_ajax_response.jsp?city=Paris&zipcd=34576", true);
hr.send();
document.getElementById("statustext").innerHTML = "[Get] 요청했으니 좀 참고 기다리세요";
}
else{ //Post
hr.open("Post", "12_ajax_response.jsp", true);
hr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
hr.send("city=Paris&zipcd=62352");
document.getElementById("statustext").innerHTML = "[Post] 요청했으니 좀 참고 기다리세요";
}
//3. 데이터가 도착하면 할 일을 기술
hr.onreadystatechange = function(){
console.log("readystate changed : " + hr.readyState + "-" + hr.status);
//데이터 도착 완료시
if(hr.readyState == XMLHttpRequest.DONE && hr.status == 200){
if(typ == 1){
document.getElementById("gettext").innerHTML = hr.responseText;
}
else{
document.getElementById("posttext").innerHTML = hr.responseText;
}
document.getElementById("statustext").innerHTML = "끝";
}
}
}
</script>
</html>
12_ajax_response.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Response</title>
</head>
<body>
<%
String city = request.getParameter("city");
String zipcd = request.getParameter("zipcd");
try{
Thread.sleep(3000);
}
catch(Exception ex)
{
ex.printStackTrace();
}
out.println("도시 :" + city );
out.println("<br>");
out.println("우편번호 : " + zipcd);
%>
</body>
</html>
'자바 공부 > [자바] 기본 공부' 카테고리의 다른 글
| [Node.js 1일차] Node.js 환경 구축 (1) | 2024.11.27 |
|---|---|
| [AJAX] Json 데이터 불러오기 (0) | 2024.11.26 |
| [JSP 공부 5일차] 세션 (0) | 2024.11.26 |
| [JSP 공부 4일차] 액션 태그, 쿠키 (0) | 2024.11.25 |
| [JSP 3일차] 디렉티브 태그와 인클루드 태그 (0) | 2024.11.21 |