02 ajax : 서버의 데이터를 내 페이지로 읽어 올 수 있다

ajax로 데이터를 읽어와서 내가 만든 웹 페이지에서 볼 수 있게 만들었다. 

위 사진은 웹 페이지를 처음 로딩했을 때 사진이다. 이 사이트는 서울시 따릉이가 거치된 위치, 거치대 수, 그리고 현재 거치된 따릉이 수를 표로 나타냈다. 

지금은 거치대 수가 3개 뿐이자만 서울시 openAPI로 따릉이 데이터를 받아와서 표를 채워넣어보겠다.

 

표 위에 '업데이트' 버튼을 클릭하면 데이터를 받아와서 웹 페이지에 나타내게 했다. 그리고 현재 거치된 따릉이 수르가 5대 미만인 곳은 빨간 글씨가 뜨게 했다.

ajax 기본 골격

데이터를 서버로부터 받아 오기 때문에 type: "GET"으로 지정, 데이터를 받아올 url, data는 POST 방식에서 사용하는데 이번에 데이터를 읽기만 하므로 POST는 필요없으므로 data는 비워두었다.

 

위 골격을 복사해서 url에 서울시 OPEN API url을 붙여 넣는다.

변경된 url로 들어가면 따릉이 데이터가 JSON 형태로 정리되어 있다.

이 데이터에서 'stationName'이 거치대 위치, 'rackTotCnt'이 거치대 수, 'parkingBikeTotCnt' 현재 거치된 따릉이 수이다. row 리스트 안에 딕셔너리 형태로 정보가 나열되어 있다. 이 데이터에서 원하는 정보는 3개 (거치대 위치, 거치대 수, 현재 따릉이 수)이다. 

 

row[{102.망원역 1번 출구}, {103.망원역 2번 출구}...] 이렇게 나열되어 있다. row 리스트에서 for()반복문으로 전체를 순회하면서 각 딕셔너리마다 원하는 정보 3개를 추출하겠다.

 

ajax로 url에서 얻어온 json 형태의 정보를 for()을 이용하여 각각 변수에 저장했다. 이 상태에서 현재 거치된 따릉이 수에 따라 나누어야 하기 때문에 if()을 이용한다. (현재 거치된 따릉이 수 < 5)이면 "parkinglowCnt" 클래스를 지정해 준다. 5대 이상이면 클래스를 지정해 주지 않는다.

 

지정한 클래스는 미리 글자색을 빨강으로 지정한다.

빨강으로 색깔을 지정한 클래스명을 지정하면 해당 데이터가 웹페이지에 빨간 글씨로 출력된다.

 

해당 데이터를 임의 변수인 'temp_html'에 저장한다. 저장할 때 해당 정보가 표 안에 들어 가야 한다. 웹 페이지 상에 지정된 위치에 들어갈 수 있도록 태그와 함께 저장한다.

 

temp_html 임의 변수에 저장할 때 정보를 따옴표가 아니라 backtick( ` )으로 둘러싼다.  이 temp_html을 웹 페이지에 표시할 위치의 id에 추가한다.

 

'names-q1'이라는 id가 있는 자리에 'temp_html' 정보가 추가된다.

 

이 상태에서 웹 페이지를 2번 로딩하면 99개의 거치대 위치에 있는 따릉이 정보다 연달아 출력된다. 연달아 출력되지 않도록 웹 페이지를 로딩할 때마다 초기화 해준다.

 

empty()함수를 ajax 앞에 추가해서 ajax로 데이터를 받아 오기 전에 empty()로 'id = names-q1'의 정보가 초기화된다.