'jQuery'에 해당되는 글 6건

반응형

jQuery 활용하기

$(document).ready() 

DOM 데이터만 로드되면 바로 실행된다. 그러므로 window.onload 보다 빨리 실행된다.


jQuery를 이용한 실행 시점 순서이다.

$(window).load(function() { 모두 로드된 후에 처리 });

$(document).ready(function() { DOM객체 로드시 처리 });

$(function() { 로딩 될 때 });


반응형
블로그 이미지

cocy

조금은 가볍게! 시작은 새롭게!

,
반응형

- 폴링이란? 

통신에서, "폴링"은 한 프로그램이나 장치에서 다른 프로그램이나 장치들이 어떤 상태에 있는지를 지속적으로 체크하는 전송제어 방식으로서, 대체로 그들이 아직도 접속되어 있는 지와 데이터 전송을 원하는지 등을 확인한다.

쉽게 말해서 Status Bar, Dash Board 등에 쓰이는 실시간처리 방식이다.

환경은 다양할 수 있다. 예를 들면 JSP 에서 response.setIntHeader를 사용하여 Auto Refresh 처리를 해주게 되면 이역시 폴링이다. 하지만 누가 요즘에 Refresh 방식의 폴링을 선호할까.. 아래는 Jquery 의 Ajax 기법을 통한 Polling 예제이다.

Traditional Polling

The setInterval Technique
setInterval(function(){
    $.ajax({ url: "server", success: function(data){
        //Update your dashboard gauge
        salesGauge.setValue(data.value);
    }, dataType: "json"});
}, 30000);

위의 소스는 전통적인 폴링 기법중  setInterval 을 사용한 기법으로 매 30초간 정해놓은 이벤트를 출력한다. 하지만 서버의 응답이 30초 보다도 더 느려질경우엔? 

어찌보면 이 기법은 도박이다. 반응성이나 사양이 좋지않은 서버나 네트워크 전체의 호스트를 고려한다면.. 이러한 할당된 시간에 리턴값이 오지않는 위험은 사전에 예방되어야한다. 최악의 경우 당신은 같은 호출안에서 Ajax 큐의 배열이 다 뻗어버릴 수 있다. Anyway,  별로 좋지않다.


The setTimeout Technique

(function poll(){
   setTimeout(function(){
      $.ajax({ url: "server", success: function(data){
        //Update your dashboard gauge
        salesGauge.setValue(data.value);

        //Setup the next poll recursively
        poll();
      }, dataType: "json"});
  }, 30000);
})();

이 기법은 settimeout을 통한 재귀호출방식인데 좋은점은 시간의 사이마다 무슨일이 일어났는지 파악하기 쉽다는점이다. 음 장단점은 있기 마련인데 Manual을 봐도 이해하기가 힘들다. 아래의 원문으로 읽으면 좋을것같다.

As you can see, jQuery's Ajax call can take as long as it wants to. So, this pattern doesn't guarantee execution on a fixed interval per se. But, it doesn't guarantee that the previous interval has completed before the next interval is called.


두가지 방식다 단점이 있고 감수해야하는 위험이 있다. 그래서 결과적으로 우리가 도입해야하는건 Long Polling 기법. 사실 위의 내용은 그닥 필요없고 이것만 보고 도입하면 된다.

Long Polling - An Efficient Server-Push Technique

(function poll(){
    $.ajax({ url: "server", success: function(data){
        //Update your dashboard gauge
        salesGauge.setValue(data.value);

    }, dataType: "json", complete: poll, timeout: 30000 });
})();

 데이터베이스 처리중 커넥션 풀 기법이 있는데 비슷한 개념이다. 서버와 접속을 열어둔 상태에서 요청이 오면 바로 바로 처리한다. 요청이 없을시에는 리소스를 거의 먹지않는다. 아래의 원문을 보면 이해가 쉬울 것 같다.

Applications built with Long Polling in mind attempt to offer realtime interaction, using a persistent or long-lasting HTTP connection between the server and the client.

The self executing JavaScript poll function combined jQuery Ajax's repeating timeout interval means this is a very efficient server-push technique.


정리를 했지만 쉽지않다. 쉽게 이해하면 일반 커넥션과 커넥션 풀의 차이? 그리고 Jquery Ajax 경우 Long Polling에 최적화되어 있다.


출처 : http://tkjeon.tistory.com/6

반응형

'코드자료실 > javascript' 카테고리의 다른 글

[jquery]onload 시점  (0) 2014.09.29
[jquery] ie7, ie6 json is undefined  (0) 2013.03.13
[jquery] jsonp 사용  (0) 2013.01.24
[jquery] jquery ui tabs  (0) 2013.01.16
[자바스크립트] 문자>수치, 수치>문자 변환  (0) 2012.12.23
블로그 이미지

cocy

조금은 가볍게! 시작은 새롭게!

,
반응형

jQuery의 JSONP 지원

jQuery 버전 1.2부터는 JSONP 호출에 대한 네이티브 지원이 제공되고 있다. JSONP 콜백을 지정한 경우 다른 도메인에 있는 JSON 데이터를 로드할 수 있으며 JSONP 콜백은 url?callback=?라는 구문을 사용하여 지정할 수 있다.

jQuery에서는 ?가 호출할 생성된 함수 이름으로 자동 변환된다. Listing 4에서는 이 코드를 보여 준다.


Listing 4. JSONP 콜백 사용하기
jQuery.getJSON(url+"&callback=?", function(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
});

이를 위해 jQuery는 스크립트가 삽입될 때 호출되는 전역 함수를 창 오브젝트에 추가한다. 이 함수는 완료 후에 제거된다. jQuery는 도메인 내 호출에 대해서도 최적화 기능을 제공한다. 동일한 도메인에 대한 요청이 발생할 경우 jQuery는 해당 요청을 일반적인 Ajax 요청으로 변환한다.

JSONP 지원을 사용하는 예제 서비스

앞의 예제에서는 정적 파일(ticker.js)을 사용하여 JavaScript를 웹 페이지에 동적으로 삽입했다. JSONP 응답을 리턴하기는 하지만 URL에 콜백 함수 이름을 정의할 수 없었기 때문에 JSONP 서비스가 아니었다. 그렇다면 실제 JSONP 서비스로 변환하려면 어떻게 해야 할까? 이 기사에서는 여러 가지 방법 중에서 PHP와 Java를 사용하는 두 가지 예제를 설명한다.

먼저 서비스에서 요청 URL에 포함된 callback 매개변수를 허용한다고 가정하자. (매개변수 이름 자체는 중요하지 않지만 클라이언트와 서버에서 동일한 이름을 사용해야 한다.) 그리고 서비스에 대한 요청이 다음과 같다고 가정하자.

http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=showPrice

여기에서 symbol은 요청된 티커 기호를 나타내는 요청 매개변수이며, callback은 웹 애플리케이션에서 사용하는 콜백 함수의 이름이다. Listing 5의 코드를 사용하여 jQuery의 JSONP 지원이 포함된 이 서비스를 호출할 수 있다.


Listing 5. 콜백 서비스 호출
jQuery.getJSON("http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=?", 
function(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
});

이 코드에서는 실제 함수 이름 대신 ? 기호를 콜백 함수 이름으로 입력했다. 이는 jQuery가 ? 기호를 인라인 함수를 호출하는 생성된 함수 이름(예: jsonp1232617941775)으로 바꾸기 때문이다. 이 기능을 활용하면 showPrice()와 같은 함수를 자유롭게 정의할 수 있다.

Listing 6에서는 PHP로 구현한 JSONP 서비스의 일부를 보여 준다.


Listing 6. PHP로 구현한 JSONP 서비스의 일부
$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"});

Listing 7에서는 동일한 기능을 수행하는 Java™ Servlet 메소드를 보여 준다.


Listing 7. Java Servlet으로 구현한 JSONP 서비스
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
  throws ServletException, IOException {
	String jsonData = getDataAsJson(req.getParameter("symbol"));
	String output = req.getParameter("callback") + "(" + jsonData + ");";

	resp.setContentType("text/javascript");
          
	PrintWriter out = resp.getWriter();
	out.println(output);
	// prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"});
}

그렇다면 이제 단일 웹 페이지에 표시하기 위해 써드파티 서버의 컨텐츠를 통합하는 매시업을 빌드하려면 어떻게 해야할까? 간단하다. 써드파티 JSONP 서비스를 사용해야 한다. 이 기사에서는 이들 서비스 중 일부를 소개한다.

바로 사용할 수 있는 JSONP 서비스

이제 JSONP를 사용하는 방법을 알고 있으므로 바로 사용할 수 있는 몇몇 JSONP 웹 서비스로 애플리케이션과 매시업을 빌드해 볼 수 있다. 다음은 후속 개발 프로젝트를 위한 출발점이다. (힌트: 지정된 URL을 브라우저의 주소 필드에 붙여 넣으면 결과 JSONP 응답을 확인할 수 있다.)

Digg API: Digg의 최신 스토리

http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript
&callback=?

Geonames API: 우편번호에 해당하는 위치 정보

http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?

Flickr API: Flickr의 최신 고양이 사진

http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any
&format=json&jsoncallback=?
                

Yahoo Local Search API: 우편번호 10504 지역의 피자 검색

http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza
&zip=10504&results=2&output=json&callback=?

반응형
블로그 이미지

cocy

조금은 가볍게! 시작은 새롭게!

,
반응형

http://keith-wood.name/uiTabs.html

반응형
블로그 이미지

cocy

조금은 가볍게! 시작은 새롭게!

,
반응형

jquery 튜토리얼 

http://blog.naver.com/acecode?Redirect=Log&logNo=130075281189



반응형
블로그 이미지

cocy

조금은 가볍게! 시작은 새롭게!

,
반응형

http://spaceforaname.com/galleryview/



Development

GalleryView is in active development, and new features are being implemented on a regular basis. Below is a list of currently implemented options, as well as a list of options I plan on implementing as development continues.

Implemented Options

optiontypedefault valuedescription
transition_speedint1000the duration of photo transition animations in milliseconds.
transition_intervalint4000the delay between automated slideshow transitions in milliseconds.
easingstring'swing'the easing method used in photo and thumbnail animations. any custom easing method may be used.
show_panelsbooleantrueflag to toggle display of main photo panel. set to false to create a carousel-style gallery. (not fully implemented)
show_panel_navbooleantrueflag to toggle display of next and previous buttons in the gallery panel.
enable_overlaysbooleanfalseflag to toggle display of informational image overlays.
panel_widthint800width of image panel in pixels.
panel_heightint400height of image panel in pixels.
panel_animationstring'fade'the animation method used for panel image transitions. Options are 'fade', 'crossfade', 'slide'
panel_scalestring'crop'the scaling method for panel images. Options are 'crop', 'fit'.
overlay_positionstring'bottom'the positioning of informational panel overlays. Options are 'bottom', 'top'
pan_imagesbooleanfalseflag to toggle drag-based panning of oversized panel images.
pan_stylestring'drag'panning method used. 'drag' = user clicks and drags image to pan, 'track' = image automatically pans based on mouse position
start_frameint1index indicating which image to display when gallery loads
show_filmstripbooleantrueflag to toggle display of navigation filmstrip.
show_filmstrip_navbooleantrueflag to toggle display of filmstrip-based navigation buttons.
enable_slideshowbooleantrueflag to toggle play/pause button and ability to start/stop slideshow
autoplaybooleanfalseflag to automatically start slideshow when gallery loads
filmstrip_positionstring'bottom'location of filmstrip in relation to panel. Options are 'top', 'left', 'bottom', 'right'.
frame_widthint70width of filmstrip frames in pixels.
frame_heightint40height of filmstrip frames in pixels.
frame_opacityfloat0.4the default opacity of filmstrip frames (range 0.0 - 1.0)
frame_scalestring'crop'the scaling method for frame images. Options are 'crop', 'fit'.
frame_gapint5distance between frames in pixels.
show_captionsbooleanfalseflag to toggle display of frame captions (populated by image's titleattribute).
show_infobarbooleantrueflag to toggle display of image counter bar.
infobar_opacityfloat1.0the default opacity of infobar (range 0.0 - 1.0)

Future Options

optionintended function
overlay_opacityTo allow the creation of translucent overlays by setting the opacity of the overlay's container.
pan_styleTo provide the option of multiple panning methods, including the current 'drag' method as well as a 'track' method where the image pans as the mouse moves within the gallery.
pan_smoothnessTo allow the user to control the speed and smoothness of 'track' style panning.
start_imageTo allow the user to load the gallery on an arbitrary image.
filmstrip_sizeDefine number of images visible in filmstrip-only, carouself style galleries.

반응형
블로그 이미지

cocy

조금은 가볍게! 시작은 새롭게!

,