[JSP] 🔗AJAX(1)

AJAX(Asynchronous JavaScript And Xml)

---

자바스크립트와 XML을 이용한 서버프로그램의 비동기 통신
서버프로그램과 연동할 수있는 메서드 중 하나

 

전에는 폼에 내용을 넣어서 요청했었는데

자바스크립트가 주소요청을 하면 서버에서 데이터만을 받고 받아온 데이터를 화면에 갱신할 수 있다.(화면의 일부분만 갱신할 수 있다.)

 

화면이 계속 바뀌지 않는 상태에서 서버에서 데이터를 요청하면 데이터만 주고 ui는 주지않는다.

 

이때 동기 란?

 프로그램이 동작할 때 데이터를 받을 때까지 기다리는데 그 기다리는 동안 작업을 못한다. 

비동기 란?

 데이터가 올 때 까지 기다리지 않고 다음 작업을 수행한다.

데이터가 도착하면 이벤트가 발생하고 이벤트가 발생했을 때 연결된 function을 호출한다.

 

html파일로도 작성해도 되지만 보통은 jsp파일로 사용.

<--% ajax는 받자마자 객체로 생성하려고 하기 때문에 html주석을 사용하지 않는다. 대신 jsp주석을 사용한다. --%>

 

서버프로그램을 먼저 만들어보자

제이쿼리 라이브러리가 있어야 작업이 가능하므로 js폴더를 생성하고 그안에 라이브러리를 넣어준다.

 

<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>

 

$(document).ready(function () {
	$.ajax({
		url:'myString.jsp', //요청 URL
		success:function(param){ 
			$('body').append(param);
		}
	});
});

밑에있는 body를 먼저 인식하고 작업해야 하니까

$(document).ready(function () {};
$(function () {};

서버프로그램과 통신하는 코드는 위의 조건문과 같은레벨에 입력해야한다.

$.ajax({ 

객체형태(Key와Value의 쌍)로 명시

url : 'myString.jsp', 

ajax메서드가 myString.jsp를 호출해서 데이터(text)를 달라고 요청 → text정보를 받고 body 태그에 뿌림

success  :  function(parameter ) { 

이벤트종류  :  (서버의 응답이 성공했을 시)호출될function( )

    $('body ').append(param );  } 

전송받은  text를 body 태그에 표시

ajax가 중괄호 안에 있는 내용을 수행 하고 데이터를 받아서 param 에 넣어준다

});

 json파일을 만들어보자 (1) 

- contentType="text/plain;

json은 텍스트파일이므로 plain으로 넣어준다  

contentType="text/html : 태그가 없어도 html로 인식하니까, 일반 텍스트를 말하는text/plain로 수정해야함

- trimDirectiveWhitespaces="true"

Servlet로 변환되서 처리되는데 변환되는 과정에서 공백들도 같이 처리되는 문제가 있기 때문에
설정정보 때문에 생기는 공백이나 줄바꿈을 다 없애준다.

(최대한 자동제거해준다)

 

서버 프로그램> 

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%
	String name = request.getParameter("name");
	String age = request.getParameter("age");
%>
이름은 <%= name%>이고 나이는 <%=age%>살 입니다.

보낼 데이터를 가공해놓는다.

 

클라이언트 프로그램> 

	$(document).ready(function(){
        
		$.ajax({ //3.그 데이터를 ajax가 받고
			url :'myParam.jsp',//요청 URL //1.myParam.jsp'을 호출하고
			data:{name:'dragon',age:21}, //2.myParam.jsp에 이 데이터를 보내고
			
            success:function(param){ //4.받은 데이터를 ajax가 param 에 넣어준다(서버의 응답이 성공했을 때)
				$('body').append(param); //body태그에 param데이터 넣어준다
			}
            
		});
	});

data : {name:'dragon',age:21}

서버쪽에 전송할 데이터를 객체형태로 만든다.

 

실제 코드에 body태그에 아무것도 없지만 

서버프로그램에서 데이터를 받아왔기 때문에 내용이 호출된 것을 확인 할 수 있다!

원래 AJAX사용 시 시차가 있어서 바로 뜨지않는데 같은 피씨이기 때문에 속도가 빠른 것이다.

→ 로딩 바를 만든다.

 

 xml파일을 만들어보자 

이클립스가 태그에 노란줄을 표시하는 경우가 있는데 실행만 잘 된다면 무시하면 된다.

- xml선언(생략가능)

"와?사이에 공백이있으면 에러가 난다.

 

xml태그는 만들 수 없다. 속성도 추가 할 수 없다.

 

데이터를 실어 보내는 요소

 

- 최상위 태그(부모 태그) 하위에 자식 태그명시

- 태그명이 중복되면 배열로 인식

<people>
	<person>
		<name>강호동</name>
		<job>연예인</job>
		<age>40</age>
	</person>
	<person>
		<name>박미선</name>
		<job>연예인</job>
		<age>30</age>
	</person>
</people>

 

하위태그 접글할 떄

트리형태로 보여지면 xml문법에 맞게 정상적으로 작성된 것

 

클라이언트 프로그램> 

<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function () {
		//XML데이터를 읽어 옴
		$.ajax({
			url:'myXML.jsp',
			success:function(param){ //데이터를 보내는건 없는상태
				$(param).find('person').each(function() {
					let name = '<li>' + $(this).find('name').text() + '</li>';
					let job = '<li>' + $(this).find('job').text() + '</li>';
					let age= '<li>' + $(this).find('age').text() + '</li>';
					
					//body태그에 가공한 데이터를 추가
					$('body').append('<ul>'+name+job+age+'</ul>');
					
				}); 
			}
		});
	});

</script>

$( ) = 제이쿼리객체를만든다 =  제이쿼리가 제공하는메서드를 사용 할 수 있다.

 

클라이언트 프로그램 코드

① find(person)

 : find가 <person>태그를 찾는다 배열로 인식

<person>태그의 하위태그로 접근 → name, job, age

서버 프로그램 코드

② each메서드 사용 (= for문을 메서드로 구현한 것)

person은 배열로 each 메서드가 roop를 돈다.

 each메서드에 function을 넣어줌 → each(function(){});

 

③ 배열로 인식하므로 해당 객체를 access하는데

해당 객체를 마치 이벤트가 발생한 것처럼 인식하여 this라고 받는다.

(this : js에서이벤트가 발생한 태그를 this로 호출함)

(이벤트핸들러처럼 이벤트처리)

 

④ find(name) : name 태그에 접근하고

⑤ 강호동 텍스트를 읽어와야하므로 .text를 붙여준다.

실행결과

 json파일을 만들어보자 (2) 

기본적으로는 xml표기법을 쓰지만 json표기법도 많이 쓰는데, 이유는 xml표기법(기본)에 비해서 파일용량이 줄어든다

→ 전송속도가 빨라지기 때문이다.

 

HTML을 사용하는게 아니라 생성된 태그들을 지워주고

 

contentType="text/plain; ,  trimDirectiveWhitespaces="true"

 

json표기법 = 자바스크립트 객체 표기법 으로 만들어도된다.

{

Key:value,

Key:value,

}

[{
	"name":"홍길동", 
	"job":"경찰",
	"age":30
},{
	"name":"박문수", 
	"job":"소방관",
	"age":40
}]

문자열 형태는 큰따옴표(" ")로 넣어줘야한다. 작은따옴표(' ') 안됌

나열할 때  쉼표(, )로 나열한다

 

xml은 브라우저가 트리형태로 만들어져서 확인 할 수있지만,
json은 그냥 텍스트 형태로 나오기 때문에 제대로 만들어진지 브라우저가 확인할 수 없다.
때문에 s04_ajax.html(클라이언트)에서 호출해야한다.

 

클라이언트 프로그램> 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery를 이용한 비동기 통신 구현</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			url:'myJSON.jsp',
			dataType:'json',
			success:function(param){
			
				 $(param).each(function (index,item) { //each 메서드: for문을 메서드로 구현한 것
					var output = '';
					output += '<div>';
					output += '<h1>'+item.name+'</h1>';//전달받고, item.name의 키(name)로 데이터를 구한다
					output += '<p>' + item.job + '<p>';
					output += '<p>' + item.age + '<p>';
					output += '</div>';
					
					$('#output').append(output);
				});
			}
		});
	});
</script>
</head>
<body>
	<div id="output">
	</div>
</body>
</html>

$.ajax({ 옵션값 });

JSON(JavaScript Object Notation ;자바스크립트 객체 표기법)데이터를 읽어옴

xml과 다르게 json은 텍스트를 받으면 자바스크립트 객체로 만들어야한다.

dataType : 'json'

서버로부터 전송받은 데이터의 타입을 명시, "T"대문자 유의!

이걸 넣지 않으면 일반텍스트처럼 처리한다.

이제 json이 되었으므로 key를 통해서 value 를 구할 수 있다.

 

param이 배열이니까 each 메서드를 동작을 시킨다

( each 메서드 = for문을 메서드로 구현한 것)

$(param).each(function (index,item) {});

  - index: 배열의 인덱스
  - item: 배열 요소의 값인 중괄호 형태의 객체들을 전달받는다 

item을 통해서 객체에 접근하고, 객체가 가지고있는 key를 통해 value를 구한다.

var  output  = '';
output  += '<div>';
output  += '<h1>'+item.name+'</h1>'; 
output  += '<p>' + item.job + '<p>';
output  += '<p>' + item.age + '<p>';
output  += '</div>';

가공된 데이터를 div에 추가
$('#output').append(output);

<body>
<div id="output"></div>
</body>

출력 결과

문자열을 만들때 실수하지 않기 위해서 자동으로 문자열을 만들어주는 외부 라이브러리를 쓰는게 좋음.