20211115 ajax

41기 개발자과정

20211115 ajax

segment 2021. 11. 15. 23:11

HTTP 상태코드 :

분류
1XX ( 조건부 응답)
2XX (성공)	- 클라이언트가 요청한 동작을 수신하여 이해했고 승낙했으며 성공적으로 처리
2XX (성공)	200(성공): 서버가 요청을 제대로 처리했다는 뜻이다. 이는 주로 서버가 요청한 페이지를 제공했다는 의미로 쓰인다.
3XX (리다이렉션 완료)	- 요청을 마치기 위해 추가 동작을 취해야 한다
4XX(요청오류) -	클라이언트에 오류가 있음
4XX(요청오류) -	404(Not Found, 찾을 수 없음): 서버가 요청한 페이지(Resource)를 찾을 수 없다. 예를 들어 서버에 존재하지 않는 페이지에 대한 요청이 있을 경우 서버는 이 코드를 제공한다.
5XX(서버오류)	서버가 유효한 요청을 명백하게 수행하지 못했음
5XX(서버오류)	500(내부 서버 오류): 서버에 오류가 발생하여 요청을 수행할 수 없다.

AJAX(Asynchronous Javascript And XML) : 비동기적 자바스크립트와 XML

- XML 보다는 JSON을 많이 이용한다.

- 자바스크립를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고받는 형식

- 브라우저가 가지고있는 XMLHttpRequest 객체를 활용하여 비동기화 통신을 한다.

- 페이지 이동없이 자바스크립트로 서버와 통신할 수 있다.

- 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.

페이지가 로딩될 때는 포함되지 않고. 나중에 사용자가 필요할 때 서버에서 불러온다.

1) 초반의 구글 페이지

2) 메뉴를 클릭했을 때

동기화	비동기화
-요청과 응답이 동시에 이루어 지는 방식 -클라이언트가 서버에 요청시 서버에서 응답하는 형식 -작성된 코드 순서대로 처리를 완료를 하고 이후에 클라이언트에 응답을 하는방식 -서버에서 응답이 늦어질 경우 클라이언트에서 화면출력을 대기하는 시간이 길어진다.	- 요청과 응답이 동시에 이루어 지지 않는다. - 웹페이지를 리로드하지 않고 서버와 통신하는 방식 - 클라이언트 먼저 실행 되고, 서버에서 응답이 왔을 경우 작성된 코드가 실행이 된다.

XMLHttpRequest :

XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용됩니다.

전체 페이지의 새로고침 없이도 URL 로부터 데이터를 받아올 수 있습니다. 이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줍니다.

XMLHttpRequest 는 AJAX 프로그래밍에 주로 사용됩니다.

Ajax 요청과 응답 :

- 요청 : 서버상에 존재하는 URL을 호출
- 응답 : 최종적인 데이타를 화면에 출력 (클라이언트에게 전달)

- 응답 포맷 방식 : 클라이언트(브라우저)에서 표현 가능한 포맷방식을 알아야 그 방식에 맞는 코드작성과 데이타를 포맷하여 클라이언트에 전달 할 수 있다.

- 브라우저에서 표현 가능한 대표적인 포맷방식 : html, xml, json, text
- ajax는 최종적으로 클라이언트에 표현된 데이타를 읽어 사용된다.
- ajax 통신을 하려면 화면이 2개 필요하다.
1. 사용자가 보는화면.
2. 보이지는 않지만 사용자가 입력한 데이터를 처리하는 화면.

contentType (MIME-TYPE) :

1. html -> text/html

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!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=EUC-KR">
<title>Insert title here</title>
</head>
<body>
	
</body>
</html>

-> 빈 화면 출력

2. xml -> application/xml

3. json -> application/json

4. text -> text/plain

-> 출력화면 :

JSON content Type
- application/json
- 요새 데이타 주고 받는 방식은 xml보단 json을 많이 사용한다.
- 자바스크립트의 Obejct처럼 키와 값으로 이루어져 있다.
- 열고 닫을 때 홑따옴표 작동 x, 쌍따옴표 o

- 구문 : {"key" : "value"}
- 구문 : [{"key" : "value"}, {"key" : "value"}]

Content-Type: application/json;charset=EUC-KR

json file 은 주석(<!-- --!>)을 쓸 수 없다.

https://api.jquery.com/jquery.ajax/#jQuery-ajax-url-settings

jQuery.ajax() | jQuery API Documentation

Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available

api.jquery.com

아래의 코드는 복사해서 그대로 사용한다. 외워서 사용하는 것이 아니다!

id를 데이터로 서버에 보내고 일부 데이터를 서버에 저장하고 완료되면 사용자에게 알린다.

요청이 실패하면 사용자에게 알린다.

var menuId = $( "ul.nav" ).first().attr( "id" );
var request = $.ajax({
  url: "script.php",
  method: "POST",
  data: { id : menuId },
  dataType: "html"
});
 
request.done(function( msg ) {
  $( "#log" ).html( msg );
});
 
request.fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});

JAVA COLLECTION

: 데이터의 집합.

인터페이스	구현클래스	특징
Map	Hashtable HashMap TreeMap	키(Key), 값(Value)의 쌍으로 이루어진 데이터의 집합으로, 순서는 유지되지 않으며 키(Key)의 중복을 허용하지 않으나 값(Value)의 중복은 허용한다.

출처 : [JAVA] Java 컬렉션(Collection) 정리 (tistory.com)

jsonFile.jsp - 보이지는 않지만 사용자가 입력한 데이터를 처리하는 화면.

<%@ page language="java" contentType="application/json; charset=EUC-KR"
    pageEncoding="utf-8"%>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.google.gson.Gson" %>
<%
String userId = request.getParameter("userId");

/*
	자바에서 자료구조를 다루는 자바 컬렉션 중 
	키와 값 한쌍으로 데이타를 다룰 수 있는 Map 이 있으며,
	그 일부 중 객체 대상이 HashMap 이다.
*/
	Map<String, Object> userMap = new HashMap<String, Object>();

	//생성된 객체에 첫번째 인수 -> 키, 두번째 인수 -> 값
	userMap.put("userName", "홍길동");
	userMap.put("userAge", 20);
	System.out.println(userMap.get("userName")); //키를 넣으면 값이 출력된다.
	System.out.println(userMap.get("userAge"));
	System.out.println(userId + "<<넘어온 파라미터 userId");
	
	Gson gson = new Gson();
	String json = gson.toJson(userMap);
	
	   /*json += "{";
	   json += "\"userName\"";
	   json += ":";
	   json += "\"" +userMap.get("userName")+ "\"";
	   json += ",";
	   json += "\"userAge\"";
	   json += ":";
	   json += 20;
	   json += "}"; */
	   out.println(json);


	//{"userName" : "홍길동", "userAge" : 20}
%>

1. 임포트

- 자바에서 자료구조를 다루는 자바 컬렉션 중 키와 값 한쌍으로 데이타를 다룰 수 있는 Map 이 있으며,
그 일부 중 객체 대상이 HashMap 이다.

<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>

- gson : JSON 객체를 Java 객체로, 또는 그 반대로 변환해주는 라이브러리

<%@ page import="com.google.gson.Gson" %>

2-1. userMap 생성

Map<String, Object> userMap = new HashMap<String, Object>();

2-2. 객체에 셋팅.

- Map 데이터 입력은 put() 사용

	userMap.put("userName", "홍길동");
	userMap.put("userAge", 20);
	System.out.println(userMap.get("userName")); //키를 넣으면 값이 출력된다.
	System.out.println(userMap.get("userAge"));
	System.out.println(userId + "<<넘어온 파라미터 userId");

3. userMap 를 Json 문자열로 변환

Gson gson = new Gson();
String json = gson.toJson(userMap);

ajax01.jsp 에서 input 데이터에 입력한 userId를 받아온다.

String userId = request.getParameter("userId");

출력화면 :

ajax01.jsp - 사용자가 보는 화면.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="utf-8"%>
<!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=EUC-KR">
<script type = "text/javascript" src = "<%= request.getContextPath() %>/resource/js/jquery-3.6.0.min.js"></script>
<title>ajax</title>
</head>
<body>
	<input type="text" id="userId">
	<button type="button" id="ajaxBtn">비동기 호출</button>
	
	<script type="text/javascript">
		$(function(){
			var userId = $('#userId');
			$('#ajaxBtn').click(function(){
			/*
				url 에 명시된 경로의 응답방식을 확인하고
				dataType에 응답방식에 맞는 타입을 삽입.
				
				(url에 명시된 응답방식을 dataType : ""에 명시해준다.)
			
			*/
				
				var request = $.ajax({
				  url: "<%= request.getContextPath() %>/jsonFile.jsp", //호출 경로
				  method: "POST", //호출 방식
				  data: { userId : userId.val() }, //호출 경로에 전달할 데이타(키와 값 한쌍으로 데이타 전달)
				  dataType: "json" //응답할 페이즈의 컨텍스트 타입 기입(text, xml, json, html, javascript)
				});
			
				 //정상적인 응답이 되었을 경우 실행되는 메서드
				 /*
				 	응답 페이지에서 결괏값을 읽어
				 	dataType 에 명시된 타입으로 파싱시켜 자바스크립트 객체로 변환해준다.
				 	변화된 자바스크립트 객체는 콜백 데이터로 받을 수 있다.
				 
				 */
				request.done(function(data) {
				  console.log(data, '콜백 데이타');
				});
				 
				 //정상적인 응답이 오지 않았을 경우 실행되는 메서드
				 request.fail(function( jqXHR, textStatus ) {
				  alert( "Request failed: " + textStatus );
				});
				
			});
		});
	
	</script>
	
</body>
</html>

1. gson :

Gson은 Java에서 Json을 파싱하고, 생성하기 위해 사용되는 구글에서 개발한 오픈소스입니다.

Java Object를 Json 문자열로 변환할 수 있고, Json 문자열을 Java Object로 변환할 수 있습니다.

https://github.com/google/gson

GitHub - google/gson: A Java serialization/deserialization library to convert Java Objects into JSON and back

A Java serialization/deserialization library to convert Java Objects into JSON and back - GitHub - google/gson: A Java serialization/deserialization library to convert Java Objects into JSON and back

github.com

2. gson download

3. jar 파일 다운

4. lib 아래에 붙여넣기

5. 페이지 임포트

https://www.javadoc.io/doc/com.google.code.gson/gson/latest/com.google.gson/module-summary.html

<%@ page import="com.google.gson.Gson" %>

6. 아래의 문장을 위의 것으로 대체 가능하다.

Gson gson = new Gson();
String json = gson.toJson(userMap);

   /*json += "{";
   json += "\"userName\"";
   json += ":";
   json += "\"" +userMap.get("userName")+ "\"";
   json += ",";
   json += "\"userAge\"";
   json += ":";
   json += 20;
   json += "}"; */