J/Jquery에 해당되는 글 6건

글

jQuery JSONP ajax 호출, JSON 관하여

J/Jquery 2014. 3. 19. 17:13

1. $.getJSON("url.jsp?callback=?", function(d){ // d.key; });

2. $.ajax({ url : "url.jsp",

dataType : "jsonp",

jsonp : "callback",

success : function(d){

// d.key;

}

});

 

JSON

기존 JSON

{ "user" : [{"first" : "Homer", "last" : "simpson"}, {"first" : "Hank", "last" : "Hill"}, {"first" : "Peter", "last" : "Griffin"}]}

 

Diet JSON

{"users" : {"cols" : ["first", "last"], "rows" : [["Homer", "Simpson"], ["Hank", "Hill"], ["Peter", "Griffin"]]}}

저작자표시 비영리 변경금지

'J > Jquery' 카테고리의 다른 글

[jQuery] $(document).ready(function(){});  (0) 2012.03.10
ajax 뒤로가기 구현  (0) 2012.03.08
jquery 사용시 prototype.js 충돌시 해결 방법  (0) 2012.03.03
ajax와 뒤로가기  (0) 2012.02.06
Ajax와 뒤로가기 버튼  (0) 2012.02.05

설정

,

트랙백

댓글

글

[jQuery] $(document).ready(function(){});

J/Jquery 2012. 3. 10. 23:47

$(document).ready(function(){});

// document가 ready 되면 function을 실행해라.

jQuery를 사용하기 위한 기본적인 코드입니다.

자바스크립트는

SCRIPT 엘리먼트로 코드를 작성하거나 JS파일을 연결하면 됩니다.

※ jQuery의 .ready() 메서드는 DOM이 로드되고 이미지가 로드되기 직전에 실행됩니다.
자바스크립트의 onload 등을 사용하면 이미지까지 모두 불러와야 실행됩니다.

간단히 표현...

$(document).ready(function(){});

↓

$().ready(function(){});

↓

$(function(){});

prototype이 사용되는 곳에 jQuery를 함께 사용하려면

jQuery(document).ready(function($){}); 처럼 사용할 수 있습니다.

때때로 $(document).ready(function($){}); 도 가능하며

역시 간결하게 할 수 있습니다.

[출처] [jQuery] $(document).ready(function(){});|작성자 구름나그네


'J > Jquery' 카테고리의 다른 글

jQuery JSONP ajax 호출, JSON 관하여  (0) 2014.03.19
ajax 뒤로가기 구현  (0) 2012.03.08
jquery 사용시 prototype.js 충돌시 해결 방법  (0) 2012.03.03
ajax와 뒤로가기  (0) 2012.02.06
Ajax와 뒤로가기 버튼  (0) 2012.02.05

설정

,

트랙백

댓글

글

ajax 뒤로가기 구현

J/Jquery 2012. 3. 8. 02:21

http://benalman.com/projects/jquery-hashchange-plugin/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>#hash test</title>
<script type="text/javascript" src="/skin/default/script/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/skin/default/script/jquery.ba-hashchange.1.3.min.js"></script>
<script type="text/javascript">
$(function() {
 $(window).hashchange(function() {
  switch(location.hash) {
   case '':
   case '#':
    $('#contents').text('nothing');
    break;
   case '#a':
   case '#b':
   case '#c':
    $('#contents').text('this is ' + location.hash);
    break;
  }
 }).hashchange();
});
</script>
</head>
<body>
<a href="#a">a</a>
<a href="#b">b</a>
<a href="#c">c</a>
<div id="contents"></div>
</body>
</html>

'J > Jquery' 카테고리의 다른 글

jQuery JSONP ajax 호출, JSON 관하여  (0) 2014.03.19
[jQuery] $(document).ready(function(){});  (0) 2012.03.10
jquery 사용시 prototype.js 충돌시 해결 방법  (0) 2012.03.03
ajax와 뒤로가기  (0) 2012.02.06
Ajax와 뒤로가기 버튼  (0) 2012.02.05

설정

,

트랙백

댓글

글

jquery 사용시 prototype.js 충돌시 해결 방법

J/Jquery 2012. 3. 3. 13:46

 


prototype.js 와 jquery를 같이 사용해야 될때 실제로 적용해보면

$()를 이용한 변수 접근자로 인한 충돌로 스크립트 오류가 발생 됩니다.

해결 방법은

<script type="text/javascript">jQuery.noConflict();</script>

이부분을 추가해줍니다.

이로서 jqeury 사용시

$(document).ready(function($){ });

대신에

jQuery(document).ready(function($){ });

사용으로 인해 해결할수 있다.

찾아보니

var $j = jQuery.noConflict(); 이나
$j = jQuery.noConflict(); 로

이렇게
$j(document).ready(function($){ });

jQuery 대신에 임의로 넣을 수 있다는데 저는 에러가 나네요..;


예제)

<script type="text/javascript" src='prototype.js'></script>
< script type="text/javascript" src="jquery.js"></script>
< script type="text/javascript">jQuery.noConflict();</script>


'J > Jquery' 카테고리의 다른 글

jQuery JSONP ajax 호출, JSON 관하여  (0) 2014.03.19
[jQuery] $(document).ready(function(){});  (0) 2012.03.10
ajax 뒤로가기 구현  (0) 2012.03.08
ajax와 뒤로가기  (0) 2012.02.06
Ajax와 뒤로가기 버튼  (0) 2012.02.05

설정

,

트랙백

댓글

글

ajax와 뒤로가기

J/Jquery 2012. 2. 6. 00:03


참조 : http://blog.naver.com/barty82?Redirect=Log&logNo=80129299253


참조해야할 것 : http://tkyk.github.com/jquery-history-plugin/#documentation

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="jquery.history.js"></script>
  <script type="text/javascript">
   /**

    * 동적으로 html을 변경시 $.history.load() 함수호출시 이곳이 호출되어진다.

    */

   function historyStorage(hash) {

    if(hash) {

     $('#field').text(hash);

    } else {

     $('#field').empty();

    }

   }


   jQuery(document).ready(function() {

    //뒤로가기 버튼 클릭시 생성된 iframe을 history.back() 하면서historyStorage에 매개변수를 넘겨주는듯하다.

    $.history.init(historyStorage);

    //버튼정의
    
    $('button').click(function() { // button 클릭시 이벤트 처리를 함.
     $("h1").text($(this).html()); // 뒤로가기 할 시에 차이점을 볼 수 있다. 
     $.history.load($(this).html()); // html() 함수 형식으로 반환하여 history.load 함수에 전달. 말그대로 로드하고 있음.
   // 작동은 init()함수에 초기화했던 콜백함수를 실행시킨다. 실행 시키는 순간 history.js 어딘가에 history 시키는 것과같이 로드하고 있는 듯(로드했던 값을 ->(즉, $(this).html())하다. 그러므로? 뒤로가기를 누를 경우 전에 로드되었던 history를 되돌려준다. 첨에는 아무것도 로드되어있지 않았으니깐 깨끗한 상태로 ^^?

     return false;

    });
   });

  </script>
 </head>
 <body>
  <h1>jQuery AjaxHistory Plugin</h1>
  <button>
   aaa
  </button>
  <button>
   bbb
  </button>
  <button>
   ccc
  </button>
  <div id="field"></div>
 </body>
</html>

'J > Jquery' 카테고리의 다른 글

jQuery JSONP ajax 호출, JSON 관하여  (0) 2014.03.19
[jQuery] $(document).ready(function(){});  (0) 2012.03.10
ajax 뒤로가기 구현  (0) 2012.03.08
jquery 사용시 prototype.js 충돌시 해결 방법  (0) 2012.03.03
Ajax와 뒤로가기 버튼  (0) 2012.02.05

설정

,

트랙백

댓글

글

Ajax와 뒤로가기 버튼

J/Jquery 2012. 2. 5. 23:44
출처 : http://blog.naver.com/dlckdrl?Redirect=Log&logNo=50112546375


플러그인 다운은

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>jQuery AjaxHistory Plugin</title>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>

<script type="text/javascript" src="./jquery.history.js"></script>

<script type="text/javascript">

/**

* 동적으로 html을 변경시 $.history.load() 함수호출시 이곳이 호출되어진다.

*/

function historyStorage(hash){

if(hash){

$('#field').text(hash);

}else{

$('#field').empty();

}

}

jQuery(document).ready(function(){

//뒤로가기 버튼 클릭시 생성된 iframe을 history.back() 하면서historyStorage에 매개변수를 넘겨주는듯하다.

$.history.init(historyStorage);

//버튼정의

$('button').click(function(){

$.history.load($(this).val());

return false;

});

});

</script>

</head>

<body>

<h1>jQuery AjaxHistory Plugin</h1>

<button>aaa</button>

<button>bbb</button>

<button>ccc</button>

<div id="field"></div>

</body>

</html>

[출처] jQuery AjaxHistory Plugin-뒤로가기|작성자 지구촌아이


이번에는 Ajax 플로그인 중 History라는 플로그인을 살펴보도록 하겠습니다.


Ajax 기술은 페이지에 필요한 데이터만 request를 하고 response를 하여 Web App.이 구동되도록 구성이 되고 있습니다.

이렇게 편하고 좋은 기술에도 역시 단점이 있습니다.

바로 브로우저의 '뒤로가기' 버튼을사용 할 수 없다는 것 입니다.


인터넷 기술이 출연한 후 전세계적으로 기본이 되는 UX인 '뒤로가기' 버튼을

Ajax 기술로 인하여 사용할 수 없다는 것은 기획적인 부분을 포함하여

UX적인 측면에서 정말 Critical한 issue가 아닐 수 없습니다.


Ajax History 플로그인은 그러한 단점을 보완해주기 위해 나온 플로그인입니다.

사실 자바스크립트 기본 함수에서 'window.location.hash' 객체를 통해

비슷한 기능을 구현할 수 있습니다. 하지만, 크로스 브라우져 이슈를 해결해 놓은

좋은 플로그인을 사용하는 것이 더 현명한 방법이 아닐가 싶네요.^^


그럼 예제 소스를 살펴보도록 합시다.




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>jQuery Cookbook - 17.6 - Queuing Ajax History</title>
 <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
</head>
<body>
 <h1>jQuery Cookbook - 17.6 - Queuing Ajax History</h1>
 <a href="#apples" class="word">apples</a>
 <a href="#orange" class="word">orange</a>
 <a href="#bananas" class="word">bananas</a>
 <p id="definition"></p>
<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.history.js"></script>
<script type="text/javascript">
 function historyLoad(hash){
  if(hash){
   switch(hash){
    case 'apples':{
     $('#definition').load('resultData/bookListResult.txt', {word:hash});
     break;
    }
    case 'orange':{
     $('#definition').load('resultData/bookListResult2.txt', {word:hash});
     break;
    }
    case 'bananas':{
     $('#definition').load('resultData/bookListResult3.txt', {word:hash});
     break;
    }
   }
  }
  else{
   $('#definition').empty();
  }
 }



 jQuery(document).ready(function(){
      //1. init()함수는 Ajax 요청을 처리하기 위한 콜백 함수를 매개변수로 전달, 그래서 word 링크와 바인딩함 
  $.history.init(historyLoad);
  $('a.word').click(function(){
     //2. load() 함수에 해쉬 값을 넘겨 등록되어 있는 함수에 전달하여 Handling한다.
   $.history.load($(this).html());
   return false;
  });
 });
</script>
</body>
</html>
[출처] [jQuery Plugin 소개] Ajax History|작성자 바티

'J > Jquery' 카테고리의 다른 글

jQuery JSONP ajax 호출, JSON 관하여  (0) 2014.03.19
[jQuery] $(document).ready(function(){});  (0) 2012.03.10
ajax 뒤로가기 구현  (0) 2012.03.08
jquery 사용시 prototype.js 충돌시 해결 방법  (0) 2012.03.03
ajax와 뒤로가기  (0) 2012.02.06

설정

,

트랙백

댓글

1
태그| 방명록| 관리자| 쓰기
안뇽헬로's Blog is powered by Daum Tistory

티스토리툴바