develope_kkyu

[AJAX] fetch 본문

FrontEnd/AJAX

[AJAX] fetch

developekkyu37 2022. 12. 22. 14:29
728x90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch</title>
</head>
<body>
    <input type="button" value="비동기통신 Test1"
            onclick="
            // fetch는 파일을 비동기식으로 요청하는데, 회신 받았을 때 callbackme 함수를 수행함.
            // 요청후 바로 다음 동작을 수행함.
                    fetch('./txt/javascript').then(callbackme);
                    function callbackme(){
                        console.log('response OK');
                    }
                    console.log(1);
                    console.log(2);
                    console.log(3);
                    "
    />
    <input type="button" value="문서회신"
            onclick = "
            // fetch를 통해서 문서를 받아오는데
            // 해당의 문서는 response에 담겨서 돌아온다.
            // 그리고 response는 성공여부 등을 포함한 결과들이 있다.
                       fetch('./txt/javascript').then(function(response){
                            response.text().then(function(text){
                                alert(text)
                                console.log(response);
                            })
                       });
                      "
    />
    <input type="button" value="문서회신2"
            onclick = "
                       fetch('./txt/javascript').then(function(response){
                            response.text().then(function(text){
                              if(response.status == 200){
                                alert(text);
                              }
                              else{
                                console.log('ERROR');
                              }
                            })
                       });
                      "
    />
</body>
</html>

--

 

728x90

'FrontEnd > AJAX' 카테고리의 다른 글

[AJAX] fetch-function  (0) 2022.12.22
'FrontEnd/AJAX' Related Articles more