<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<!-- trimDirectiveWhitespaces="false"가 기본값. 내가 만든 것이 아닌
설정에 의해서 만들어지는 공백,줄바꿈을 제거해줌. -->
Hello JSP!
s01_ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery를 이용한 비동기 통신 구현</title>
<script type="text/javascript" src="../js/jquery-3.7.1.min.js">
</script>
<script type="text/javascript">
//Ajax(Asychronous Javascript And XML) : 자바스크립트와 XML를 이용한 비동기 통신
$(document).ready(function(){
//text 정보 읽어 옴
$.ajax({
url:'myString.jsp',//서버 프로그램 호출 URL
success:function(param){ //서버의 응답이 성공(success:)해서 데이터를 전달 받으면 호출 //ajax가 불러온 데이터를 param안에 넣는다고 생각하면됨.
$('body').append(param);
}
});
});
</script>
</head>
<body>
</body>
</html>
myParam.jsp
<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<!-- contentType="text/plain;: html에서 plain으로 바뀜 전송데이터가 HTML형식이 아닌 일반 데이터 라는뜻 -->
<%
String name = request.getParameter("name");
String age = request.getParameter("age");
%>
이름은 <%= name %> 이고 나이는 <%= age %>입니다.
s02_ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery를 이용한 비동기 통신 구현</title>
<script type="text/javascript" src="../js/jquery-3.7.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
//텍스트 정보를 읽어 옴
$.ajax({
url:'myParam.jsp', //요청 URL
data:{name:'홍길동',age:21}, //서버에 전송할 데이터
success:function(param){
$('body').append(param);
}
});
});
</script>
</head>
<body>
</body>
</html>
