> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/javascript/web/ajax/undefined-1/plugin.md).

# 플러그인 사용하기

## 질문 

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

## 실습하기 

* [Chrom 브라우저 플러그인을 설치](https://shhn0509.gitbook.io/javascript/ajax/undefined/client/chrome)하여 SOP 보안 이슈를 해결한다. 
* [KAIST  오픈 API](https://www.kaist.ac.kr/kr/html/footer/0819.html)를 사용하여 실습한다.  

## 오류 확인 

![동일 출처 정책(SOP) 오류를 확인](/files/-MR9Eut8TmX75RkLTnCH)

## 데이터 응답 확인

```javascript
// 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에서 서버 통신 상태를 확인 할 수 있다. ](/files/-MR8xVckEc9QJqNppfbE)

![다른 서버의 데이터가 접근이 가능하다는 것을 확인한다. ](/files/-MR8x_dSi-bVBwZf1ROG)

![데이터를 잘 불러온 것을 확인](/files/-MR8ygkCaKNNJ3QsRRTf)

## 데이터 → 객체

![데이터의 유형의 보니 문자값이다.](/files/-MR8zBJuC-mQKGHhIVq_)

### [JSON.parce()](https://shhn0509.gitbook.io/dom/ajas/json#json-parse-ie-8)

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

![JSON.parce를 사용해서 객체 생성](/files/-MR90bBCVweZ1dGviPXc)

## 결과

```javascript
;(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)
```

![데이터가 잘 불러와진 것을 확인 할 수 있다. ](/files/-MR96zctb6f7PgvuEeaH)