Java

아작스(ajax) 통신

디케이형 2021. 1. 6. 11:08
반응형

아작스(ajax) 통신

동기 방식

  1. 집에간다.
  2. 옷을 세탁기에 넣는다.
  3. 세탁이 다 될 때 까지 세탁기 앞에서 대기 한다.
  4. 세탁기가 세탁을 완료하면, 건조기에 넣는다.
var d = 10; // 예를 들어 실행이 2초 걸린다면
var data = getAjaxData("https://www.naver.com"); //체감상 2년
alter(data)

비동기 방식

  1. 집에 간다.
  2. 옷을 세탁기에 넣는다.
  3. 세탁기에 건조 예약을 걸어 둔다.
  4. 세탁 이외에 다른 작업을 할 수 있다.

###- 바닐라JS 사용

// 바닐라JS
console.clear();

let apiURL = "https://api.github.com/repos/vuejs/vue/commits?per_page=5&sha=master";

let fetchData = function() {
    // 대리자 한명을 만든다.
    let xhr = new XMLHttpRequest();

    // 목표
    xhr.open("GET", apiURL);

    // 예약
    xhr.onload = function() {
        let commits = JSON.parse(xhr.responseText);
        let commitData = [];

        let forEachFunc = function(row) {
            let dataRow = {};
            dataRow.login = row['author'].login;
            dataRow.message = row['commit'].message;

            commitData.push(dataRow);
        };

        commits.forEach(forEachFunc);

        console.log(commitData);
    };

    // 출발
    xhr.send();
};

fetchData(); // 여행을 보내놓고 끝

###- 제이쿼리 사용

// 제이쿼리 사용
console.clear();

var apiURL = "https://api.github.com/repos/vuejs/vue/commits?per_page=5&sha=master";

$.get(
    apiURL,        //목적지
    function(data) {        //목적이 후 실행
        console.log(data[0]);
    },
    'json'
);

 

# 아작스(ajax) 통신

## 동기 방식
1. 집에간다.
2. 옷을 세탁기에 넣는다. 
4. 세탁이 다 될 때 까지 세탁기 앞에서 대기 한다.
3. 세탁기가 세탁을 완료하면, 건조기에 넣는다.

``` js
var d = 10; // 예를 들어 실행이 2초 걸린다면
var data = getAjaxData("https://www.naver.com"); //체감상 2년
alter(data)
```

***
## 비동기 방식
1. 집에 간다. 
2. 옷을 세탁기에 넣는다.
3. 세탁기에 건조 예약을 걸어 둔다.
4. 세탁 이외에 다른 작업을 할 수 있다.

###- 바닐라JS 사용

```js
// 바닐라JS
console.clear();

let apiURL = "https://api.github.com/repos/vuejs/vue/commits?per_page=5&sha=master";

let fetchData = function() {
    // 대리자 한명을 만든다.
    let xhr = new XMLHttpRequest();

    // 목표
    xhr.open("GET", apiURL);

    // 예약
    xhr.onload = function() {
        let commits = JSON.parse(xhr.responseText);
        let commitData = [];

        let forEachFunc = function(row) {
            let dataRow = {};
            dataRow.login = row['author'].login;
            dataRow.message = row['commit'].message;

            commitData.push(dataRow);
        };

        commits.forEach(forEachFunc);

        console.log(commitData);
    };

    // 출발
    xhr.send();
};

fetchData(); // 여행을 보내놓고 끝
```

###- 제이쿼리 사용

```js
// 제이쿼리 사용
console.clear();

var apiURL = "https://api.github.com/repos/vuejs/vue/commits?per_page=5&sha=master";

$.get(
    apiURL,		//목적지
    function(data) {		//목적이 후 실행
        console.log(data[0]);
    },
    'json'
);
```
반응형