jquery ajax 요청 절대경로 다른도메인

Ajax 2010.03.16 20:28

ajax 요청 절대경로 다른도메인

ajax 요청하기

위 포스팅에서 ajax로 요청하는 방법을 보았다. 문제는 상대경로는 문제없이 읽어들일수 잇는데. 절대경로 즉 다른 도메인이나 서비스를 제공하진 않는 사이트라면 그렇지않다. 이는 대부분의 브라우저가 페이지를 다운로드한 서버외에 다른 서버에 HTTP요청하는 것을 막고있기 때문이다. 즉 보안적으로 브라우저의 당연히 갖춰야할 조취라 할수있다.

XSS

크로스 사이트 스크립팅(Cross-Site Script)

앞서 말한 ajax요청등을 악의적으로 사용하는경우를 말한다. 예로들자면 나쁜코드가 다른사용자의 브라우저에서 수행되도록 하는공격,게시판이라든가 쿠키에 접근가능한 일이 가능해진다.요즘 거의 이런일이 없고 보안상 잘준비되있다.

절대경로, 다른도메인에서 읽기

하지만 정상적으로 사용하고싶은사람은 어떻게하면 좋을까.요즘은 자신의 서버에 올려도 절대경로를 입력하면 보안상 작동하지않는다.

 $('#test').load('http://blog.rss.naver.com/어쩌고저쩌고.xml'});

위소스는 .load함수를 이용해서 네이버의 어떤블로그의 xml을 요청하는 경우이다 하지만 실행되지않는다.이를 해결방안으로는 크게 4가지가 있다.

  • JSON
  • 상호간의 규약된약속
  • php이용
  • cURL

JSON 형식의 경우는 xss가 허용된다 하지만 결코 온전히 존해하거 업데이트되는 데이타파일을 변환한다거나 새로 JSON형식으로 작성하는일은 반갑지 않은일이다. 두번쨰로 상호간의 규약된 약속이 있을경우이다.마지막으로 드 가지 방법을 알아보자

php파일이용

자신이 사용할 서버로 콘테츠를가지고 와서 jquery로 전달하는 간단한 php소스를 만드는방법이다

 $('#test').load('tempt.php'});

위와같이 사용하는서버에 만들 파일경로를 입력하고.

header('Content-Type: text/xml');
print file_get_contents('http://blog.rss.naver.com/어쩌고저쩌고.xml');

이와같이 file_get_contents를 사용한다. 문제는이방법역시 보안상 먹히지않는 것이 요즘대부분이라는점이다. 마지막 방법을 보자

cURL

 header('Content-Type: text/xml');
   $curl = curl_init();
   curl_setopt($curl, CURLOPT_URL, 'http://blog.rss.naver.com/어쩌고저쩌고.xml');
   curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
   curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, $timeout);
   print curl_exec($curl);
   curl_close($curl);
 

이에대해선.. http://en.wikipedia.org/wiki/CURL

보안

보안이 강화된웹에서 배우기위해 간단히 테스트하기 쉽지않은 것들이다.실전에서는 거의 두번째방법인 상호 규약된 체결과 약속하에 이루어 진다. 이런방법이있고 돌아간다 는점을 이해하면 되겠다.

저작자 표시
신고

설정

트랙백

댓글

jquery ajax 요청 함수

Ajax 2010.03.15 22:03

jquery ajax 요청 함수

여러 예제를 봤겠지만 요청방식에는 다음과 같은 종류가 있다.

  • getJSON
  • get
  • post
  • ajax

위의 방식으로 요청하는 파라메터는 ajax빼고는 비슷하다

url 데이타 함수 이순서로 입력.예제를 참고하자

$.get('/stest.php', {'param':'jquery'}, function(data) { 
...});

가장간단한 방식은 load이다.

load

어떤 위치의 test.html을 불러온다면

 $('#test').load('/test.html'});

load는 가장간단한 방식니다. 데이타형식이 객체라면 post 아니면get 방식으로 불러온다. 또 차이점은 문서의 일부분을 불러올수있다는점

 $('#test').load('/test.html' #part});

위의 소스는 test.html이라는 문서의 아이디(id) part부분만을 불러올것이다.

get,getJSon,get

일부 매개변수들을 서버 상의 페이지로 전달해야 할 경우가 종종 있다. jQuery를 사용하면 이는 매우 간단하다. 필요한 메소드가 어떤 것인지에 따라서 $.post()와 $.get() 중 선택한다. 선택적 데이터 객체와 콜백 함수를 전달할 수도 있다. 아래는 데이터를 보내고 콜백을 사용하는 예제이다.

$.post('test.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('테스트 성공요.');
});

getJSon은 json파일을 이용할때이다 별반다를바없다.

$ajax()메소드

이 메소드는 위방식을 모두 이용할 수 있다.앞서 데이타 타입, 전송방법등을 보았다면 여기선 그걸 지정해주고 요청에맞게한다. 아래예제를 보자

$.ajax({
    url: 'test.xml', //url
    type: 'GET', //post,get,등..전송방식
    dataType: 'xml',//데이타 타입
    error: function(){// 실패시 실행함수
        alert('테스트 실패요');},
    success: function(xml){// 성공시 실행 함수
     alert('테스트 성공요');
    } });

잘알다시피 ajax서버가 구현될때 가능한것이다.무작정 브라우저 듸우고 왜안되냐고 질문하기도 하는데 자기컴퓨터에 서버를구축하든지 아니면 웹에 올려서 테스트해봐야 결과가 나온다.


저작자 표시
신고

설정

트랙백

댓글

Ajax로 구현 가능한 예제

Ajax 2010.02.18 14:12

Ajax로 구현 가능한 것들은 무엇이 잇는가?

Ajax로 구현 가능한 것들은 무엇이 있는지 살펴 보자

간단한 채팅솔루션
틀별히 회원 가입이나 별도 인증없이 바로 채팅가능하게 할수있다
폼입력 유효성검사
폼입력에 대하여 올바르게 입력했는지 확인하는 유효성검사를 할 수있다.
실시간 단어제안과 자동완성
포털사이트의 필수가 되는 항목이다. 대표적인 네이버,다음. 구글등 이미 경함해봤겠지만 글자를입력하면 아래에 간단하게 자동완성되도록 해준다.
RSS리더기
rss리더기도 작성할수있다.대표적인 구글리더기와 같이구현한다
드래그&드롭 기능
드래그, 드롭으로 화면의 UI를 컨트롤 할 수 있게 한다. 필수적이진 않다, 대표적인것으로 BBC홈페이지에 가보면 알수있다.


저작자 표시
신고

설정

트랙백

댓글

ajax 테이블 페이징

Ajax 2010.02.17 21:17
ajax 테이블 페이징

jquery를 이용한 ajax 테이블 페이징

테이블에 여러자료가 있고 그것이 아주많다면 한페이지에 다루기 힘들것이다. 따라서 일부분만보여주고 페이지로 나누어 보여주려고 한다.

여전히 네이버 베스트셀러리스트를 참조했다. 소스가기니 접어두었다.아래 참조

더보기

아래와 같은 순서로 해볼것이다.

  • 보여줄 페이지설정
  • 전체 페이지계산
  • 스크립트로 페이지버튼html 소스짜기

보여줄 페이지 설정

한페이지당 우리는 표에서 5개를 봉줄것이다. 따라서 다음과 같이 정한다.

 $('table.paginated').each(function() {
     var currentPage = 0;
     var numPerPage = 5;
     var $table = $(this);
     var repaginate = function() {
       $table.find('tbody tr').hide()
	  //기본적으로 모두 감춘다
         .slice(currentPage * numPerPage,
           (currentPage + 1) * numPerPage)
         .show();
	 //현재페이지+1 곱하기 현재페이지까지 보여준다
     };    

currentPage로 초기값을 0으로주었다.그리고 numPerPage로 기본값을 5로주고 그아래는 계산하고 .slice()메소드를 이용해 필요한 만큼 보여주도록 되어있다.

페이지계산 하기

표가 여러개있고 그중 우리는 5개식 보여주기로 했다. 전체표의 열을 5로나누었을때 소수가 되면 페이지계산이안되니 반올림해서 페이지를 늘이도록하자.

	 
     var numRows = $table.find('tbody tr').length;
	 //length로 전체길이구함
     var numPages = Math.ceil(numRows / numPerPage);
	 //Math.ceil를 이용하여 반올림

위와 같이 한다면 기본소스에서 14열을 사용했으니 반올림하여 14/5 = 3. 따라서 3개의 페이지가 만들어질 것이다.

페이지버튼 html 소스짜기

마지막으로 해 줄 것은 페이지버튼을 만들어주는것이다. 페이지가 늘어남에따라 이버튼역시 늘어나니 스크립트로 만들어줘야한다.

	
     var $pager = $('
'); //pager라는 클래스의 div엘리먼트 작성 for (var page = 0; page < numPages; page++) { $('').text(page + 1) .bind('click', {newPage: page}, function(event) { currentPage = event.data['newPage']; repaginate(); //for구문을 이용하여 페이지 수만큼 //버튼을 구현 $(this).addClass('active') //활성화된페이지에는 active라는 클래스명을 붙여준다. .siblings().removeClass('active'); }).appendTo($pager).addClass('clickable'); } $pager.insertBefore($table) //앞서 설정한 페이지키를 삽입 .find('span.page-number:first').addClass('active'); });

위에서 이벤트가 .click으로 바로 가지않고 .bind로 설정된것은 변수들이 함수밖에 정의되있는것을 참조하기 때문이다. 그냥.click으로 처리한다면 빈페이지가뜰것이다. 이로서 완성되었다.3개의 페이지버튼이나오것이고 한페이지에 5열이 나올 것이다.

다시 둘러보기

이 함수가 정열과 함께 사용되려면 정열이될때마다 페이징이 실행되도록 하면된다.이때 역시 외부에서 참조 하도록 .bind를 쓴다. 최종 코드를보자

	
 $(document).ready(function() {
  $('table.paginated').each(function() {
    var currentPage = 0;
    var numPerPage = 5;
    var $table = $(this);    
 
    $table.bind('repaginate', function() {
     $table.find('tbody tr').hide()
        .slice(currentPage * numPerPage,
          (currentPage + 1) * numPerPage)
        .show();});
        
    var numRows = $table.find('tbody tr').length;
    var numPages = Math.ceil(numRows / numPerPage);
    var $pager = $('
'); for (var page = 0; page < numPages; page++) { $('').text(page + 1) .bind('click', {newPage: page}, function(event) { currentPage = event.data['newPage']; $table.trigger('repaginate'); $(this).addClass('active') .siblings().removeClass('active'); }).appendTo($pager).addClass('clickable');} $pager.insertBefore($table) .find('span.page-number:first').addClass('active');});});

마지막으로 호출하기위해 앞쪽의 정렬키뒤에 $table.trigger('repaginate'); 를 추가 해준다

	
           .
           ..
           ...
	   $table.find('th').removeClass('sorted-asc')
             .removeClass('sorted-desc');
           if (sortDirection == 1) {
             $header.addClass('sorted-asc');
           }
           else {
             $header.addClass('sorted-desc');
           }
           $table.alternateRowColors();

	   $table.trigger('repaginate');     });

예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/T_usePage.html


저작자 표시
신고

설정

트랙백

댓글

jquery를 이용한 ajax 테이블 정렬 순서변경

Ajax 2010.02.17 18:07

jquery를 이용한 ajax 테이블 정렬 순서변경

오름차순과 내림차순 방법으로 모두 정렬하려면 이번엔 다른 키코드를 삽입해야 한다. 이제까지는 오름차순만 사용했지만 이번에 변수를 넣어서 클릭시 차순이 변화되도록 해보자.

 if (a.sortKey < b.sortKey) return -1;
 if (a.sortKey > b.sortKey) return 1;
 return 0;

저번에 보았던 비교 값을 이용한 정렬이다. 만약 숫자가 작다면 -1 값을 반환 크다면 1을 반환 상관없으면 0을 반환하도록 되어있다. 이를이용하여 오름차순으로 정렬되게 했다. 자그럼다음코드를 보자

 if (a.sortKey < b.sortKey) return 1;
 if (a.sortKey > b.sortKey) return -1;
 return 0;

이 경우는 단지 결과값에 1과 -1을 바꾸어 주었을뿐이다.따라서 그결과값도 내림차순으로 나온다,.이번엔 반환하는값을 클릭에 따라다르게 하여 오름차순, 내림차순을 보두 고려해보자

 var sortDirection = 1;
 if ($header.is('.sorted-asc')) {
 sortDirection = -1;
  }

반환하는 값을 위하여 변수를 sortDirection으로 지정해주었다.기본값을 1로 정해주었고 그상태가 반대라면 -1로 주도록되어있다.클래스명을 sorted-asc(오름차순의 경우),sorted-desc(내림차순의 경우)로 주도록 하겠다.

 $table.find('th').removeClass('sorted-asc')
    .removeClass('sorted-desc');
      if (sortDirection == 1) {
       $header.addClass('sorted-asc');
          }
      else {
       $header.addClass('sorted-desc');
        }

마지막으로 적용한 것이다.th엘리먼에서 앞에미리 기본값으로 sorted-asc를 붙인것을 지우고 sorted-desc을 붙인다. 현재값에 따라 오름차순 내림차순으로 바뀌게 된다.

요약

그전과 차이점은 단순 리턴하는 값을 변수하나를주어서 다르게 했을 뿐이다.

  • 먼저 변수이름을 지정한다.sortDirection 이라고 정했다.
  • 반환될 기본값을 결정한다 1
  • 클릭시 변할 클래스명을 정한다.sorted-asc(오름차순의 경우),sorted-desc(내림차순)
  • 현재값이 sorted-asc 이면 sorted-desc으로
  • 반대로 현재값이 sorted-desc 이면 sorted-asc으로 되도록 정한다.

완선된 예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/T_usetableArry.html

저작자 표시
신고

설정

트랙백

댓글

자바스크립트 메모리 누수

Ajax 2010.02.17 18:05

자바스크립트 메모리 누수

C언어들에서는 임시적으로 지정한 포인트라던가 이런것들이 자동 삭제 되지만 자바스크립트에서는 그렇지않다.별도 용도로 지정한 변수가 역할이 끝났지만 그대로 남아있기에 메모리를 여전히 차지하게되고 따라서 후에 많은 함수들이 사용되면 언제 방해될지모르는일이다.이를 메모리 누수(memory leak)라고 말한다

테이블 정렬 수행속도테이블 정렬 수행속도이포스팅의 예제를다시보자

           $.each(rows, function(index, row) {
             row.sortKey = $(row).children('td').eq(column)
             //별도로 sortKey 로 지정해주고 
               .text().toUpperCase();
           });
           rows.sort(function(a, b) {
           //여기서 따로 수행처리하도록
             if (a.sortKey < b.sortKey) return -1;
             if (a.sortKey > b.sortKey) return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
             $table.children('tbody').append(row);
             row.sortKey = null;
             //expendo인 sortKey를 null로 지정
           });

마지막 부분엔 수행처리를 빨리 하기위해 별도로 지정해 주었던 변수 sortKey를 null로 지정해주고있다.이것이 메모리누수를 예방하는 방법중 하나이다.

expendo

앞에서 계속 임시로 만든 변수라고 언급했는데 위에서 본예제와 같이 지정되지않은 원래DOM의 속성이아니라 개발자가 새로추가한 속성을 expendo라한다.이것으로 수행속도가 나아지지만 한편으로 메모리를 그대로 차지하고있기에 문제되는경우도있다.따라서 가급적 마지막에 null로 처리하라고 권유하는것도 그때문이다.

jquery에서 제공하는 함수

위와같이 expendo 값을 null로 처리하는 방법도 있지만. jquery의 함수인 .data(), .removeData()를 사용할 수도있다.

           $.each(rows, function(index, row) {
             $(row).data('sortKey'), $(row).children('td')
             //td엘리먼트에서 data함수로 sortKey값을 읽는다
               .eq(column)
               .text().toUpperCase());});
           rows.sort(function(a, b) {
             if ($(a).data('sortKey') < $(b).data('sortKey') )
             //a엘리먼트에서 data함수로 sortKey값을 읽는다
              return -1;
             if ($(a).data('sortKey') > $(b).data('sortKey') ) 
              return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
           $table.children('tbody').append(row);
           $(row).removeData('sortKey');});
           //removeData로 제거

.data()함수로 읽어들이는역할을 했고 마지막으로 .removeData()로 제거시켰다.굳이 이두함수를 사용하는경우는 IE때문이다 IE는 때로는 이벤트에 제거하려는 변수가 포함되어있을시 제거할수없다 이때 jquery의 data함수를 사용하는것이 안전하다

저작자 표시
신고

설정

트랙백

댓글

jquery를 이용한 ajax 테이블 정렬 수행속도

Ajax 2010.02.17 18:03

jquery를 이용한 ajax 테이블 정렬 수행속도

테이블정렬을 해보았다면 이번에 수행속도를 좀더 올려보자

테이블 정렬 참조포스트jquery를 이용한ajax 테이블 정렬

위의포스팅에서 정렬처리구문은 다음과 같았다.

           rows.sort(function(a, b) {
             var keyA = $(a).children('td').eq(column).text()
               .toUpperCase();
             var keyB = $(b).children('td').eq(column).text()
               .toUpperCase();
             if (keyA < keyB) return -1;
             if (keyA > keyB) return 1;
             return 0;
           });
          $.each(rows, function(index, row) {

위와같은경우는 비교할때 key를 일일이 로드해서 비교하기에 시간이 걸린다.미리 계산하는방법을 고안해보자

           $.each(rows, function(index, row) {
             row.sortKey = $(row).children('td').eq(column)
             //별도로 sortKey 로 지정해주고 
               .text().toUpperCase();
           });
           rows.sort(function(a, b) {
           //여기서 따로 수행처리하도록
             if (a.sortKey < b.sortKey) return -1;
             if (a.sortKey > b.sortKey) return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
             $table.children('tbody').append(row);
             row.sortKey = null;
           });

위구문은 key를 찾는구문과 비교구문을 별도로 분리하고있다.따라서 수행속도가 좀더빨라질것이다. 별도로 sortKey라는 변수로 정해주고 그처리구문을 아래에서 해주도록되어있다.

확하려면 여기로..데이타량이 예시로 짧게 했기에 그전의 예제와 큰 속도차이는 못느낄 것이다.테이블에 많은 데이타를넣고 시험해보면 알수있을 것이다.

자바스크립트 메모리 누수

마지막구문을 보면은 row.sortKey = null 에서 null값을 준것을 볼수있는데 이것은 메모리누수 의 원인이될수있기때문이다. 메모리누수에 대해서 자세이 보려면 다음 포스팅을 보자

자바스크립트 메모리누수

저작자 표시
신고

설정

트랙백

댓글

jquery를 이용한ajax 테이블 정렬

Ajax 2010.02.12 12:49

jquery를 이용한ajax 테이블 정렬

여러책을 놔두고 베스트셀러를 주제로 테이블에 정렬시켜보자. 기본적으로 팔려나가는 순위되로 나영시켜놓고 책제목, 순위, 저자, 가격순으로 클릭시 정렬되게 해보자

네이버에 올라와있는 베스트셀러를 참조했다.

다음과같은 이미지를 모델로 할것이다

html은 다음과 같이짜주었다. 너무길기에 아래 내용들은 생략.그리고 테이블 웹표준 코딩에 대해서 저세히 알고싶다면 표준웹코딩게시물을 보도록

긴 소스기에 접어놓았다

더보기

단지 기능상공부하는것이기에 css의 경우는 자세히는 생략하겠다.단 테이블의 열의 짝수,홀수에 따라색을 주려고한다. 방법은 3가지인다.

  • tr마다 클래스를 두가지주어 두색을css에서 지정
  • css3에서 짝수 홀수 선택자를이용하는방법
  • jQuery에서 css3 선택자를이용

css3를 사용하면 좋겠지만 여전히 바로 css3가적용안되는병맛같은 IE6때문에 3번째방법을 이용하겠다.짝수 홀수 선택자를 이용하고.addClass()함수로 각기 클래스를 달아주었다.

$('table.sortable tbody tr:odd').addClass('odd');
$('table.sortable tbody tr:even').addClass('even');

클릭시 이벤트작동하게하기

$('table.sortable th.sorting').click()

이제까지 배워온대로라면 위와같이작동하게 되도 문제없다.하지만 그러면 후에 다시소스를짜거나 편집하게될경우 스크립트소스를다띁어고쳐야하는문제가있다.따라서 좁 복잡하지만 변수를주고 클래스가 있는지 .each()함수로 검사하고 그에따라 작동하도록할것이다.

$('table.sortable').each(function() {
    //sortable클래스를가진 에서
     var $table = $(this);
     $('th', $table).each(function(column) {
     //또그중 th엘리먼트에서 변수지정
       var $header = $(this);
       if ($header.is('.sorting')) {
	   //header에서 sorting이란 클래스가있다면
         $header.addClass('clickable').hover(function() {
        //clickable이라는 클래스를 단다 그리고 호버하면
           $header.addClass('hover');
	  //hover이라는 클래스를 달아준다.
         }, function() {
           $header.removeClass('hover');
		   //호버가 안되면 다시 hover이라는 클래스 삭제
         }).click(function() 

위에서보면 this로 스스로 변수를 정해주고 작동되도록 되어있다.마지막으로 hover 그리고 clickable이란 클래스를 달아주었고 css로 약간꾸밈을주자

.clickable {cursor: pointer;}
.hover {text-decoration: underline;}

정렬하기

이제 클릭시 책제목, 순위, 저자, 가격순으로 클릭시 정렬되는 함수를 만들어보자. 정렬할때는 자바스크립스함수.sort()를 사용한다

.sort()

여러 숫자를 놔두고 변수를 지정하고 sort를 간단하게사용해보자

var rows = [ 1, 3, 57, 21, 10, 100];
rows.sort();

위와같이 하면 정렬은 되지만 알파벳 순으로 정렬되어버린다 따라서 [ 1, 10, 100, 21, 3, 51] 이란 결과가 나타날것이다. 문자에서는 크기순서로 이루어져야지 a, b, c, 가나다 순으로 될것이다. 따라서 리스트중 두가지를 비교하는 방법으로 사용할것이다.

rows.sort(function(a, b) {
//정렬된 두가지원소가있다면
if ( a < b ) return -1;
//그중작다면 -1 반환:따라서 뒤로밀린다
if ( a > b ) return  1;
//크다면 1 반환: 따라서 앞으로
retuen 0;
//같거나 어느것이 먼저와도될경우 0 :그자리유지
}

이를 이용하여 완성된 함수는

var rows = $table.find('tbody > tr').get();
     //테이블바디에서 tr을 찾아 row로 지정
     rows.sort(function(a, b) {
      //td엘리먼트에서 텍스트의 인자비교
       var keyA = $(a).children('td').eq(column).text()
       var keyB = $(b).children('td').eq(column).text()
       if (keyA < keyB) return -1;
       if (keyA > keyB) return 1;
       return 0;
     });
     $.each(rows, function(index, row) {
     //각각 정리된 배열을 다시테이블에삽입.		 
     $table.children('tbody').append(row);

마지막에는 다시테이블에 삽이하여 정영되도록하였다. 그럼이제까지본 소스를 종합해보면

 $(document).ready(function() {
   $('table.sortable tbody tr:odd').addClass('odd');
   $('table.sortable tbody tr:even').addClass('even');
   $('table.sortable').each(function() {
     var $table = $(this);
     $('th', $table).each(function(column) {
       var $header = $(this);
       if ($header.is('.sorting')) {
		   //header에서 sorting이란 클래스가있다면
         $header.addClass('clickable').hover(function() {
		//clickable이라는 클래스를 단다 그리고 호버하면
           $header.addClass('hover');
		   //hover이라는 클래스를 달아준다.
         }, function() {
           $header.removeClass('hover');
		   //호버가 안되면 다시 hover이라는 클래스 삭제
         }).click(function() {
			 //자 그리고 클릭시
           var rows = $table.find('tbody > tr').get();
		   //테이블바디에서 tr을 찾아 row로 지정
           rows.sort(function(a, b) {
			 //알파벳순이아닌 값의크기순으로 정렬 하기 인자비교
             var keyA = $(a).children('td').eq(column).text()
              var keyB = $(b).children('td').eq(column).text()
            if (keyA < keyB) return -1;
             if (keyA > keyB) return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
			 //각각 정리된 배열을 다시테이블에삽입.					 
             $table.children('tbody').append(row);
           }); }); }});  }); });

최종정리

위와같이하면 작동되는것을 확인할수있다 하지만 문제는 작동된 후 결과를 보면 색의 정열이 원래 정해진대로 유지되어클릭시 바뀐정열에서도 그대로 적용된다는 점이 문제이다.

여기서 확인해보자http://sianasiatiger.cafe24.com/study/T_usetable_colorER.html

따라서 정렬될떄마다 새롭게 적용되도록 함수를만들어 줘야한다. 이름을 reSortColors로 해주고 다음과 같이 해주었다

  $(document).ready(function() {
   var reSortColors = function($table) {
   //그냥지정했던 짝,홀에따른 클래스부여를
   //함수로 만들어놓았다.
     $('tbody tr:odd', $table)
       .removeClass('even').addClass('odd');
     $('tbody tr:even', $table)
       .removeClass('odd').addClass('even');
   };
   
   $('table.sortable').each(function() {
     var $table = $(this);
     reSortColors($table);
	 //여기서먼저적용
     $('th', $table).each(function(column) {
       var $header = $(this);
       if ($header.is('.sorting')) {
         $header.addClass('clickable').hover(function() {
           $header.addClass('hover');
         }, function() {
           $header.removeClass('hover');
         }).click(function() {
           var rows = $table.find('tbody > tr').get();
           rows.sort(function(a, b) {
             var keyA = $(a).children('td').eq(column).text()
               .toUpperCase();
             var keyB = $(b).children('td').eq(column).text()
               .toUpperCase();
             if (keyA < keyB) return -1;
             if (keyA > keyB) return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
             $table.children('tbody').append(row);
           });	   
           reSortColors($table);
           //또 완료되었을따 다시 적용
            });} });});});

이로서 원했던 결과는완성되었다

확하려면 여기로..http://sianasiatiger.cafe24.com/study/T_usetable.html

저작자 표시
신고

설정

트랙백

댓글

jquery를 이용한 Ajax html데이터 일부분 로드

Ajax 2010.02.10 18:19

jjquery를 이용한 Ajax html일부분 로드하기

Ajax 데이터로드하기 html편에서 이미 html 전체를 로드하는 방법을 봤다. 이번에는 일부분을 로드하는 방법을 살펴보자

html데이타 파일

데이타 파일 안에 두가지로 분류해놓자 클래스명을 하나는 part 또다른 하나는part02 로 정해주었다.

Part one

어쩌고 저쩌고

Part tow

이러히 저러히

메인페이지

jquery를 이용한 ajax 데이터로드 html일부분

로드된 데이터가 들어올자리

리스트에 두가지로 나누었다 하나는 아이디 one을 주었고 하나는 아이디 tow를 주었다. 이제 각각클릭시 part, part02를 부르도록 스크립트를 짜보자

jquery 스크립트

 $(document).ready(function() {
   $('#one a').click(function() {
     $('#content').load('exam.html .part');
     return false;
   });   
   $('#tow a').click(function() {
     $('#content').load('exam.html .part02');
     return false;
   });     
 });

위에서 보면 이제까지와 다른점은 .load(exam.html .part');이부분이다. .load 후에 상세히 부를 클래스가 있다. 따라서 아이드 one을 가진 a엘리먼트를 클릭시 exam.html 문서의 part클래스를 부르게된다.

마지막으로 결과물을 보려면 아래로

http://sianasiatiger.cafe24.com/study/A_ajax_08.html

저작자 표시
신고

설정

트랙백

댓글

jquery를 이용한 Ajax 로딩중 알리기

Ajax 2010.02.09 14:04

jquery를 이용한 Ajax 로딩중 알리기

흔히 긴데이타를 로딩할때 화면에 now loㅁding이라는 것을 봤을것이다.데이타가 간단하면 구차하게 쓸필요 없지만 많고 길 경우 현재상황을 알려줄 필요가 있다. jquery를 이용해서 만들어보자

html로딩 소스 짜기

html엘리먼트로 로딩중임을 알려줄 소스를짜보자 보통 그림을 이용하지만 간단하게하기위해 css로 보여줄것이다. 원하는 모습은 아래와 갔다.

now loading

html과 css로 짜준다면

now loading

css에서 가로 세로 80px박스 그리고 최색배경, 검은색테두리를 사용했다.

div#loading{height:80px;
            width:80px; 
            background:#999;
            border:10px #000 solid;}
div#loading p{color:#FFF}

웹표준, 단계적 기능향상

의미있는 마크업 코딩을 위해 위 html소스를 스크립트로 짜주자. 웹표준에 대해서 잘 봤다면 항상 마크업페이지에는 콘테츠(정보를 알리는 내용)이 우선이며 기능,부가적인것은 css, 스크립트로 구현하도록 권유되어있는것을 잘알고있을 것이다. 지금 하고자하는바는 로딩하다고 알려주는 기능적인것이다 따라서 위의html을 스크립트로 짜주자

$(document).ready(function() {
  $('

now loading

') .insertBefore('#content) });

또 맨처음에는 보이지않아야하므로 css에서 display:none;으로 처리해주자그리고 나타날 위치를 적당히 잡아준다.

div#loading{
 display:none;
 position:absolute;
 margin: 100px 0 0 500px;}

옵저버함수

옵저버 함수는 요청이 현재 처리중임을 알리는 함수이다.jquery에서는 .ajaxStart(), .ajaxStop()이있다.이것을 이용해 스크립트에서 사용해보자

$(document).ready(function() {
  $('
Loading...
') .insertBefore('#content') .ajaxStart(function() { //호출이시작되면 $(this).show(); //보여준다 }).ajaxStop(function() { //호출이 끝나면 $(this).hide(); //감춘다. }); });

이렇게하면 와성된것이다 호출하는 이벤트(이젠예제에서 봤던 클릭이라던가, 검색후) loading 문구가 뜨고 그후 데이타가 나올 것이다.

약간의 딜레이

데이타양이 적은 경우 이같은 기능을 사용할 필요가없다. 굳이 사용하려면 약간의 딜레이를주면된다 맨처음 보여준 html예제 소스를 이용해보자

 $(document).ready(function() {
   $('#part01').click(function() {
     $('#content').hide().load('./ajax_part/abouthtml.html',function() {
		$(this).fadeIn();
		});							
     return false;
   });
 });

.hide().fadeIn()이 사용된것을 볼 수 있을것이다 이에 대해선 이전에 설명해 준것이 있을 것이다.이에 대해선 아래를 참조하자

jQuery-hide-show-fade-애니메이션-메소드

마지막으로 완성한 예제를 볼려면 아래를 클릭

http://sianasiatiger.cafe24.com/study/A_ajax_07.html

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바