[javaScript] Ajax(1)

🔥 Ajax란?

• Asynchronous Javascript And Xml(Json)
• 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식
• 필요한 부분만 비동기 방식으로 전송받아 변경할 필요가 있는 부분만 한정적으로 렌더링

🔥 jQuery 이용

🧾 JSON

<p id="demo"></p>
<button type="button">button</button>

• javascript

$("button").click(function() {
	$.ajax({
    	// 전송
      	url:"data.json",	// 어디로 갈지
      	type:"get",			// 형식 
      	datatype:"json",	// 타입
      
      	// 수신
      	success:function(data){	// 파일 찾기 성공		
          for(let i = 0; i < data.length; i++) {
          	$("#demo).append(data[i].name + " ");
            $("#demo).append(data[i].age + " ");
            $("#demo).append(data[i].address + " ");
            $("#demo).append(data[i].phone + " ");
          },
          error:function() {
          	alert("error");
          }
        
        }
    });
});

• json

[
	{
		"name":"홍길동",
		"age":24,
		"address":"서울시",
		"phone":"123"
	},
	{
		"name":"성춘향",
		"age":16,
		"address":"남원시",
		"phone":"234"
	},
	{
		"name":"홍두께",
		"age":22,
		"address":"강릉시",
		"phone":"345"
	}
]

🧾 JSP

<p id="name"></p>
<p id="age"></p>
<p id="birth"></p>

• javascript

$(function() {
	$("button").click(function() {
    	$.ajax({
        	url:"data.jsp",
          	type:"get",
          	datatype:"json",
          	success:function(data) {
            	let json = JSON.parse(data);
              
              	$("#name").text(json.name);
                $("#age").text(json.age);
                $("#birth").text(json.birth);  
            },
          	error:function() {
            	alert("error");
            }
        });
    });
});

• jsp

<%
// JDBC -> 데이터를 산출

String name = "허광한"
int age = 34;
String birth = "1990/10/31";

// json + 내장객체
String str = "{\"name\":\"" + name + "\", \"age\":\"" + age + "\", \"birth\":\"" + birth + "\"}"

out.println(str);
%>