SBGRID

							var datagrid;
							var attr_list = [];
						
							$(document).ready(function(){
								createElements();
							})
						
							function createElements(){
								var SBGridProperties = {};                
								SBGridProperties.parentid = 'sbGridArea';  // [필수] 그리드 영역의 div id 입니다.            
								SBGridProperties.id = 'datagrid';          // [필수] 그리드를 담기위한 객체명과 동일하게 입력합니다.                
								SBGridProperties.jsonref = 'attr_list';    // [필수] 그리드의 데이터를 나타내기 위한 json data 객체명을 입력합니다.
					
								// [필수] 그리드의 컬럼을 입력합니다.  
								SBGridProperties.columns = [
									{caption : ['번호'],	ref : 'num',		width : '80px',	  style : 'text-align:center',	type : 'output'},
									{caption : ['지역명'],	ref : 'area',		width : '80px',	  style : 'text-align:center',	type : 'output'},
									{caption : ['성별'],	ref : 'sex',		width : '80px',	  style : 'text-align:center',	type : 'output'},
									{caption : ['이름'],	ref : 'name',		width : '80px',	  style : 'text-align:center',	type : 'output'},
									{caption : ['직위'],	ref : 'position',		width : '80px',	  style : 'text-align:center',	type : 'output'},
									{caption : ['부서'],	ref : 'department',		width : '80px',	  style : 'text-align:center',	type : 'output'},
									{caption : ['Excel점수'],	ref : 'excel',width : '130px',  style : 'text-align:center',	type : 'output'},	
									{caption : ['Word'],	ref : 'word',		width : '80px',	  style : 'text-align:center',	type : 'output'},
									{caption : ['Powerpoint'],	ref : 'powerpoint',width : '130px',  style : 'text-align:center',	type : 'output'},	
									{caption : ['평균'],	ref : 'average',		width : '80px',	  style : 'text-align:center',	type : 'output'}
								];			
								datagrid = _SBGrid.create(SBGridProperties); // 만들어진 SBGridProperties 객체를 파라메터로 전달합니다.
							}
					
							function writeToStatus(message)
							{
								$("#sbux_label_status").text(message);
							}
					
							function getData() {
								
								createElements();
					
								var url ="Server's URL";
								var xhttp = new XMLHttpRequest();
								
								xhttp.onreadystatechange = function() {
									if ( this.readyState==0 ) {
										writeToStatus("0 : created");
									}
									else if ( this.readyState==1 ) {
										writeToStatus("1 : loading");
									}
									else if ( this.readyState==2 ) {
										writeToStatus("2 : Loaded");
									}
									else if ( this.readyState==3 ) {
										writeToStatus("3 : Interactive");
									}
									else if ( this.readyState==4 ) {
										writeToStatus("4 : Completed");
									}
					
									if (this.readyState == 4 && this.status == 200) {
										var response2 = this.responseText.substring( this.responseText.indexOf('{"resultCode"'), this.responseText.indexOf('}]}')+3);
										var response = JSON.parse(response2);
										attr_list = response.resultData;
										datagrid.refresh();
									 }
								 };
								 xhttp.open("GET", url);
								 xhttp.setRequestHeader("X-Custom-Header", "testvalue");
								 xhttp.send();
							}