ajax

//text형식으로 java

	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		//순수 Text 반환
		//1. 단일값
		//2. 다중값
		// a. 객체
		// b. 다중레코드
		
		String name = "홍길동";
		
		resp.setCharacterEncoding("UTF-8");
		resp.setContentType("text/plain");
		
		PrintWriter writer = resp.getWriter();
		
		writer.print(name);
		
		writer.close();
	}

 

//text형식으로 javascript

	<script>
	
		//text
		$("#btn1").click(function() {
			$.ajax({
				type: "GET",
				url: "/codestudy/ajax/ex05textdata.do",
				dataType: "text", //**** 돌려받는 데이터를 XML 형식으로 받겠다.
				success: function(result) {
					
					//$("#result1").text(result);
					
					//홍길동,20,서울시 강남구 역삼동
					let temp = result.split(",");
					$("#result1").append("<div>" + temp[0] + "</div><div>" + temp[1] + "</div><div>" + temp[2] + "</div>");
					
				},
				error: function(a,b,c) {
					console.log(a,b,c);
				}
			});
		});
        
    </script>

 

 

 

 

//xml 형식 java

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		//1. 돌려줄 데이터가 한글이 들어있으면
		resp.setCharacterEncoding("UTF-8");
		
		//2. 돌려줄 데이터가 순수한 텍스트(문자열)
		resp.setContentType("text/plain");
		
		String name = "홍길동";
		String age = "22";
		String address = "서울시 강동구 천호동";
		
		/*
		 <data>
		 	<name>홍길동</name>
		 	<age>22</age>
		 	<addrss>서울시</address>
		 </data>
		 */
		PrintWriter writer = resp.getWriter();
		
		writer.print("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
		writer.print("<data>");
			writer.print("<name>" + name + "</name>");
			writer.print("<age>" + age + "</age>");
			writer.print("<address>" + address + "</address>");
		writer.print("</data>");
		
		
		writer.close();

//xml 형식 javascript

<script>

		//xml
		$("#btn2").click(function() {
			$.ajax({
				type: "GET",
				url: "/codestudy/ajax/ex05xmldata.do",
				dataType: "xml", //**** 돌려받는 데이터를 XML 형식으로 받겠다.
				success: function(result) {
					
					//result -> <data>홍길동</data>
					//result -> XMLDocument 객체 -> DOM or jQuery
					
					//$("#result2").text($(result).find("data").text());
					
					
					//result
					/*
					<data>
						<name>홍길동</name>
						<age>22</age>
						<address>서울시 강동구 천호동</address>
					</data>
					*/
					
					console.log($(result).find("name").text());
					console.log($(result).find("age").text());
					console.log($(result).find("address").text());

					
				},
				error: function(a,b,c) {
					console.log(a,b,c);
				}
			});
		});	
</script>

 

 

 

//json 형식 java

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		//1. 단일값
		//2. 다중값
		
		resp.setCharacterEncoding("UTF-8");
		resp.setContentType("application/json");
		
		//JSON -> JavaScript Object Notation
		// - XML 처럼 네트워크 상에서 데이터를 주고 받을 때 형식으로 많이 사용
		
		PrintWriter writer = resp.getWriter();
		
		/*
		[
			{
				"name": "홍길동",
				"age": "20",
				"address": "서울시"
			}
			,
			{
				"name": "홍길동",
				"age": "20",
				"address": "서울시"
			}
		]
		*/
		
		MemberDAO dao = new MemberDAO();
		ArrayList<MemberDTO> list = dao.list();
		
		String temp = "";
		
		temp += "[";
			for (MemberDTO dto : list) {
				temp += "{";
				temp += String.format("\"seq\":\"%s\",", dto.getSeq());
				temp += String.format("\"name\":\"%s\",", dto.getName());
				temp += String.format("\"id\":\"%s\",", dto.getId());
				temp += String.format("\"email\":\"%s\"", dto.getEmail());
				temp += "}";
				temp += ",";
			}
		temp = temp.substring(0, temp.length()-1);
		temp += "]";
		
		writer.print(temp);
		
		writer.close();
		
	}

 

//json 형식 xml

<script>
		//json
		$("#btn3").click(function() {
			$.ajax({
				type: "GET",
				url: "/codestudy/ajax/ex05jsondata.do",
				dataType: "json", //**** 돌려받는 데이터를 XML 형식으로 받겠다.
				success: function(result) {
					//result -> {"name":"홍길동", "age":"20", "address":"서울"}
										
					//console.log(result.name);
					//console.log(result.age);
					//console.log(result.address);
					
					$(result).each(function(index, item) {
						console.log(item.seq);
						console.log(item.name);
						console.log(item.id);
						console.log(item.email);
						console.log(" ");
					});
					
				},
				error: function(a,b,c) {
					console.log(a,b,c);
				}
			});
		});
</script>