# 동기 통신 실습

## 콘솔에 데이터 출력 &#x20;

{% tabs %}
{% tab title="HTML" %}

```markup
<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ajax 비동기 통신</title>
</head>
<body>
  <p class="print_area"></p>

  <script src="./action.js"></script>
</body>
</html>
```

{% endtab %}

{% tab title="action.js" %}

```javascript
;(function (global) {
  'use strict'

  // XMLHttpRequest 객체 생성
  var xhr = new XMLHttpRequest()

  // .open() 메서드 동기 통신 설정
  xhr.open('GET', './ajax-desc.txt', false)

  // 서버에 요청
  xhr.send()

  // 동기 통신에 따른 응답이 오면 처리
  if (xhr.status === 200) {
    console.log(xhr, xhr.responseText)
  }
})(window)

```

{% endtab %}

{% tab title="ajax\_desc.txt" %}

```
에이젝스(Ajax)란? JavaScript와 XML 또는 JSON을 사용해 
비동기 통신 방법으로 웹 애플리케이션을 제작하는 것을 말합니다. 
간단히 말하면 서버측 Scripts와 통신하기 위한 XMLHttpRequest객체를 사용하는 것을 말합니다.
```

{% endtab %}
{% endtabs %}

![](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MQxTDSk4szHmTy6gocu%2F-MQxYk5EEmq7Xg9LIjsH%2Fimage.png?alt=media\&token=4499bd5e-2c3d-4061-bf1d-83a7d267de2d)

![](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MQxYzwl7XKhF5jImy7n%2F-MQxZOnLeyvNDNM0bbrq%2Fimage.png?alt=media\&token=83f8e825-7504-4114-a116-6991d2d0746c)

## 버튼 클릭 시 콘솔에 데이터 출력&#x20;

{% tabs %}
{% tab title="HTML" %}

```markup
<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ajax 비동기 통신</title>
</head>
<body>

  <!-- 버튼 추가 -->
  <button type="button" class="call-ajax-data-button">서버에 데이터 요청</button>

  <p class="print_area"></p>

  <script src="./action.js"></script>
</body>
</html>
```

{% endtab %}

{% tab title="action.js" %}

```javascript
;(function (global) {
  'use strict'

  var xhr = new XMLHttpRequest()
  xhr.open('GET', './ajax-desc.txt', false)

  var call_btn = document.querySelector('.call-ajax-data-button')

  var callAjaxData = function () {
    // 클릭 시 데이터 전송 
    xhr.send()

    // 200과 304번일 때 데이터 출력 
    if (xhr.status === 200 || xhr.status === 304) {
      console.log(xhr, xhr.responseText)
    } else {
      // 경고 메세지 출력 
      console.worn('통신 실패')
    }
  }

// 버튼에 클릭 이벤트 바인딩 
  call_btn.addEventListener('click', callAjaxData)
})(window)
```

{% endtab %}
{% endtabs %}

버튼을 클릭 했을 때, 콘솔에 텍스트가 잘 출력되는 것을 확인 할 수 있다.&#x20;

![](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MQxepdMfOk28LbASGv_%2F-MQxfd8z24L6W4cdJYna%2Fimage.png?alt=media\&token=40bbb2a4-f812-4704-b641-3aa10b8d7d9e)

이 때, 텍스트 파일의 통신 상태를 보면 [304번](https://app.gitbook.com/@shhn0509/s/dom/~/drafts/-MQq3Zg9CAGcg_134aue/ajas/ajax-1/ajax-1#4-check-status)인 것을 알 수 있다. \
이 것은 상단에 실습을 했을 때와 이번에 버튼을 추가하고 실습을 했을 때의 텍스트 데이터에 변경 사항이 없기 때문이다. 즉, 변경이 되지 않았다는 것이다.&#x20;

![](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MQxYzwl7XKhF5jImy7n%2F-MQxeFk_-YD5AJ2EhvmJ%2Fimage.png?alt=media\&token=efb5f393-b9a1-4b06-942a-dcbe19feca11)

![오류 메세지](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MQxguPyIKrT9C8Scbyy%2F-MQxh6RndrYm2Go9pz4H%2Fimage.png?alt=media\&token=51f472df-d77e-46cb-ad40-82d9f114f751)

## 버튼 클릭 시 브라우저에 데이터 출력 &#x20;

```javascript
;(function (global) {
  'use strict'

  var xhr = new XMLHttpRequest()
  xhr.open('GET', './ajax-desc.txt', false)

  var call_btn = document.querySelector('.call-ajax-data-button')
  var print_area = document.querySelector('.print_area') // 단락요소 
  
  var callAjaxData = function () {
    xhr.send()

    if (xhr.status === 200 || xhr.status === 304) {
      // 단락 요소에 데이터 텍스트가 삽입되도록 설정 
      print_area.textContent = xhr.responseText
    } else {
      console.warn('통신 실패')
    }
  }

  call_btn.addEventListener('click', callAjaxData)
})(window)

```

![](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MQxm42eoO934y0ySFQW%2F-MQxmMFP-n8_c_bpFnpO%2Fimage.png?alt=media\&token=fabb0933-d7d1-44cb-a7be-a5752d1fea24)
