Notice
Recent Posts
Recent Comments
Link
Tags
more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archives
Today
Total
관리 메뉴

JongDDA의 한걸음 한걸음씩

[JavaScript & Jquery] AJAX 본문

개발/프론트엔드

[JavaScript & Jquery] AJAX

종따 2021. 4. 6. 20:00
728x90

ajax란?

ajax(Asynchronous Javascript And XML)란 비동기 방식의 자바스크립트와 XML을 의미한다.
ajax를 이용하는 주목적은 화면 전환 없이 클라이언트(사용자 컴퓨터)와 서버(서비스 제공 컴퓨터)간의 정보를 교환하기 위해서이다.

ajax 관련 메소드

ajax는 클라이언트가 비동기 방식으로 자바스크립트를 이용하여 화면 전환 없이 서버 측에 자료를 요청할 때 사용한다. ajax 관련 메소드를 호출하면, 서버 측에 원하는 요청을 보내어 응답을 받아오는 것이 가능하다.

load()

load() 메소드는 사용자가 지정한 URL 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용한다. 요청한 콘텐츠를 이용해 선택한 요소에 내용을 바꿀 수 있다.

 

$(선택요소).load(url, 요청데이터, 함수_선택사항);

$.ajax()

$.ajax() 메소드는 사용자가 지정한 url 경로에 파일의 데이터를 전송하고 입력한 url 경로 파일로부터 요청한 데이터를 불러온다. 이때 불러올 수 있는 외부 데이터로는 텍스트, HTML, JSON 유형 등이 있다.
다음은 $.ajax() 메소드의 기본형이며, 강아지 사진을 요청한다. 인자로 객체가 전달된다.

 

$.ajax({
  url:"https://dog.ceo/api/breeds/image/random",
  type: "get",
  data: {},
  dataType: "json",
  success: function(result){
    console.log(result)
  }
})

JSON 데이터란

JSON은 JavaScript Object Notation의 약자로 자바스크립트 객체 표기법을 말한다. JSON은 key와 value 값이 쌍으로 구성된 형태의 객체 표기법으로, 클라이언트와 서버 사이에 정보를 교환하기 위한 목적으로 사용된다. JSON의 표기법은 무척 간단하다.

 

const json = {key1:value1, key2: value2, key3: value3};

 

자바스크립트에서는 JSON 데이터 관련 처리 메소드를 제공한다.

const json = '{"key1":1, "key2": 2, "key3": 3}';
const result = JSON.parse(json);
console.log(result)
console.log(typeof result)

예제) 강아지 사진 불러오기

<!DOCTYPE html>
<html>
<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">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <title>AJAX</title>
</head>
<body>
    <h1>강아진 사진 불러오기</h1>
    <button id="req">요청하기</button><br>
    <image id="image">
    <script src="01_script.js"></script>
</body>
</html>
$(document).ready(function(){
// 버튼 누르면 강아지 사진이 들어있는 서버에 강아지 사진 램덤으로 하나 보내달라고 요청하기
    $("#req").click(function(){      
        //인자로 요청에 대해 정의된 객체를 받는다!
        $.ajax({
            url: "https://dog.ceo/api/breeds/image/random",
            type: "get", 
            data: {
                /* 만약 요청 보낼 때 보내야 할 데이터가 있다면 여기에 */
            },
            dataType: "json",
            success: function(result){
                // 요청이 성공적으로 처리되었을 때 할 일!
                const imageSrc = result.message
                //const img = document.createElement('img')
                //img.src = imageSrc
                //document.querySelector("body").appendChild(img)
                $('#image')[0].src = imageSrc
            },
            error: function(err){
                console.log(err)
            }
        })
    })
})

예제2) 강아지 품종으로 사진 불러오기

<!DOCTYPE html>
<html>
<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">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <title>AJAX</title>
</head>
<body>
    <h1>보고 싶은 견종을 써보자(공백없이 한 단어로)</h1>
    <input id ="breed" type="text" placeholder="breed">
    <button id="req">요청하기</button><br>
    <image id="image">
    <script src="02_script.js"></script>
</body>
</html>
let currentBreedText = ""
$(document).ready(function(){
    $("#breed").keyup(function(e){
        currentBreedText = e.target.value
    })
    $("#req").click(function(){
        console.log(currentBreedText)
        const url = `https://dog.ceo/api/breed/${currentBreedText}/images/random`
        $.ajax({
            url: url,
            type: "get",
            data: {},
            dataType: "json",
            success: function(result){
                $('#image').attr("src", result.message)
            }
        })
    })
})

예제3) 날씨 정보 불러오기

<!DOCTYPE html>
<html>
<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">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <title>원하는 국가의 날씨를 보자</title>
    <style>
    </style>
</head>
<body>
    <h2>날씨가 궁금하다!</h2>
  <form id="wth-form">
    <input type="text" name="city"
     placeholder="날씨를 알고싶은 도시는?">
    <button id="req" type="submit">날씨 요청</button>
  </form>
  <h1></h1>
  <p></p>
  <p></p>
  <p></p>
    <script src="04_script.js"></script>
</body>
</html>
$(document).ready(function(){
    $("#wth-form").submit(function(e){
    e.preventDefault()
    const city = this.city.value
    $.ajax({
        url:"http://api.openweathermap.org/data/2.5/weather",
        type : "get",
        data: {
            q : city,
            appid: "37fe104c015d9df48e6168e7649e096f"
        },
        dataType: "json",
        error: function(err){
            console.errer(err.status)
        },
        success: function(result){
            const tmax = result.main.temp_max - 273.15
            const tmin = result.main.temp_min - 273.15
            const tfel = result.main.feels_like - 273.15

            $("h1").text(`오늘 ${city}의 날씨는?`)
            $("p")[0].textContent = (`최고온도 : ${Math.floor(tmax)}`)
            $("p")[1].textContent = (`최저온도 : ${Math.floor(tmin)}`)
            $("p")[2].textContent = (`체감온도 : ${Math.floor(tfel)}`)
        }      
    })
})
})

728x90
반응형

'개발 > 프론트엔드' 카테고리의 다른 글

[JavaScript & Jquery] 로또 추첨기 만들기  (0) 2021.04.14
[JavaScript & Jquery] 제이쿼리 폼 & 객체 편집 메소드  (0) 2021.04.08
[JavaScript & Jquery] 효과 메소드 (애니메이션 효과)  (0) 2021.04.06
[JavaScript & Jquery] 그룹 이벤트 등록 메소드  (0) 2021.04.05
[JavaScript & Jquery] 객체 조작 메소드  (0) 2021.04.04
'개발/프론트엔드' Related Articles more
Comments