JS | AJAX (비동기 통신)

AJAX(Asynchronous Javascript and XML) 비동기적 자바스크립트 그리고 xml

은 웹페이지의 이동없이 필요한 데이터만 전송하는 기술

( 화면이동없이 데이터만 전송하는 기술 )입니다.

비동기란 ?

동기란 ? 함수를 실행하면  a함수 끝나고 -> b함수 끝나고 -> c함수 끝나고 이렇게 순서대로 실행하는 방식 

블로킹 / 논블로킹 - 함수가 실행되는 도중에 침범할 수 있다 / 없다

 

함수가 동기와 달리 이전 함수가 끝나길 기다리지 않고 한꺼번에 실행된다!

서버(=자바)와 서버 통신, 클라이언트와 클라이언트 통신  

일반적인 경우 데이터 처리는 요청 순서대로 진행하지만 AJAX는 순차적으로 진행하지 않습니다.

이런 방식을 비동기 방식이라고 합니다.

 

공공데이터 포털 ->  오픈 API 만 사용 가능

 

* ajax에 사용 가능한 것

- fetch()

- xmlhttprequest 객체 사용가능

- ajax() 함수

.

.

.

 

 

자바스크립트의 비동기 방식은 상당히 까다로운데,

이를 간단히 사용할 수 있게 해주는 최신 자바스크립트 API인 fetch API(ES6)를 이용

 

 

* fetch() 반환 값

https://www.daleseo.com/js-window-fetch/

: fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject합니다.

 

클릭하면 ajax()함수를 실행하는 버튼 생성

<button onclick="ajax()">ajax 요청</button>

 

 

1번 방법

function ajax(){
//1st
var result = fetch("hi.txt");
result.then(function(response){
     console.log(response); 
})
}

 

2번 방법

function ajax(){
// 2nd
            fetch("hi.txt").then(function(response) {
                if(response.status != 200) {
                    alert("통신에 에러가 발생했습니다.");
                    return;
                }
                //var a = response.text();
                //console.log(a); //프로미스
                response.text()
                .then(function(data) {
                    console.log(data);
                })
            })
     }

 

 

3번 방법

function ajax(){
//3rd 콜백에 리턴을 걸면 fetch가 다시 Promise를 반환
            fetch("hi.txt")
            .then(function(res) {
                // res.text().then(function(data){

                // })
                return res.text();
            }).then(function(data){
                console.log(data);
                return data; 
            }).then(function(data){
                console.log(data);
            });
            console.log(result);
}

 

4번 방법

 //4th - 비동기방식에서는 순서를 보장하지 않음
function ajax(){
fetch("hi.txt")
            .then(function(res){
                return res.text();
            })
            .then(function(data){
                console.log(2);
            })
            console.log(3);
            }

 

PromiseState

• pending : 수행중
• fullfilled : 성공
• reject : 실패 

console.log(response)

 

 

status

200성공

404내잘못

500서버잘못

 

:  promise객체 (ES6객체)  - then 함수의 콜백을 넣어서 첫번째 매개변수로 결과를 받아낼 수 ㅇㅇ

 

 

 

 

 

index03(공공데이터포털).html

0.00MB

hi.json

0.00MB

hi.xml

0.00MB

index04.html

0.00MB

index02.html

0.00MB

End Point - 상대 서버에 접속할 수 있는 주소 

서비스키 넘기는 방법
?키=값
/.../.../..

.