외부의 오픈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


저작자표시

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

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 버튼 클릭하시면 다운로드 가능합니다.

저작자표시
javascript의 sort를 이용해서 처리할 뻔 했습니다. 메일링리스트 뒤져보다가 sortColumn 발견하고 한 줄로 처리했습니다. 휴~

var myDataSource = new YAHOO.util.DataSource(data.contents.ranks);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
    fields: ["rankid","rankName"]
};
//function sortby(a,b) {
//    return a["rankid"] - b["rankid"];
//}
//myDataSource.liveData.sort(sortby);
...
var myColumnDefs = [
    {key:"rankid", label:"id", sortable:true, resizeable:true},
    {key:"rankName", label:"name", sortable:true, resizeable:true},
    {key:"",label:"",resizeable:true, formatter:this.formatControl}
   ];
var myDataTable = new YAHOO.widget.DataTable("ranklist", myColumnDefs, myDataSource);
myDataTable.sortColumn(myDataTable.getColumn("rankid"));


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

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 작업을 주로 하고 있습니다.

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

+ Recent posts

티스토리툴바