Ajax - 개념 및 DB 연동

< Ajax >- Asynchronous JavaScript And XML

입력된 값을 받아서 출력하지만 새로고침이 일어나지 않음.

 

※ 요청하고 응답이 와서 출력이 되기전까지 기다릴수 밖에 없다 ⇒ 동기식

→ 보편적인 웹프로그램의 동작원리!!

 

새로고침 없이 자바스크립트를 이용해 비동기식으로 현재페이지에서 요청하는 방식이 연관검색어

⇒ DHTML (새로고침 없이 변경된 표현페이지)

ex) 네이버 회원가입 페이지 : 중복검사 버튼 없이 입력한 것 만으로도 페이지 전환없이 중복검사 실행됨.

 

REST API : 응답을 XML, JSON으로 결과를 만들어주는 기술

→ web, app등 웬만한 프로그램에는 REST 서비스를 제공받아서 만듦.

ajax는 rest 기술을 배우기 위해 사용됨.

 

1. onkeyup 이벤트 발생시 이벤트 처리함수에서 xmlrequest 객체를 만들어줌

 

2. 브라우저는 가만히 있고, xml 객체가 요청과 응답을 받아 boxmodel만 바꿔줌(DHTML을 통해)

 

 

RIA : Rich internet application

→ 모든 처리과정을 한 페이지에서 새로고침 없이 할 수 있도록 지원해주는 웹 어플리케이션.

XMLHttpRequest, XSL, JSON 이 중요! + JavaScript!

 

•  

 

getXMLHttpRequest() {}

• window.XMLHttpRequest= IE7 이상(Edge) 또는 기타 브라우저에서는 이 형태로만 사용함. (Opera 제외)
• window.ActiveXobject = IE7이하 (실 Internet explorer) 의 경우에서만 사용.
• null = Opera

Element 객체의 클릭 이벤트에 대한 이벤트 처리 함수 등록 document.getElementById("btn").onclick=function() {/AJAX 기능(비동기식 통신 + DHTML)을 이용한 페이지의 요소 변경 => 다른 웹프로그램을 비동기식으로 요청하여 실행 결과를 응답받아 요소 변경

 

1. XMLHttpRequest 객체를 생성하여 저장 - 전역변수와 함수를 이용

xhr=getXMLHttpRequest();//준비상태 : 0

 

2 .XMLHttpRequest 객체의 준비상태(readyState)가 변경될 경우 호출될 이벤트 처리 함수 등록

XMLHttpRequest.readyState : XMLHttpRequest 객체의 준비상태 정보를 저장하는 속성(Property)

⇒ XMLHttpRequest 객체의 준비상태의 순차적으로 변경 ⇒ 0(기본),1(요청 초기화) : open), 2(요청 : send), 3(응답대기 : 처리), 4(응답 : 결과)

XMLHttpRequest.onreadystatechange : XMLHttpRequest 객체의 준비상태가 변경될 경우 호출될 이벤트 처리 함수를 등록하기 위한 이벤트 속성(Property)

xhr.onreadystatechange=changeHTML;//이벤트 처리 함수는 4번 호출

 

3.XMLHttpRequest 객체로 open 메소드 호출 - 준비상태 : 1

XMLHttpRequest.open(method, url[, async]) : XMLHttpRequest 객체로 웹프로그램을 요청하기 위한 정보를 설정하는 메소드

⇒ method : 요청방식 - GET, POST, PUT, PATCH, DELETE 등 put~delete는 post에서 파생된 requestmessagebody에 전달받아 저장하는 방식.(REST에서 사용)

⇒ url : 요청 웹프로그램의 URL 주소 - 현재 서버

⇒ async : 동기식 통신 or 비동기식 통신을 구분 - false(동기식 통신), true(비동기식 : 기본)

 

 

4. XMLHttpRequest 객체로 send 메소드 호출 - 준비상태 : 2 XMLHttpRequest.send(data) : XMLHttpRequest 객체로 웹프로그램을 요청하기 위한 메소드

→ Requestbody에 값을 넣어서 보내겠다는 post 방식을 의미!

⇒ data : 요청 프로그램에 전달할 값을 [이름=값&이름=값&....] 형식으로 제공

⇒ POST 방식으로 요청할 경우에만 매개변수를 이용하여 전달값 제공

⇒ 전달값이 없거나 GET 방식으로 요청할 경우 매개변수에는 null 전달

 

5. 응답결과를 제공받아 DOM 조작(DHTML)

XMLHttpRequest.status : 요청에 대한 응답코드를 저장하는 속성(Property)

XMLHttpRequest.responseText : 응답결과(Non-XML)를 저장한 속성(Property)

XMLHttpRequest.responseXML : 응답결과(XML)를 저장한 속성

 

XMLHttpRequest 객체를 이용하여 웹프로그램 요청 GET 방식으로 웹프로그램을 요청한 경우 QueryString을 사용하여 값 전달

문제점) 전달값에 URL 주소로 표현할 수 없는 문자값이 존재할 경우 400 에러코드 발생

→ IE에서 발생, 크롬은 필요 없음.브라우저 특성에 따라 에러발생

해결법)전달값에 URL 주소로 표현할 수 없는 문자값이 존재할 경우 부호화 변환하여 전달

 

POST 방식으로 웹프로그램을 요청한 경우 send 메소드의 매개변수를 사용하여 값 전달

→ 문제점) send 메소드를 이용하여 값을 전달할 경우 “multipart/form-data” 형식(원시데이터)으로 전달

⇒ 요청 웹프로그램에서는 request.getParameter() 메소드로 전달값 반환 불가능

→ 해결법) “application/x-www-form-urlencoded” 형식(문자데이터)으로 값이 전달되도록 Request Header 변경

XMLHttpRequest.setRequestHeader(header, value) : 리퀘스트 메소드의 헤더 정보를 변경하는 메소드

⇒ open() 메소드 사용 후 호출 가능

 

브라우저 캐싱(Browser Cache) :

브라우저에서 로컬 웹 페이지 리소스를 저장하는데 사용되는 메커니즘.

캐시는 빠른 억세스를 위해 값을 임시로 저장하는데 사용되는 방식

 

문제점) 동일한 웹프로그램을 지속적으로 요청할 경우 브라우저 캐싱 기능에 의해 서버의 응답 결과가 아닌

해결법-1) 웹프로그램의 URL 주소를 지속적으로 변경하여 요청 - QueryString 이용

해결법-2) 요청 웹프로그램에서 응답결과에 대한 브라우저 캐싱 기능을 무효화 처리

※ 커뮤니티에서 친구가 로그인하는 경우 1초마다 지속적인 브라우저 캐싱을 사용못하게 할때 새로고침이 필요함!!!!!!

※ 댓글에도 사용되기도 함.

 

---

 

TYPE 2 - XML 로 응답 받는 방식!

CSV : 특정 문자를 이용하여 값(열)이나 정보(행)를 구분하는 비구조적인 데이터 표현 방법

xml, json을 파싱하는 방법

xsl(파싱하는 프로그램) @DB연동

⇒ 뉴스를 가져오는걸 크롤링 + 수집된 정보를 보기좋게 가공해서 출력하는 것을 파싱.

 

ajax가 뭐냐....

동기식 vs 비동기식의 차이

어떻게 비동기식으로 요청해서 응답받냐.

 

데이터포맷

• 바이너리 데이터 ( 메타데이터를 포함한 0과1) : 특정 애플리케이션에서만 실행가능
• 텍스트 데이터 : 모든 프로그램에서 해석 가능

 

XML(eXtensible Markup Language)

• 태그를 이용해 값을 표현함. Root Element가 반드시 있고 그 안에 하위 엘리먼트를 통해 값을 표현함.
• 태그 이름은 자유롭게 사용해도 됨.
• 정해져 있는 규칙만 제외( ex) 공백, xm 등)
• CDATA세션에서는 엔터도 값이기 때문에 태그와 붙여서 사용한다.
• id가 뭔지 명확하게 알 수 없기 때문에 getElementByTagName을 이용해 사용한다.

XML의 장점

• 호환성
• 독립성
• 확장성
• 다양한 포맷 변경가능
• 검색능력의 향상

XML 파서(Parser) : 문서를 해석해서 보여주는 것.

• DOM Parser를 WEB에서는 많이 사용함

Root Element : XML 문서의 최상위 엘리먼트

XML 네임스페이스

파싱 처리방법

• SAX : 안드로이드 에서 사용.
• DOM : WEB 에서 사용.

DTD (문서구조정의 및 유효성 검사)

<![CDATA[]]> ⇒ C 데이터 세션 : xml에서는 태그가 아닌 값으로 표현됨

특수문자(엔티티 레퍼런스 ex) > 등 ) 을 쓰려면 cdata 세션을 사용해야함.(귀찮으니...)

JSON : 경량 데이터 교환 포맷

 

xsl 문서를 이용하는 이유

: 복잡하고 다양한 xml 데이터를 html문서로 만들어주기 위해 사용함.

XMLHttpRequest 객체가 하나만 존재하므로, 여러개의 웹프로그램을 동시에 요청하여 처리 불가능하다.

해결법) 웹프로그램을 동기식으로 요청하여 응답결과를 제공받기 전까지 다른 웹프로그램을 요청할 수 없도록 작성

동시요청하는 방법.

Ajax 객체 생성 - XMLHttpRequest 객체를 생성하여 웹프로그램을 비동기식으로 요청하여 결과를 응답받아 처리

 

 

XML DB 연동 

- 요청페이지

<body>
	<h1>제시어 기능</h1>
	<hr>
	<div>
		<%-- 키워드를 입력받기 위한 태그 --%>
		<input type="text" id="keyword">
		
		<%-- 제시어를 제공받아 출력하기 위한 태그 --%>
		<div id="suggestDiv">
			<div id="suggestList"></div>
		</div>
		
		<%-- 선택된 제시어 관련 정보를 출력하기 위한 태그 --%>
		<div id="choice"></div>
	</div>
	
	<script type="text/javascript">
	document.getElementById("keyword").focus();
	
	document.getElementById("keyword").onkeyup=function() {
		var keyword=document.getElementById("keyword").value;
		if(keyword=="") {
			document.getElementById("suggestDiv").style.display="none";
			return;
		}
		
		new xyz.itwill.Ajax("POST", "suggest_two.jsp", "keyword="+keyword, displaySuggest);
	}
	
	function displaySuggest(xhr) {
		if(xhr.readyState==4) {
			if(xhr.status==200) {
				var xmlDoc=xhr.responseXML;
				
				var code=xmlDoc.getElementsByTagName("code").item(0).firstChild.nodeValue;
				
				if(code=="success") {
					var data=xmlDoc.getElementsByTagName("data").item(0).firstChild.nodeValue;
					
					var suggestArray=JSON.parse(data);
					
					var html="";
					for(i=0;i<suggestArray.length;i++) {
						html+="<a href=\"javascript:selectSuggest('"+suggestArray[i].word
								+"','"+suggestArray[i].url+"');\">"+suggestArray[i].word+"</a><br>";
					}
					
					document.getElementById("suggestList").innerHTML=html;
					
					document.getElementById("suggestDiv").style.display="block";
				} else {
					document.getElementById("suggestDiv").style.display="none";
				} 
			} else {
				alert("에러코드 = "+xhr.status);
			}
		}
	}
	
	function selectSuggest(word, url) {
		//alert("word = "+word+", url = "+url);
		
		document.getElementById("keyword").value=word;
		document.getElementById("choice").innerHTML="<a href="+url+">"+word+"</a>";

		document.getElementById("suggestDiv").style.display="none";

	}
	</script>
</body>

 

- 응답페이지

<%
	request.setCharacterEncoding("utf-8");

	String keyword=request.getParameter("keyword");
	
	List<SuggestDTO> suggestList=null;
	if(keyword!=null && !keyword.equals("")) {//전달받은 키워드가 있는 경우
		suggestList=SuggestDAO.getDAO().selectSuggestList(keyword);
	}
%>
<result>
	<% if(suggestList!=null && !suggestList.isEmpty()) {//검색결과가 있는 경우 %>
	<code>success</code>
	<data><![CDATA[
		[
		<% for(int i=0;i<suggestList.size();i++) { %>
			<% if(i>0) { %>
			,
			<% } %>
			{"word":"<%=suggestList.get(i).getWord()%>"
			,"url":"<%=suggestList.get(i).getUrl()%>"}
		<% } %>	
		]
	]]>
	</data>
	<% } else {//검색결과가 없는 경우 %>
	<code>empty</code>	
	<% } %>
</result>

 

$.ajax(object) : AJAX 기능을 제공하는 메소드

⇒ AJAX 기능을 구현하기 위한 정보를 메소드의 매개변수에 Object 객체로 전달

⇒ 매개변수에 전달되는 Object 객체에는 정해진 요소명에 값 또는 함수를 설정하여 AJAX 구현

 

비동기식의 응답결과는 XML or JSON 으로 응답한다. 보통은 XML을 이용한다.

 

요청 웹프로그램의 응답결과 형식과 dataType 속성값이 맞지 않을 경우 에러코드(200) 발생

⇒ AJAX의 dataType이 json일 경우 JSON.parse를 사용하지 않아도 자바스크립트 객체로 변경되어 지지만 XML 문서를 통해 가져오기 때문에 error로 넘어가게 된다.

 

ajax는 jQuery를 이용할 때가 많다.

ajax 비동기식 통신의 주의사항

ajax는 비동기식이기에 id 중복검사 중 else로 넘어가더라도 응답을 주는 사이에 그 다음 확인 과정 과정을 겪으면서 submit으로 넘어갈 수도 그전에 false 결과가 나올수도 있다.

→ 그렇기에 async: false(비동기식 통신 유무 - true, false)를 이용하여 중복검사 실행중에는 다른 요청이 들어올 수 없도록 한다.

→ 반드시 해야하는 작업의 경우 동기식 통신으로 요청과 응답을 주게 하여 멈추게 해야한다.

→ 일반적으로는 사용하지 않는다. 꼭 거쳐야 하는 과정에서만 사용하도록 한다.