[XML+Ajax] XML 연결, ajax통신 + 구글차트, 카카오지도

 

• XMLHttpRequest 객체 : javaScript로 ajax통신을 합니다.
• JQuery 의 ajax 통신 내에 XMLHttpRequest가 포함됩니다.

var request = new XMLHttpRequest();
request.open('GET','',false);

 

false = 동기 = 서버로부터 응답이 올 때까지 기다리겠습니다.

true = 비동기 = 서버의 응답을 기다리지 않고 다른 일을 하겠습니다.

 

• 서버의 종류 : JSP, 서블릿, 스프링
• 서버에 응답하는 형식 : XML, JSON

 

---

 

• Ajax (Asynchronous JavaScript and XML)
• 비동기방식의  JavaScript and XML

→ ajax 통신은  자바 스크립트 안에 있는 기능입니다.

→ 자바스크립트로 서버가 응답하는 데이터를 불러올 때 ajax 통신하여 사용합니다.

→ 현재 보여주고 있는 대부분의 화면은 그대로 있고 일부 내용만 변경시키고자 할 때 다른 문서로 이동하지 않고, 서버로부터 필요한 데이터를 받아올 수 있어요.

그렇게 하기 위한 기술이 자바스크립트의 Ajax통신입니다.

→ 즉, Ajax은 자바스크립트 기술 중 하나이며 화면 전체를 바꾸지 않고 화면의 일부분을 변경하기 위하여 데이터를 서버로 부터 받기 위한 통신 기술입니다. 이때 서버의 프로그램은 다양합니다. (jsp, 서블릿, 스프링, php, 플라스크, 장고, asp…)

 

• JQuery ? 자바스크립트의 라이브러리

→ jsonp : 다른 컴퓨터에 있는 데이터와 통신하기 위해 사용됩니다.

→ jsonpcallback : 응답하는 함수의 이름도 함께 알아야 하기 때문에 위와 같은 속성을 함께 사용합니다.

---

• 쿼리스트링이란?

→ 쿼리스트링은 사용자가 입력 데이터를 전달하는 방법 중의 하나로, url 주소에 미리 협의된 데이터를 파라미터(→매개변수)를 통해 넘기는 것을 말한다.

 

<사용예시>

→ ?name=tiger&age=20

---

• 서블릿(Servlet)

→ 자바 언어로 동적인 HTML을 생성하기 위한 기술입니다.

→ 서블릿을 만드려면 HttpServlet을 상속해야 하고 이것은 번거롭고 어려운 일이었습니다.

→ 후에 좀 더 쉽게 자바 언어로 동적인 html을 생성하도록 jsp가 발표되었습니다.

→ 그러나 사용자의 요구가 복잡해지고 프로젝트 규모가 커지게 되면서 jsp만으로 프로그램을 하기 어려워집니다.

→ 따라서 현재에는 서블릿이 다시 중요하게 여겨지고 있습니다.

$("#btnPost").click(function() {
		$.ajax({
			url:"/Test01/Hello",
			type: "post",
			success: function(data) {
				$("#box").html(data);
			}
		})		
	})	
	
		$("#btnget").click(function() {
		$.ajax({
			url:"/Test01/Hello",
			type: "get",
			success: function(data) {
				$("#box").html(data);
			}
		})		
	})

$("#btnPost").click(function() {
		$.get("/Test01/Hello",function(data){
			$("#box").html(data);
		});
	})	
	
	$("#btnget").click(function() {
		$.post("/Test01/Hello",function(data){
			$("#box").html(data);
		});
	})

→ Ajax 통신 방법으로 위의 두가지 방법 모두 사용가능합니다.

$("#btnLoad").click(function() {
			$("#box").load("/Test01/Hello");
		
	})

→ load함수로 바로 사용도 가능합니다. ( get방식만)

---

• Reverse Ajax

→ 몇초마다 데이터를 계속 보내줍니다.

create table chat(
no number primary key,
name varchar2(20),
message varchar2(100)
);

create sequence seq_chatno;

→ 이 기능을 사용하기 위해 채팅을 위한 테이블 생성합니다.

 

---

• serializeArray(); : form을 대상으로 serialize() 메소드를 사용하면 폼의 객체들을 한 번에 받을 수가 있습니다.
  ajax 에 data 값을 세팅할 때 사용하면, 해당 form 의 모든 값을 쉽게 받을 수 있답니다.
• form 태그 안에서는 요청방식 쓸 때 get/GET (소.대문자) 모두 가능
• String method = request.getMethod(); → 요청 방식을 파악하는 메소드는 대문자로만 받아오기 때문에 jsp에서는 대문자 GET으로 사용

---

< 구글차트 사용하기 >

• 구글 검색 : 구글차트
• 리치 갤러리

< 카카오 지도 api 사용하기 >

• 카카오 개발 페이지 들어가기 : https://developers.kakao.com/
• 내 애플리케이션 생성
• 자바스크립트 키 복사하기
• 플랫폼 web : ex) http://localhost:8081
• sample - 지도 생성하기