JAVA개념&실습

WEB : [0619] AJAX 04

u_SZero 2023. 8. 22. 19:28

! 배워가고 있는 주인장이 쓴 글이니 정보의 정확성에 유의해주시기 바랍니다 !

AjaxJquery04

$.ajax(
{
   type: "POST"                                     // 데이터 전송 및 페이지 요청 방식
   , url: "AjaxTest01_ok.jsp"                // 데이터 전송 및 요청 URL
   , data: params                                   // AjaxTest01_ok.jsp 에서 수신하게 되는 데이터
   , success: 동작                                  // 데이터 요청 및 전달이 성공했을 때 처리
   , beforeSend: 반환값확인                  // 요청 전 확인해야 할 항목 처리(true/false)
   , error: 동작                                        // 처리 과정에서 문제가 발생했을 때
});

■■■ JSON(JavaScript Object Notation) ■■■

 

더보기

○ JSON(JavaScript Object Notation) 이란?

   - Javascript Object Notation, RFC 4627
   - Javascript 구문 형식을 따르며, 언어나 플랫폼에 독립적
   - 미디어 타입 : 'application/json'
   - 표현 가능한 자료형
     : object, array, string, number, boolean, null

○ 개요

   JSON(JavaScript Object Notation)은
   네트워크 상에서(대표적으로 인터넷 상에서) 데이터를 주고 받을 때,
   그 데이터를 표현하는 방법이다.
   자료의 종류에 큰 제한은 없으며
   특히 프로그램의 변수 값을 표현하는데 적합하다.

   JSON(JavaScript Object Notation)은
   경량 데이터 교환 방식으로 사람이 읽고 쓰기에 용이하며,
   기계가 분석하고 생성하는 과정도 비교적 단순하고 용이하다.
   Javascript Programming Language, Standard ECMA-626 3rd Edition
   의 일부에 토대를 두고 있으며
   JSON은 완벽하게 언어로부터 독립적이지만
   C 계열 언어, 자바, 자바스크립트 등 다수 개발자들에게
   매우 친숙한 관습을 사용하는 텍스트 형식이다.
   이와 같은 특성들로 인해 JSON은 이상적인 데이터 교환 언어로 사용되고 있다.

※ JSON은 문자열 형식이기 때문에 네트워크 전송 시 유리하다.(유용하다.)
   데이터에 접근하기 위해서는 Native JSON 객체로 변환해야 한다.
   (Javascript 는 JSON 전역 객체를 통해 문자열과 JSON 객체의 상호 변환을 지원한다.)

※ 문자열에서 Native Object 로 변환하는 것을 파싱(Parsing)이라 한다.
   네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은
   문자열화(Stringfication)라고 한다.

○ 특징(※ JSON의 특징은... 곧 XML 의 단점 → 속도, 데이터 크기)

   ① 경량 데이터 교환 방식
   ② 데이터 표현이 단순하고 직관적
   ③ Javascript 에서 eval() 을 통해 parsing 가능
      - 라이브러리 필요 없음(예외의 경우도 존재함)
      - 크로스 브라우저 호환 문제 없음

○ 구조

   JSON 은 두 개의 구조를 기본으로 두고 있다.

   - name / value 형태의 쌍으로 collection 타입
     다양한 언어들에서 object, record, struct(구조체), hashtable, 
     키가 존재하는 list, 연상 배열 등으로 실현되었다.
   - 값들의 순서화된 리스트
     대부분의 언어들에서 array, vector, list, sequence 등으로 실현되었다.

○ 참조 페이지
   JSON 공식 홈페이지

   - http://www.json.org

○ JSON 의 기본 문법 (※ http://www.json.org/json-ko.html → 설명문서 참조)

   ① 표현하고자 하는 데이터는 『{ }』로 감싼다.
   ② 데이터는 『name:value』 형식으로 표현.
   ③ 각각의 값들은 『,』로 구분한다.
   ④ name 은 『""』로 감싸거나 그냥 사용해도 무방하다.
      - 『"user":"양연수"』 또는 『user:"양연수"』
   ⑤ value 는 string, number, 배열, true, false, null 등
      - string 은 『""』로 감싼다.
      - 배열은 『[ ]』로 값들을 감싼다.

   1) 프로퍼티 ↔ 값
      var obj = 
      {
          "프로퍼티명" : "값"
      }

   2) 메소드
      var obj =
      {
          "메소드명" : function() {...}
      }

   3) 메소드(인수)
      var obj =
      {
          "메소드명" : function(인수) {...}
      }

 ○ JSON 의 데이터 타입(자료형)
    - string
    - number
    - boolean
    - null
    - array
    - object

    ※ JSON Object 의 각 프로퍼티 자료형은
       『typeof』를 통해 확인이 가능하다.

    - string
      ·string 은 큰 따옴표 안에 둘러싸인 zero 이상의 유니코드 문자들의 조합이며,
        backslach escape 가 적용된다.
      ·하나의 문자(character)도 하나의 문자열(character string)로 표현된다.
      ·문자열은 반드시 이중인용부호 『""』로 감싸준다.
      ·모든 문자를 \uxxxx (\u에 이어 4자리의 16진수로 표현한 unicode)로 표현 가능.
      "가나다" → 단순 문자열
     "\uAC00\uB098\uB2E4" → escape 표기한 "가나다" 문자열
     "too\\bar\n" → backslash(\\)와 개행(\n)

    - number
      ·number 은 8진수나 16진수 형식을 사용하지 않는다.
      ·정수, 실수 모두 처리가 가능하다.
      ·정수와 부동소수점 포함, 10진 표기로 한정한다.
       10 → 정수 값
       -10 → 음의 정수 값
       30.1 → 실수 값
      1.0e-10 → 지수

    - boolean
      ·boolean 은 true/false 데이터를 사용한다.
      ·true, false 모두 소문자 기술.
      ·C 나 JAVA 에서 사용하는 boolean 형과 비슷하다.

    - null
      ·null 은 어떤 특정 형태를 담기 이전의 상태로... object 로 취급받게 되며,
        데이터가 할당되면(담기면), 할당된 데이터에 따라 다시 구분되낟.
      ·반드시 『null』이라고 소문자 기술.

    - array
      ·array 는 데이터들이 순서화된 collection 이다. (순서를 가진 값의 표현)
      ·array 는 『[』로 시작해서 『]』로 끝내어 표현한다. (『[ ]』로 감싸서 표현)
      ·『,』(컴마)로 데이터들을 구분한다.
      ·1차원 형태, 2차원 형태 모두 존재한다.
        ["foo", "bar", "bax"] → 문자열의 배열
        [{"foo":"bar"}, {"key":"value"}] → 오브젝트 배열
        [[10,20],[40,50]] → 배열의 배열
        [] → 빈 배열
        [{"foo":"bar"}, "bax", 100, true, null] → 복잡한 배열(→ 사용 가능)

    - object
      ·object 는 name 과 value 쌍들의 비순서화된 SET 이다.
      ·object 는 『{』로 시작하고 『}』로 끝내어 표현한다.(『{ }』로 감싸서 표현)
      ·각 name 뒤에 『:』(콜론)을 붙인다. (즉, 이름과 같은 『:』로 구분)
      ·『,』(컴마)로 쌍들 간을 구분한다. (즉, 『,』로 멤버 구분)
      ·이름과 값의 집합, 이름은 항상 문자열, 값은 JSON의 자료형 기능
        {
            "name" : {"first":"John", "last":"Doe"}
            , "blog" : "http://blog.example.com"
            , "age" : 52
            , "interests" : ["Web", "XML", "REST"]
        }

○ 일시(날짜)

   - JSON 에서 기본적을 제공하는 자료형에 일시(날짜)는 없음.
   - 개발작 스스로 규칙을 정해서 사용.
   - 가장 단순한 방법으로 UNIX 시간을 수치로 표현.
     (1234567890 → 2009년 2월 14일 8시 31분 30초)
   - UNIX 는 타임존을 다루지 못함.
     타임존이 필요할 시 Javascript 의 Data 객체 toString() 메소드 이용.
     ("Mon Nov 01 2022 05:43:35 GMT+0900" → Firefox 3.6)
     ("Mon Nov 01 05:43:35 GMT+0900 2022" → IE 8)
   - Javascript 는 브라우저 별로 출력이 달라지기 때문에
     표준적인 ISO-8601 사용 권장
     ("202306-19T10:48:12+0900")

○ 링크

    - 단순히 URI 를 문자열로 표현
      {
         "href" : "http://example.com/foo/bar"
      }
    - URI 는 상대 URI 가 아닌 절대 URI 로 표현 권장
    - 멤버 이름을 링크를 나타내는 값으로 지정하여 표현 구너장

※ 크로스 도메인 통신

    - 불특정 다수의 서버에 액세스 하는 것을 『크로스 도메인 통신』이라 함
    - AJAX 에서 사용하는 XMLHttpRequest 라는 Javascript 모듈은
      보안상 제한으로 하나의 서버와 통신 가능
    - <script> 요소를 이용해 크로스 도메인 통신 가능
    - JSONP(JSON with Padding) 은 브라우저의 <script> 요소를 이용해
      크로스 도메인 통신 구현.
    - 클라이언트가 지정한 콜백 함수명을 래핑하여 크로스 도메인 통신 구현.

+메모) JSON과 JSONP가 다른 것이다...

 

 

 

 AjaxTest01.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxTest01.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

	$(function()
	{
		$("#sendBtn").click(function()
		{
			// 확인
			//alert("확인~!!!");
			
			// data 구성
			var params = "name=" + $.trim($("#name").val())
					+ "&content=" + $.trim($("#content").val());
			
			// check~!!!
			// jQuery 의 ajax() 함수 사용(호출)
			
			/* 
			$.ajax(
			{
				type: "POST"						// 데이터 전송 및 페이지 요청 방식
				, url: "AjaxTest01_ok.jsp"			// 데이터 전송 및 요청 URL
				, data: params						// AjaxTest01_ok.jsp 에서 수신하게 되는 데이터
				, success: 동작						// 데이터 요청 및 전달이 성공했을 때 처리
				, beforeSend: 반환값확인			// 요청 전 확인해야 할 항목 처리(true/false)
				, error: 동작						// 처리 과정에서 문제가 발생했을 때
			});
			*/
			
			
			$.ajax(
			{
				type: "POST"						
				, url: "AjaxTest01_ok.jsp"			
				, data: params						
				, success: function(args)
				{
					$("#resultDiv").html(args);
					
					$("#name").val("");
					$("#content").val("");
					$("#name").focus();
				}
				, beforeSend: showRequest			//check~!!!   true / false 반환 _showRequest()(Ⅹ)
				, error: function(e)
				{
					alert(e.responseTest);			//.responseTest : 반환하는 내용...???
				}
			});
	
			
		});
	});

	function showRequest()
	{
		if (!$.trim($("#name").val()))
		{
			alert("이름을 입력해야 합니다.");
			$("#name").focus();
			
			return false;
		}
		
		if (!$.trim($("#content").val()))
		{
			alert("내용을 입력해야 합니다.");
			$("#content").focus();
			
			return false;
		}
		
		return true;
	}
	
</script>
</head>
<body>

<div>
	<h1>jQuery 의 ajax() 활용 실습</h1>
	<hr>
</div>

<div>
	이름 <input type="text" id="name" class="txt">
	<br><br>

	내용 <textarea rows="3" cols="50" id="content"></textarea>
	<br><br>
	
	<input type="button" value="등록하기" id="sendBtn">
	<br><br>
</div>
<br>

<div>
	<input type="radio" name="rdo">rd1
	<input type="radio" name="rdo">td2
</div>
<br>

<div>
	<input type="checkbox" name="chk">ck1
	<input type="checkbox" name="chk">ck2
</div>
<br>

<div id="resultDiv">
	
</div>



</body>
</html>

 

AjaxTest01_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<%
	//AjaxTest01.jsp
	
	String name = request.getParameter("name");
	String content = request.getParameter("content");
%>
<%-- 
이름 : <b><%=name %></b>
<br>
내용 : <b><%=content %></b>
<br> 
--%>
이름 : <b>${param.name }</b>
<br>
내용 : <b>${param.content }</b>
<br>

 

 

 

AjaxTest02.jsp : 전송하는 데이터 타입은 XML

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxTest02.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

	$(function()
	{
		$("#sendBtn").click(function()
		{
			// 확인
			//alert("확인~!!!");
			
			var params = "name=" + $.trim($("#name").val())
				+ "&content=" + $.trim($("#content").val());
			
			/* 
			$.ajax(
			{
				type: "POST"						// 데이터 전송 및 페이지 요청 방식
				, url: "AjaxTest01_ok.jsp"			// 데이터 전송 및 요청 URL
				, data: params						// AjaxTest01_ok.jsp 에서 수신하게 되는 데이터
				, success: 동작						// 데이터 요청 및 전달이 성공했을 때 처리
				, beforeSend: 반환값확인			// 요청 전 확인해야 할 항목 처리(true/false)
				, error: 동작						// 처리 과정에서 문제가 발생했을 때
			});
			*/
			
			$.ajax(
			{
				type:"POST"
				, url:"AjaxTest02_ok.jsp"
				, data:params
				//, async:false						//--비동기(true) / 동기(false)
				, dataType:"xml"					//--check~!!!
				, success:function(args)
				{
					var out="";
					out=">> 게시물 갯수 : " + $(args).find("totalDataCount").text() + "<br>";	
										  //$(args): xml 문서 객체(DOM) / argument안에서(.)찾아라(find)
				
					$(args).find("comment").each(function()
					{
						var item = $(this);						// <comment></comment>영역
						var num = item.attr("num");
						var name = item.find("name").text();
						var content = item.find("content").text();
						
						out += "<br>=========================";
						out += "<br> 번호 : " + num;
						out += "<br> 이름 : " + name;
						out += "<br> 내용 : " + content;
						out += "<br>=========================<br>";
						
					});
										  
					$("#resultDiv").html(out);
					
					$("#name").val("");
					$("#content").val("");
					$("#name").focus();
				}
				, beforeSend:showRequest
				, error:function(e)
				{
					alert(e.responseText);
				}
				
			});
			
		});
	});
	
	function showRequest()
	{
		if (!$.trim($("#name").val()))
		{
			alert("이름을 입력해야 합니다.");
			$("#name").focus();
			
			return false;
		}
		
		if (!$.trim($("#content").val()))
		{
			alert("내용을 입력해야 합니다.");
			$("#content").focus();
			
			return false;
		}
		
		return true;
	}

</script>

</head>
<body>

<div>
	<h1>jQuery 의 ajax() 활용 실습</h1>
	<hr>
</div>

<div>
	이름 <input type="text" id="name" class="txt">
	<br><br>

	내용 <textarea rows="3" cols="50" id="content"></textarea>
	<br><br>
	
	<input type="button" value="등록하기" id="sendBtn">
	<br><br>
</div>
<br>

<div>
	<input type="radio" name="rdo">rd1
	<input type="radio" name="rdo">td2
</div>
<br>

<div>
	<input type="checkbox" name="chk">ck1
	<input type="checkbox" name="chk">ck2
</div>
<br>

<div id="resultDiv">
</div>
<br><br>

</body>
</html>

AjaxTest02_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"
%><%@
 taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"
%><%
 
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%><%
	// AjaxTest02_ok.jsp
	// → XML 구성
	
	String name = request.getParameter("name");
	String content = request.getParameter("content");
	
	response.setContentType("text/xml");
%><?xml version="1.0" encoding="UTF-8"?>
<lists>
	<totalDataCount>5</totalDataCount>
	<%
	for (int i=1; i<=5; i++)
	{
	%>
	<comment num="<%=i %>">
		<name><%=name + i %></name>
		<content><%=content + i %></content>
	</comment>
	<%
	}
	%>
</lists>

 

 

AjaxTest03.jsp : 전송하는 데이터 타입은 XML

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxTest03.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

	$(function()
	{
		$("#sendBtn").click(function()
		{
			var params = "title="+ $.trim($("#title").val()) 
					+ "&content="+ $.trim($("#content").val());
			
			/* 
			$.ajax(
			{
				type: "POST"						// 데이터 전송 및 페이지 요청 방식
				, url: "AjaxTest01_ok.jsp"			// 데이터 전송 및 요청 URL
				, data: params						// AjaxTest01_ok.jsp 에서 수신하게 되는 데이터
				, success: 동작						// 데이터 요청 및 전달이 성공했을 때 처리
				, beforeSend: 반환값확인			// 요청 전 확인해야 할 항목 처리(true/false)
				, error: 동작						// 처리 과정에서 문제가 발생했을 때
			});
			*/
			
			$.ajax(
			{
				type:"POST"
				, url:"AjaxTest03_ok.jsp"
				, data:params
				, dataType:"xml"
				, success: function(args)
				{
					var out="";
					
					out = ">> 총 갯수 : " + $(args).find("dataCount").text() + "<br>";
					
					$(args).find("comment").each(function()
					{
						var item = $(this);
						var id = item.attr("num");
						var title = item.find("title").text();
						var content = item.find("content").text();
						
						out += "<br> >>id=" + id;
						out += "<br> - title=" + title;
						out += "<br> - content=" + content + "<br>";
						
						$("#resultDiv").html(out);
						
						$("#title").val("");
						$("#content").val("");
						$("#title").focus();
					});
				}
				, beforeSend: sendRequest
				, error : function(e)
				{
					alert(e.responseText);
				}
			})
			
		});
	});
	
	
	function sendRequest()
	{
		if(!$.trim($("#title").val()))
		{
			alert("제목을 입력해야 합니다.");
			$("#title").focus();
			
			return false;
		}
		
		if(!$.trim($("#content").val()))
		{
			alert("내용을 입력해야 합니다.");
			$("#content").focus();
			
			return false;
		}
		
		return true;
	}
</script>
</head>
<body>

<div>
	<h1>jQuery 의 ajax() 활용 실습</h1>
	<p>xml control</p>
	<hr>
</div>

<div>
	제목 <input type="text" id="title" class="txt"><br><br>
	내용 <input type="text" id="content" class="txt"><br><br>
	<br><br>
	
	<input type="button" value="등록하기" id="sendBtn">
</div>
<br><br>

<div id="resultDiv">
<!-- 
>> id=1
- title=테스트
- content-반갑습니다.

>> id=2
- title=테스트
- content-반갑습니다.
-->
</div>

</body>
</html>

AjaxTest03_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"
%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"
%><%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();

%><%
	String title = request.getParameter("title");
	String content = request.getParameter("content");
	
	response.setContentType("text/xml");
%><?xml version="1.0" encoding="UTF-8"?>
<lists>
	<dataCount>2</dataCount>
	<%
	for(int i=1; i<=2; i++)
	{
	%>
	<comment num="<%=i %>">
		<title><%=title %></title>
		<content><%=content %></content>
	</comment>
	<%
	}
	%>
</lists>

 

 

 

AjaxTest04.jsp : 전송하는 데이터 타입은 JSON (글 상위에 있는 JSON개념 참고)

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxTest04.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

	$(function()
	{
		$("#sendBtn").click(function()
		{
			var params = "name=" + $.trim($("#name").val())
					+ "&content=" + $.trim($("#content").val());
			
			$.ajax(
			{
				type:"POST"
				, url:"AjaxTest04_ok.jsp"
				, data:params
				, dataType:"json"
				, success:function(jsonObj)
				{
					var out = "";
					
					var num = jsonObj.num;
					var name = jsonObj.name;
					var content = jsonObj.content;
					
					out += "<br>====================";
					out += "<br> 번호 : " + num;
					out += "<br> 이름 : " + name;
					out += "<br> 내용 : " + content;
					out += "<br>====================<br>";
					
					$("#result").html(out);
					
					$("#name").val("");
					$("#content").val("");
					$("#name").focus();
					
				}
				, beforeSend:showRequest
				, error:function(e)
				{
					alert(e.responseText);
				}
			});
		});
	});

	function showRequest()
	{
		var flag = true;
		
		if(!$.trim($("#name").val()))
		{
			alert("이름을 입력해야 합니다.");
			$("#name").focus();
			
			flag = false;
		}
		
		if(!$.trim($("#content").val()))
		{
			alert("내용을 입력해야 합니다.");
			$("#content").focus();
			
			flag = false;
		}
		
		return flag;
	}
	
</script>

</head>
<body>

<div>
	<h1>jQuery 의 ajax() 활용 실습</h1>
	<p>json control</p>
	<hr>
</div>

<div>
	이름 <input type="text" id="name" class="txt">
	<br><br>
	
	내용 <input type="text" id="content" class="txt">
	<br><br>
	
	<input type="button" value="등록하기" id="sendBtn" class="btn">
</div>

<div id="result">
</div>

</body>
</html>

AjaxTest04_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();

	// AjaxTest04_ok.jsp
	
	String name= request.getParameter("name");
	String content = request.getParameter("content");
	
	String result = "";
	
	// ※ JSON 데이터
	//    {"이름1" : "값1", "이름2" : "값2"}
	
	StringBuffer sb = new StringBuffer();

	/* 따옴표 구성에 유의할 것~!!! */
	sb.append("{\"num\":\"" + 1 + "\"");
	sb.append(", \"name\":\"" + name + "\"");
	sb.append(", \"content\":\"" + content + "\"}");
	
	/* {"num":"1", "name":"홍길동", "content":"안녕하세요"} */
	/* "{\"num\":\"1\", \"name\":\"홍길동\", \"content\":\"안녕하세요\"}" */
	/* "{\"num\":\"" + ○ + "\", \"name\":\"" + ○ + "\", \"content\":\"" + ○ + "\"}" */
	/* "{\"num\":\"" + 1 + "\", \"name\":\"" + name + "\", \"content\":\"" + content + "\"}" */
	
	result = sb.toString();
	
	out.println(result);	
%>

 

 

AjaxTest05.jsp : 데이터 전송 타입은 JSON

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxTest05.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/javascript">

	$(function()
	{
		$("#sendBtn").click(function()
		{
			var params = "name=" + $.trim($("#name").val()) + "&content=" + $.trim($("#content").val());
		
			$.ajax(
			{
				type:"POST"
				, url:"AjaxTest05_ok.jsp"
				, data:params
				, dataType:"json"
				, success: function(jsonObj)
				{
					/* 내가
					var out = "";
					
					for (var i=0; i<5; i++)	
					{
						out += "<br>=============================";
						out += "<br> 번호 : " + jsonObj[i].num;
						out += "<br> 이름 : " + jsonObj[i].name;
						out += "<br> 내용 : " + jsonObj[i].content;
						out += "<br>==============================";
					}
					
					$("#result").html(out);
					*/
					
					var out = "";
					
					// 수신된 jsonObj 는 JSON 배열 객체
					// → 배열방만큼 반복문 순환
					for(var idx=0; idx<jsonObj.length; idx++)
					{
						var num = jsonObj[idx].num;
						var name = jsonObj[idx].name;
						var content = jsonObj[idx].content;
						
						out += "<br>===================";
						out += "<br> 번호 : " + num;
						out += "<br> 이름 : " + name;
						out += "<br> 내용 : " + content;
						out += "<br>===================";
					}
					
					$("#result").html(out);
					
					$("#name").val("");
					$("#content").val("");
					$("#name").focus();
				}
				, beforeSend:sendRequest
				, error: function(e)
				{
					alert(e.responseText);
				}
			});
		
		});
		
	});
	
	function sendRequest()
	{
		var flag = true;
		
		if(!$.trim($("#name").val()))
		{
			alert("이름을 입력해주세요.");
			$("#name").focus();
			flag = false;
		}
		
		if(!$.trim($("#content").val()))
		{
			$("#content").focus();
			flag = false;
		}
		
		return flag;
	}

</script>

</head>
<body>

<div>
	<h1>jQuery 의 ajax() 활용 실습</h1>
	<p>json control</p>
	<hr>
</div>

<div>
	이름 <input type="text" id="name" class="txt">
	<br><br>
	
	내용 <input type="text" id="content" class="txt">
	<br><br>
	
	<input type="button" value="등록하기" id="sendBtn" class="btn">
</div>

<div id="result">
</div>

</body>
</html>

AjaxTest05_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	String name = request.getParameter("name");
	String content = request.getParameter("content");
	
 	String result = "";
 	
	/* 내가
	StringBuffer sb = new StringBuffer();
	
	sb.append("[");
	
	for(int i=1; i<=5; i++)
	{		
		sb.append("{\"num\" : \"" + i + "\", \"name\" : \"" + name + "\", \"content\" : \"" + content + "\"}");
		
		if (!(i==5))
		{
			sb.append(", ");
		}
	}
	sb.append("]");

	result = sb.toString();
	
	out.println(result);
	*/
	
	for (int n=1; n<=5; n++)
	{
		StringBuffer sb = new StringBuffer();
		
		// AjaxTest04_ok.jsp 의 일부 코드 내용을 복사 & 붙여넣기
		sb.append("{\"num\":\"" + n + "\"");
		sb.append(", \"name\":\"" + name + n + "\"");
		sb.append(", \"content\":\"" + content + n + "\"},");		//check~!!! 『,』
		
		result += sb.toString();
	}
	
	// 마지막 『,』 제거(탈락)
	result = result.substring(0, result.length()-1);
	//-- 마지막 컴마를 제거한 내용으로 result 갱신
	
	// JSON 배열 객체 구성
	result = "[" + result + "]";
	//-- 배열 형식으로 구성한 내용으로 result 갱신
	
	out.println(result);
	
%>

 

AjaxTest06.jsp : 데이터 전송 타입은 params

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxTest06.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/javascript">

	$(function()
	{
		$("#sendBtn").click(function()
		{
			// 확인
			// alert("확인~!!!");
			
			var params = "name="+ $.trim($("#name").val())
					+ "&content=" + $.trim($("#content").val());
			
			$.ajax(
			{
				type:"POST"
				, url:"AjaxTest06_ok.jsp"
				, data:params
				, success:function(args)
				{
					$("#result").html(args);
					
					$("#name").val("");
					$("#content").val("");
					
					$("#name").focus();
				}
				, beforeSend:showRequest
				, err: function(e)
				{
					alert(e.responseText);
				}
			});
		});
		
		
		// check~!!!
        // $(document).ajaxStart(기능, 동작, 행위).ajaxComplete(기능, 동작, 행위);
		// ----------- =========================== ==============================
		//			    AJAX 요청 시작 시...		AJAX 요청 종료(완료) 시...
        $(document).ajaxStart(function()
		{	
        	// AJAX 요청 시작 시...
        	$("#loading").show();
        	$("#result").hide();
        	
		}).ajaxComplete(function()
		{
			// AJAX 요청 종료(완료) 시...
			$("#loading").hide();
			$("#result").show();
			
		});
		
	});

	function showRequest()
	{
		var flag = true;
		
		if(!$.trim($("#name").val()))
		{
			alert("이름을 입력해야 합니다.");
			$("#name").focus();
			flag = false;
		}
		
		if(!$.trim($("#content").val()))
		{
			alert("내용을 입력해야 합니다.");
			$("#content").focus();
			
			flag = false;
		}
	
		return flag;
	}

	
	
</script>

</head>
<body>

<div>
	<h1>jQuery 의 ajax() 활용 실습</h1>
	<p>로딩(loading) 이미지 적용</p>
	<hr>
</div>

<div>
	이름 <input type="text" id="name" class="txt">
	<br><br>
	
	내용 <input type="text" id="content" class="txt">
	<br><br>
	
	<input type="button" value="등록하기" id="sendBtn" class="btn">
</div>
<br><br>

<div id="loading" style="text-align: center; display: none"><!-- none: 페이지에 랜더링 되지 않은 상태여서 안보임 -->
	<img alt="loading" src="images/loading_01.gif" style="align-items: center;">
</div>

<div id="result">
</div>

</body>
</html>

AjaxTest06_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();

	//AjaxTest06_ok.jsp
	
	String name = request.getParameter("name");
	String content = request.getParameter("content");
	
	// check~!!! 
	try
	{
		// 의도적으로 처리 시간 지연
		Thread.sleep(5000);
	}	
	catch(Exception e)
	{
		System.out.println(e.toString());
	}
%>
입력한 이름 : <%=name %>
<br>
입력한 내용 : <%=content %>

! 배워가고 있는 주인장이 쓴 글이니 정보의 정확성에 유의해주시기 바랍니다 !

 

'JAVA개념&실습' 카테고리의 다른 글

JAVA : 기초 (변수, 자료형, printf, 형 변환)  (0) 2023.08.22
WEB : [0621] Bootstrap  (0) 2023.08.22
WEB : [0616] AJAX 03  (0) 2023.08.22
WEB : [0616] AJAX 02  (0) 2023.08.22
WEB : [0613-0616] AJAX 01  (0) 2023.08.22

'JAVA개념&실습'의 다른글

  • 현재글WEB : [0619] AJAX 04

관련글

티스토리툴바