24.07.22

#Ajax (Asynchronous JavaScript and XML)

비동기적인 웹 어플리케이션의 제작을 위한 웹 개발 기법

사용자의 요청에 따라 서버로부터 데이터를 읽어오기 위한 방법

 

원래 서버의 프로그램인 jsp, 서블릿, 스프링은 동적인 html을 생성하는 것이 목적이지만 Ajax통신으로 요청될 때에는 그에 필요한 데이터만 응답

이때 데이터만 응답하는 방식  -  csv, xml, json

 

 

#csv

홍길동,20,서울
이순신,40,대구

 

 

#xml

<memberlist>
	<member>
		<name>홍길동</name>
		<age>20</age>
		<addr>서울</addr>
	</member>
	<member>
		<name>이순신</name>
		<age>40</age>
		<addr>대구</addr>
	</member>
</memberlist>

 

 

#json

[
	{name:"홍길동",age:20,addr:"서울"},
	{name:"이순신",age:40,addr:"대구"}
]

 

 

 

---

 

 

 

#JavaScript로 Ajax 통신하기

 

1. Ajax 통신을 위해 XMLHttpRequest() 객체를 생성

var request = new XMLHttpRequest();

 

2. open메소드를 이용하여 요청할 서버의 프로그램과 요청방식 및 동기(true), 비동기(false) 설정

request.open("get", "hello.jsp", false);

 

3. send메소드 호출하여 Ajax 통신 수행

request.send();

 

서버로부터 응답한 데이터

request.responseText

 

 

 

 

#Ajax 통신으로 서버 데이터 전달하기

$.ajax({

    url: " ",

    data: 객체,

    success: function(data){

    

    }

});