외부의 오픈API가 callback을 지원하지 않으면 JSONP방식을 사용할 수 없습니다.

이런 경우 로컬의 도메인으로 세탁해주는 기능이 필요하고, 이 방식을 Proxy라고 얘기합니다.


간단한 샘플코드입니다.


package net.okjsp.ajax;


import java.io.BufferedReader;

import java.io.IOException;

import java.io.InputStreamReader;

import java.net.MalformedURLException;

import java.net.URL;

import java.net.URLConnection;


public class Proxy {

public static void main(String[] args) throws Exception {

String sb = Proxy.getSource("http://okjsp.tistory.com/rss");

System.out.println(sb);

}


public static String getSource(String string) throws MalformedURLException,

IOException {

URL url = new URL(string);

URLConnection yc = url.openConnection();

BufferedReader in = new BufferedReader(new InputStreamReader(

yc.getInputStream()));

String inputLine;

StringBuilder sb = new StringBuilder();

while ((inputLine = in.readLine()) != null) {

sb.append(inputLine).append("\n");

}

in.close();

return sb.toString();

}


}


proxy.jsp 입니다.

<%@page import="net.okjsp.ajax.Proxy"

%><%@ page contentType="text/plain; charset=utf-8"

    pageEncoding="UTF-8"

%><% 

String url = request.getQueryString();

%><%= Proxy.getSource(url) %>


이것을 호출하는 javascript입니다.

<!DOCTYPE html>

<html>

<head>

<title>AjaxProxy</title>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">

$(function() {

$.ajax({

/* url : "http://www.marinetraffic.com/map/getjson/sw_x:125.62/sw_y:36.52/ne_x:128.02/ne_y:37.14/zoom:10/fleet:/station:0/id:null", 

*/

url : "proxy.jsp?http://www.marinetraffic.com/map/getjson/?",

dataType : "json",

data : {

sw_x : 125.62,

sw_y : 36.52,

ne_x : 128.02,

ne_y : 37.14,

zoom : 10,

station : 0,

id : 'null'

},

success : function(vessel) {

$.each(vessel, function(key, value) {

$("#result").append(value + '\n');

})

},

error : function(xhr, status, error) {

$("#result").append(error);

            }

});

});

</script>

</head>

<body>

<pre id="result"></pre>

</body>

</html>


간단한 이클립스 프로젝트 첨부합니다.

ajaxproxy.zip


자바스크립트로 외부에서 데이터를 가져와서 표현하는 방법이 있습니다. http://dna.daum.net 에서 제공하는 오픈API를 이용해서 알아보겠습니다.

http://apis.daum.net/search/web?q=json&apikey=DAUM_SEARCH_DEMO_APIKEY&output=json&callback=callbackfn

위 주소는 다음에서 제공하는 apis.daum.net 웹 검색용 오픈API주소입니다. Querystring을 보면 다음과 같은 파라미터들이 전달됩니다.

q: 검색어

apikey: 다음에서 제공받은 apikey

output: 응답결과 데이터 형태 json 또는 xml

callback: JSONP를 위해 필요한 callback 함수 이름

* JSONP(다른 도메인 간의 데이터를 전달하기 위한 방법 http://en.wikipedia.org/wiki/JSONP) 


브라우저에서 호출하면 결과는 callbackfn({json format data}) 형태로 보입니다.


크롬 브라우저에서 ctrl+shift+J 를 눌러서 Console을 엽니다.

우선 callbackfn 함수입니다.

function callbackfn(res) { console.log(res); }


그리고 엘리먼트 하나를 만들어서 script 태그를 만들고 src에 위 주소를 붙입니다.

var element = document.createElement('script');

element.src = "http://apis.daum.net/search/web?q=json&apikey=DAUM_SEARCH_DEMO_APIKEY&output=json&callback=callbackfn";


head 태그는 배열로 리턴되기 때문에 첫 번째 요소에 script 엘리먼트를 붙입니다. 

document.getElementsByTagName("head")[0].appendChild(element);


위 오픈API 주소가 호출되면서 자동으로 callbackfn() 함수가 실행되는 것을 볼 수 있습니다.



어제 방송을 재밌게 했습니다.

녹화방송 일주일간 공개됩니다. 혹시 JavaScript 개발에 관심이 있다면 도움이 될 것입니다. 개발에 사용한 브라우저는 크롬브라우저입니다.


http://afbbs.afreeca.com:8080/app/read_ucc_bbs.cgi?szBjId=kenuheo&nStationNo=12409927&nTitleNo=5784764&szSkin=


제 방송국 주소는 http://afreeca.com/kenuheo 입니다.

즐겨찾기 하시면 매일 밤 자정에 시작되는 방송 알림을 앱을 통해서 받으실 수 있습니다.



화면처리 레이어(Presentation Layer)

화면처리 레이어는 MVC(Model-View-Controller) 패턴에서 View에 해당합니다. 화면처리 레이어의 구성은 다음과 같습니다.  


<그림> 화면처리 레이어 구성  




Spring MVC, Internationalization, Ajax Support, Security, UI Adaptor 이상 5가지 기능을 제공합니다.  


MVC 패턴의 프레임워크는 스프링 MVC, 스트럿츠(Struts), 웹워크(Webwork) 등이 있지만, 표준프레임워크에서는 스프링 MVC를 채택하였습니다.  


국제화(Internationalization) 기능은 다국어를 처리하는 방법입니다. 스프링 MVC의 LocaleResolver를 이용합니다. 브라우저 헤더, 세션, 쿠키 등에 있는 언어 정보를 이용해서 해당 언어로 페이지를 보여주는 기능입니다.  


Ajax 지원은 AjaxTags 라이브러리를 이용합니다. Ajax를 이용해 자주 사용되는 기능을 custom tag형태로 제공합니다.  


인증, 권한 같은 일반적인(통상적인) 개념의 Security 서비스는 Spring Security를 활용한 공통기반 레이어에

서 제공합니다. 화면처리 레이어의 Security 서비스는 입력값 유효성 검증 기능을 제공한다. 스프링과 연결되는 자카르타 커먼스 밸리데이터(Jakarta Commons Validator)를 이용합니다.  


UI 어댑터는 표준프레임워크와 RIA(Rich Internet Application) 솔루션을 연결하기 위한 기능입니다. 마이플랫폼 등의 상용 솔루션과 연결을 지원하는 기능입니다.  


외부 파일을 불러와서 웹페이지에 표시를 하는 가장 간단한 방법입니다. 

index.html

jquery-2.0.3.min.js

file.txt


순서로 페이지에 로딩됩니다.

http://gmyenu.appspot.com/gmyenu.jsp


Words

  • 교육(education)과 강의(instruction)는 다른 개념이다. 강의는 수학, 과학, 지리, 역사를 머릿속에 입력해 주는 것이지만, 교육은 강의를 통해 입력한 지식을 어떻게 삶에 적용하고 미래에 활용할지를 바르게 알도록 해 주는 것이다. 대다수의 학교는 강의에는 능숙하지만 진정한 교육은 잘 하지 못하는 것 같다. 
    (협동조합으로 기업하라, 스테파노 지마니 지음, 송성호 옮김, 붇돋움, p215)

안녕하세요.

메일 많이 기다리셨죠.

저도 이렇게 메일 쓰게 만들었던 느린 인터넷이 당황스러웠습니다.


한꺼번에 보내드릴 수도 있는데, 

5번 연재로 메일 보내드릴 생각입니다.


첫번째는 ajax원리입니다.


http://www.okjsp.net/seq/69451


function getXMLHttpRequest() {


  var xmlreq = false;


  if (window.XMLHttpRequest) {

    // Create XMLHttpRequest object in non-Microsoft browsers

    xmlreq = new XMLHttpRequest();

  } else if (window.ActiveXObject) {

    // Create XMLHttpRequest via MS ActiveX

    try {

      // Try to create XMLHttpRequest in later versions

      // of Internet Explorer

      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e1) {

      // Failed to create required ActiveXObject

      try {

        // Try version supported by older versions

        // of Internet Explorer

        xmlreq = new ActiveXObject("Microsoft.XMLHTTP");

      } catch (e2) {

        // Unable to create an XMLHttpRequest with ActiveX

      }

    }

  }


  return xmlreq;

}

function processAjax(url, params, callback) {

var req = getXMLHttpRequest();

req.onreadystatechange = function() {

if (req.readyState == 4) {

if(req.status == 200) {

eval(callback+"(req)");

}

}

}

url = url + params + "&t=" + new Date().getTime();

req.open("GET", url, true);

req.send("");


}

Ajax는 Microsoft에서 시작되었습니다.

iframe보다 진화된 형태로 ActiveXObject 객체로 시작했는데, 이것을 모질라 쪽에서 보고,

XMLHttpRequest 객체로 카피해서 사용한 것이죠.

아시다시피 MS쪽의 버전 하위 호환성은 보장하지 않기 때문에 프로그램으로 처리해야 할 경우의 수가 많습니다.

위 코드만 이해하시면 ajax의 기본 원리는 감(感) 잡으신 것입니다.

다음은 jQuery.ajax 보내드리겠습니다.

다음 주까지입니다.


감사합니다.

ps. 급하신 분은 https://github.com/kenu/gallery/tree/master/WebContent 를 참고하세요.

zip 버튼 클릭하시면 다운로드 가능합니다.

웹에서 엑셀을 표현하는 것은 아주 많이 요구됩니다. 구글처럼 석박사로 구성된 사람들이 가까스로 만든 것이 구글독스의 스프레드시트입니다. 점점 발전하고 있죠. 놀라울 정도로 업그레이드되고 있습니다. 처음 나왔을 때는 볼품없었는데 말이죠.

YUI를 통해서 그 정도는 아니지만 그냥 볼만하게 그리드테이블을 구현할 수 있습니다.
http://developer.yahoo.com/yui/examples/datatable/dt_basic.html 
페이지를 보면 다음과 같이 깔끔한 테이블이 보입니다. 가장 기본적인 테이블이죠.

헤더를 클릭하면 다음과 같이 정렬도 가능합니다.

페이지 우측에 보면 추가적으로 가능한 많은 예제들이 있습니다.

ext-js, jQuery, dojo 등 여러 Ajax 라이브러리들이 있고, 각각 그리드테이블을 지원하는 것으로 알고 있습니다. 어느 한 가지든 익숙해질 필요가 있지 않나 생각됩니다.

Yahoo User Interface (http://developer.yahoo.com/yui/)
- BSD 라이센스의 오픈소스 Ajax 프레임워크

구성요소
1. The YUI Compressor : javascript, CSS 용량 최소화 기능
2. YUI Doc : javascript API 문서 생성기
3. YUI Developer Tools : Logger, Profiler, Profiler Viewer, Test Utility 등 javascript용 디버깅, 성능 개선 도구
4. YUI Core : YAHOO Global Object, DOM Collection, Event Utility 등 코어
5. YUI Library Utilities :
Animation Utility
Browser History Manager
Connection Manager (for XHR/Ajax)
Cookie Utility
DataSource Utility
Drag and Drop Utility
Element Utility 
Get Utility (dynamic script/css loading)
ImageLoader Utility
JSON Utility
Resize Utility
Selector Utility 
The YUI Loader Utility
6. YUI Library Controls/Widgets :
AutoComplete
Button
Calendar
Carousel 
Charts [experimental]
Color Picker
Container (including Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog)
DataTable
ImageCropper 
Layout Manager
Menu
Paginator
Rich Text Editor
Slider
TabView
TreeView
Uploader [experimental]
7. YUI CSS Tools : 스타일 관련 도구
8. 그 밖에 290 여개의 예제와 검색 가능한 API, 입문 가이드

요즘은 DataTable 작업을 주로 하고 있습니다.

One Source, Multi Use 라는 말만 쉬운 것이 있습니다. 비즈니스 로직 하나를 구현해 놓으면 여러 다른 환경에서 쉽게 사용한다는 뜻입니다. 이클립스에서 제시하는 것은 데스크톱용 애플리케이션 RCP(Rich Client Platform), 웹용 RAP(Rich Ajax Platform), 모바일용 eRCP(embeded Rich Client Platform)입니다. 지난 자바원에서 이에 대한 강의를 듣고 고개를 끄덕거렸던 기억이 있는데, 관련해서 dw에 기사가 모두 올라왔습니다. RCP에 대한 것은 이전 블로깅에도 있습니다.

part1: http://www.ibm.com/developerworks/kr/library/tutorial/os-dw-os-eclipse-ganymede-pt1.html
part2: http://www.ibm.com/developerworks/kr/library/tutorial/os-dw-os-eclipse-ganymede-pt2.html
part3: http://www.ibm.com/developerworks/kr/library/tutorial/os-dw-os-eclipse-ganymede-pt3.html

세 문서를 따라해보면 이에 관한 감각을 익힐 수 있을 것입니다.



JSP tag file은 jsp spec 2.0부터 소개된 기술이죠. JSP로 서블릿을 자동생성하듯이 태그 파일로 커스텀 태그를 자동 생성해서 쓰게 됩니다.
이런 태그 파일을 이용해서 반복적으로 사용되는 Ajax함수를 자동 생성하고, 쉽게 사용할 수 있도록 설명한 글을 소개합니다.
http://www.ibm.com/developerworks/kr/library/wa-aj-simplejava1/

+ Recent posts