728x90

https://www.youtube.com/watch?v=w077w7FN-pg&list=PLuHgQVnccGMA9-1PvblBehoGg7Pu1lg6q 

 

 

index.html

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AJAX ์—ฐ์Šต</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1><a href="index.html"> AJAX ์—ฐ์Šต</a></h1>
    <input type="button" value="night" onclick="nightDayHandlert(this);" />

    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <h2>WEB</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo alias labore
      aliquid illum pariatur tempora temporibus impedit, odit voluptatibus
      delectus, eos tenetur quis, ipsam deleniti eaque. Neque voluptatum id
      nihil! Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Necessitatibus illum rerum at nesciunt labore voluptates ut blanditiis
      vel! Facilis pariatur illo debitis assumenda ipsam quaerat fuga officiis
      minus earum aliquid.
    </p>
  </body>
</html>

1.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AJAX ์—ฐ์Šต</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1><a href="index.html"> AJAX ์—ฐ์Šต</a></h1>
    <input type="button" value="night" onclick="nightDayHandlert(this);" />

    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <h2>HTML</h2>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique error
      cumque rerum vel possimus harum, aut natus fugiat dolor quisquam quae est,
      voluptatem sunt repudiandae. Tempora ipsam voluptatibus aliquid illo?Lorem
      ipsum dolor sit amet consectetur adipisicing elit. Nihil enim quidem
      incidunt aut culpa neque expedita id cum quod eius non ratione quae
      possimus, debitis deleniti omnis iusto recusandae eveniet.lo
    </p>
  </body>
</html>

2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AJAX ์—ฐ์Šต</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1><a href="index.html"> AJAX ์—ฐ์Šต</a></h1>
    <input type="button" value="night" onclick="nightDayHandlert(this);" />

    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <h2>CSS</h2>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique error
      cumque rerum vel possimus harum, aut natus fugiat dolor quisquam quae est,
      voluptatem sunt repudiandae. Tempora ipsam voluptatibus aliquid illo?Lorem
      ipsum dolor sit amet consectetur adipisicing elit. Nihil enim quidem
      incidunt aut culpa neque expedita id cum quod eius non ratione quae
      possimus, debitis deleniti omnis iusto recusandae eveniet.lo
    </p>
  </body>
</html>

3.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AJAX ์—ฐ์Šต</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1><a href="index.html"> AJAX ์—ฐ์Šต</a></h1>
    <input type="button" value="night" onclick="nightDayHandlert(this);" />

    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <h2>JavaScript</h2>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique error
      cumque rerum vel possimus harum, aut natus fugiat dolor quisquam quae est,
      voluptatem sunt repudiandae. Tempora ipsam voluptatibus aliquid illo?Lorem
      ipsum dolor sit amet consectetur adipisicing elit. Nihil enim quidem
      incidunt aut culpa neque expedita id cum quod eius non ratione quae
      possimus, debitis deleniti omnis iusto recusandae eveniet.lo
    </p>
  </body>
</html>

 

 

index.html ์—์„œ ์‹คํ–‰ ํ•  ๊ฒฝ์šฐ 

์•„๋ž˜์™€ ๊ฐ™์ด ์ถœ๋ ฅ๋œ๋‹ค. 

 

 

์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด ์•Œ ์ˆ˜ ์žˆ๋“ฏ์ด , 1.HTML ์„ ํด๋ฆญํ•˜๋ฉด 1.html  ๋กœ ์ด๋™, 2. CSS๋ฅผ ๋ˆ„๋ฅด๋ฉด 2.html ๋กœ ์ด๋™ ํ•œ๋‹ค. 

 

 

 

๊ทผ๋ฐ , ์ด๋ ‡๊ฒŒ ์—ฌ๋Ÿฌ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋˜๋ฉด ๊ด€๋ฆฌํ•˜๊ธฐ๋„ ์–ด๋ ต๊ณ , ์šฉ๋Ÿ‰๋„ ๋งŽ์•„์ง„๋‹ค. 

 

๊ทธ๋ž˜์„œ ํ•ด๋‹น ๋งํฌ๋ฅผ ํด๋ฆญํ•˜๋ฉด ํ•˜๋‹จ์˜ ๋ฌธ์„œ ๋‚ด์šฉ๋งŒ ๋ฐ”๊พธ๊ณ ์ž ํ•  ๋•Œ  ์“ฐ์ด๋Š”๊ฒŒ AJAX๋‹ค. 

 

 

 

์œ„์˜ ๋‚ด์šฉ๋“ค์„ AJAX๋กœ ๋ฐ”๊ฟ”๋ณด๊ธฐ๋กœ ํ•œ๋‹ค. 

 

 

1. index.htmlํŒŒ์ผ์„ ์ˆ˜์ •ํ•œ๋‹ค. 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AJAX ์—ฐ์Šต</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1><a href="index.html"> AJAX ์—ฐ์Šต</a></h1>
    <input type="button" value="night" onclick="nightDayHandlert(this);" />

    <ol>
      <li>
        <a
          onclick="
        document.querySelector('article').innerHTML='<h2>HTML</h2>html is ...';
        "
          >HTML</a
        >
      </li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <!-- ๋งํฌ๋ฅผ ํด๋ฆญ ์‹œ ์•„๋ž˜์˜ articleํƒœ๊ทธ ์•ˆ์— ์žˆ๋Š” ๋‚ด์šฉ ๋ณ€๊ฒฝ -->
    <article></article>
  </body>
</html>

1. html ์„ ํด๋ฆญํ•˜๋ฉด <article> ์•ˆ์— ๋‚ด์šฉ์— html ์ถ”๊ฐ€๋œ๋‹ค. 

 

html, css, ํŒŒ์ผ ์ƒ์„ฑ

 

 

์›น ์„œ๋ฒ„์—์„œ ์ •๋ณด๋ฅผ ๊ฐ€์ ธ์™€์•ผํ•จ 

fetch.html ์ƒ์„ฑ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input
      type="button"
      value="fetch"
      onclick="
      alert('ht')
      "
    />
  </body>
</html>

 

 

ํ…Œ์ŠคํŠธ ์™„๋ฃŒ

 

input ๋‚ด์šฉ ์ˆ˜์ •ํ•˜๊ธฐ

    <input
      type="button"
      value="fetch"
      onclick="
      fetch('css').then(function(response){
        response.text().then(function(text){
          alert(text);
        })
      })
      "
    />

์›๋ฆฌ๋ฅผ ๋ชฐ๋ผ๋„ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•จ 

 

 

 

 

  <body>
    <article></article>
    <input
      type="button"
      value="fetch"
      onclick="
      fetch('css').then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML=text;
        })
      })
      "
    />
  </body>

 

fetch๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ์œ„์˜ article ๋‚ด์šฉ ๋ณ€๊ฒฝ๋จ. 

 

 

fetch(' ') : ์„œ๋ฒ„๋กœ ์š”์ฒญํ•จ 

.then :  ์„œ๋ฒ„๊ฐ€ ์‘๋‹ต์„ ํ•ด์ค˜์•ผํ•จ . ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆด ์ˆ˜ ์žˆ์Œ , ๋‹ค ๋๋‚˜๋ฉด ๋’ค์— ์žˆ๋Š” ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ ์‹œ์ผœ๋‹ฌ๋ผ๊ณ  ํ•จ .

             then ์•ˆ์— function ์ด ๋“ค์–ด๊ฐ€์žˆ์Œ -> ์ต๋ช…ํ•จ์ˆ˜ (์ด๋ฆ„์ด ์—†์Œ) 

             ์ด๋ฆ„์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ๋Š” ์—ฌ๊ธฐ์ €๊ธฐ์„œ ์‚ฌ์šฉํ•  ๋•Œ ํ•„์š”ํ•˜๊ณ , then์•ˆ์—์„œ๋งŒ ์‚ฌ์šฉํ• ๊ฑฐ๋ผ์„œ ์ต๋ช…ํ•จ์ˆ˜๋กœ ์‚ฌ์šฉ

.then(function(response){

});   : ์–ด๋–ค ๋‚ด์šฉ?

     fetch('html').then(function(response){
      console.log(response);
     });

 

status : 200 = ์„ฑ๊ณต

์‹คํŒจ๋Š” 404

 

๋งŒ์•ฝ html ๋ง๊ณ  javascript ์š”์ฒญํ•˜๋ฉด?

    fetch('Javascript').then(function(response){
      console.log(response);
     });
      "

 

404 ์˜ค๋ฅ˜ ๋œธ 

 

 

     fetch('Javascript').then(function(response){
      console.log(response.status);
      if(response.status == '404'){
        alert('Not Found')
      }
     });

 

์›น ์„œ๋ฒ„๊ฐ€ ์‘๋‹ตํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” ๊ฐ์ฒด๋ฅผ response ๋ผ๊ณ  ํ•จ . 

 

 

 

 

 

์ด ๊ฒƒ์„ ํ™œ์šฉํ•ด์„œ 

index.html ์ˆ˜์ •

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AJAX ์—ฐ์Šต</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1><a href="index.html"> AJAX ์—ฐ์Šต</a></h1>
    <input type="button" value="night" onclick="nightDayHandlert(this);" />

    <ol>
      <li>
        <a
          onclick="
           fetch('html').then(function(response){
            response.text().then(function(text){
             document.querySelector('article').innerHTML=text;
        })
      });
        "
          >HTML</a
        >
      </li>
      <li>
        <a
          onclick="
           fetch('css').then(function(response){
            response.text().then(function(text){
             document.querySelector('article').innerHTML=text;
        })
      });
        "
          >CSS</a
        >
      </li>
      <li>
        <a
          onclick="
           fetch('JavaScript').then(function(response){
            response.text().then(function(text){
             document.querySelector('article').innerHTML=text;
        })
      });
        "
          >JavaScript</a
        >
      </li>
    </ol>
    <!-- ๋งํฌ๋ฅผ ํด๋ฆญ ์‹œ ์•„๋ž˜์˜ articleํƒœ๊ทธ ์•ˆ์— ์žˆ๋Š” ๋‚ด์šฉ ๋ณ€๊ฒฝ -->
    <article></article>
  </body>
</html>

 

'FRONTEND > ๊ธฐํƒ€' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

(APIํ™œ์šฉ) ๊นƒํ—ˆ๋ธŒ ์œ ์ €์ฐพ๊ธฐ app 2  (1) 2023.11.14
(APIํ™œ์šฉ) ๊นƒํ—ˆ๋ธŒ ์œ ์ €์ฐพ๊ธฐ app 1  (1) 2023.11.14
๋กœ๋˜ ๋ฒˆํ˜ธ ๊ฐ€์ ธ์˜ค๊ธฐ  (0) 2023.10.06
jQuery ๋ฅผ ํ™œ์šฉํ•ด AJAX ์‚ฌ์šฉ load()  (1) 2023.10.06
Dom ์‘์šฉ์‹ค์Šต  (1) 2023.10.05
ใ„ด

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”