플러그인 사용하기

질문

1. 사진이 불러와지지 않는 경우

실습하기

• Chrom 브라우저 플러그인을 설치하여 SOP 보안 이슈를 해결한다.

• KAIST 오픈 API를 사용하여 실습한다.

오류 확인

동일 출처 정책(SOP) 오류를 확인

데이터 응답 확인

// Open API
// SOP(Same Origin Policy) 문제가 발생하지 않는 경우
// Access-Control-Allow-Origin: *
;(function (global, $, ajax) {
  'use strict'

  var kaist_open_api_address = 'http://www.kaist.ac.kr/_module/api/json.php'

  var code = '0802'
  var start = 1
  var display = 1

  ajax
    .get(
      kaist_open_api_address + '?code=' + code + '&start=' + start + '&display=' + display
    )
    .then(function (data) {
      console.log(data)
    })
})(window, Dom, ajax)

Header에서 서버 통신 상태를 확인 할 수 있다.

다른 서버의 데이터가 접근이 가능하다는 것을 확인한다.

데이터를 잘 불러온 것을 확인

데이터 → 객체

데이터의 유형의 보니 문자값이다.

JSON.parce()

json 데이터는 문자 값이다. 그래서 JS의 순환/반복 메서드를 사용하기 위해서는 문자를 객체 화 하는 작업이 필요하다.

JSON.parce를 사용해서 객체 생성

결과

;(function (global, $, ajax) {
  'use strict'

  var kaist_open_api_address = 'http://www.kaist.ac.kr/_module/api/json.php'

  var code = 'news'
  var start = 1
  var display = 5

  ajax
    .get(
      kaist_open_api_address + '?code=' + code + '&start=' + start + '&display=' + display
    )
    .then(function (data) {
      var template = $.template(JSON.parse(data), function (item) {
        return item.contents
      })
      $('main').html(template)
    })
})(window, Dom, ajax)

데이터가 잘 불러와진 것을 확인 할 수 있다.