jquery 이용한 Ajax 데이터로드하기 간단한 스크립트파일편

Ajax 데이터로드하기 스크립트편

자바스크립트를 사용하면서 과다량의 사용으로 한번에 로드가 요구되어 과부하가 걸리는수가있다.이런경우 html생성부분을 로드하는 파일에 넣어서 처리할 수 있다.JSON의 예를보면서 확인해보자

앞서 포스팅한 부분(아래참조)을 되돌려보면 데이타를 로드하는 부분 그리고 html코드를 만들어주는 부분이 같이 포함된것을 볼수있다.이 스크립트만 사용한다면 문제없지만 다른 스크립트 소스와 많이 사용하게된다면 복잡하고 문제발생우려가 크다.

$(document).ready(function() {
  $('#part02').click(function() {
    $.getJSON('./ajax_part/aboutJSON.json' ,function(data) {
    //여기까지 데이타로드하는코드
   $('#content').empty();
      $.each(data, function(entryIndex, entry) {
        var html = '
' + entry['listN'] + '
';
        html += '
' + entry['sunmmary'] + '
';
        html += '

' + entry['definition'] +'
' ;
        $('#content').append(html);
        //HTML작성하는 코드
      });
    });
    return false;
  });
});

자 그럼 이번엔 HTML작성코드 부분을을 데이파일에 삽입시켜 간단하게 만들어보자. 로딩소스는 아래 html을 뺀 부분이니 다음과 같다.

$(document).ready(function() {
  $('#part04').click(function() {
    $.getScript('./ajax_part/generaljvs.js');
    return false;
  });
});

JSON파일을 설명할떄 봤던 데이터 파일을 다시보자

[
  { 
    "listN" :  "JSON ",
    "sunmmary" : "JavaScript Object Notation",
	"definition" : "어쩌고 저쩌고"
  }
]

이쪽으로 이제 html작성소스를 옯길것이다.

var entries = [
  { 
    "listN" :  "JSON ",
    "sunmmary" : "JavaScript Object Notation",
	"definition" : [
 	   "definition" : "어쩌고 저쩌고" 
	]  }]
//아래부터 만들어질 html소스
var html = '';
$.each(entries, function() {
         html += '
' + this['listN'] + '
';
         //당연히 스크립트내에 존재하니 this를 사용했다.
         html += '
' + this['sunmmary'] + '
';
         html += '

' + this['definition'] +'
' ;
       });
 $('#content').html(html);

이렇게함으로서 로딩 소스만 단간하게 구축할수 있었고 데이타에 파일에 번거로운 html작성소스를 따로 명확히 넣어주어 관리도 쉬워졌다. 결과를 보면 같은 것을 볼수있을 것이다.

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