46. jQuery(3)

ajax

xml(1)

 <div id="box1">
    <button id="btn1">XML요청1</button>
  </div>
  <script>
    $('#btn1').click(function(){
      $.ajax({
        /* 요청 */
        type: 'get',       //RequestMethode : get 또는 post
        url: 'product1.xml',   //요청 URL (서버 경로 작성)
        async: 'true',      // 비동기 통신(디폴트, 생략가능)
        /* 응답 */
        dataType: 'xml', // 응답 데이터의 타입(text, xml, json 등)
        success: function(resData){ //매개변수 data로 응답 데이터가 전달됨 (resData = xhr.reponseXML 또는 resData=xhr.reponseText) 
          //기존 목록 제거하기 ,안하면 누적되어서 나온다. 한번만 나오게 하려면 해야함
          $('#box1').find('ul').remove();
          //resData에서 <product> 태그만 가져오기
           var product = $(resData).find('product');  // 하위 태그를 찾아 갈때는 find 메소드가 좋다. JavaScript 
          $.each(product, function(i, elem){
            // <ul> 태그를 jQuery 객체로 생성
            var ul = $('<ul>');
            ul.append($('<li>').text($(elem).find('model').text()));  
            ul.append($('<li>').text($(elem).find('maker').text()));  
            ul.append($('<li>').text($(elem).find('price').text()));  
            //<div id="box1">에 <ul> 태그 넣기 
            $('#box1').append(ul);    
           })           
      },
        error: function(jqXHR){  //jqXHR 객체 : 에러에 관한 정보를 담고 있는 객체 
          // <div id="box1"> xormfmf jQuery 객체로 가져옴
          var box1 = $('#box1');
          box1.append($('<div>').text('응답코드 ' + jqXHR.status));
          box1.append($('<div>').text('응답코드 텍스트 ' + jqXHR.statusText));
          box1.append($('<div>').text('응답 텍스트' + jqXHR.responseText));        
        }        
      })
    })
  </script>

xml(2)

 <div id="box2">
    <button id="btn2">xml요청2</button>
  </div>
  <script>
    $('#btn2').click(function(){
      $.ajax({
        /* 요청 */
        type: 'get',
        url: 'product2.xml',
        async: true,
        /*응답*/
        dataType:'xml',
        success: function(resData){
          //<div class="product_list"> 태그를 jQuery 객체로 만들기 
          var productList = $('<div>').addClass('product_list');
          //resData에서 <product> 태그를 가져온뒤 순회하기
          $.each($(resData).find('product'), function(i, elem){ //find(product)는 배열이 된다. 
            //<div class="product"> 태그를 jQuery 객체로 만들기 
            var div = $('<div>').addClass('product');  
            // <div class="product"> 태그에 model, maker, price 속성(attribute) 값 넣기 
            div.append($('<strong>').text($(elem).attr('model'))).append('<br>');
            div.append($('<em>').text($(elem).attr('maker')));        
            div.append($('<mark>').text($(elem).attr('price')));        
            //<div class="product_list"> 태그에 <div class= "product">에 넣기 
            productList.append(div);    
            // <div id="box2"> 태그에 <div class="product_list"> 태그 넣기
            $('#box2').append(productList);  
          } )  
        },
        error: function(jqXHR){
          alert(jqXHR.status + '(' + jqXHR.statusText + ')');
        }
      })
    })
  </script>
  <style>
    #box2 div{
      box-sizing: border-box;
      border: 1px solid grey;
    }
    #box .product_list{
      width: 400px;
      display: flex;
      justify-content: space-between;
    }
    #box2 .product {
      width: 100px;
      padding: 20px 10px;
      text-align: center;
    }
    #box2 .product * {
      display:block;
    }
  </style>

JSON(1)

<div id="box3">
    <button id="btn3">JSON요청1</button>
  </div>
  <script>
    $('#btn3').click(function(){
      $.ajax({
        /* 요청 */
        type: 'get',
        url: 'product1.json',
        async: true,
        /* 응답 */
        dataType: 'json',
        success: function(resData){         // resData = JSON.parse(xhr.responseText)
          $('#box3').find('div').remove();  // 기존 목록 제거하기
          myFunc1(resData);                 // myFunc1 함수 호출
        },
        error: function(jqXHR){
          alert(jqXHR.status + '(' + jqXHR.statusText + ')');
        }
      })
    })
    // myFunc1 함수 정의
    function myFunc1(resData){
      var productList = $('<div>').addClass('product_list');
      $.each(resData, function(i, elem){
        var ul = $('<ul>').addClass('product');
        ul.append($('<li>').text(elem.maker));
        ul.append($('<li>').text(elem.model));
        ul.append($('<li>').text(elem.price));
        productList.append(ul);
      })
      $('#box3').append(productList);
    }
  </script>
  <style>
    #box3 * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    #box3 .product_list {
      width: 400px;
      display: flex;
      justify-content: space-around;
      border: 1px solid crimson;
    }
    #box3 .product {
      list-style-type: none;
      width: 100px;
      padding: 20px 10px;
      text-align: center;
      border: 1px solid gray;
    }
  </style>

JSON(2)

 <div id="box4">
    <button id="btn4">JSON요청2</button>
  </div>
  <script>
    $('#btn4').click(function(){
      $.ajax({
        /* 요청 */
        type: 'get',
        url: 'product2.json',
        async: true,
        /* 응답 */
        dataType: 'json',
        success: function(resData){           // resData = JSON.parse(xhr.responseText)
          $('#box4').find('table').remove();  // 기존 테이블 제거하기
          myFunc2(resData);                   // myFunc2 함수 호출
        },
        error: function(jqXHR){
          alert(jqXHR.status + '(' + jqXHR.statusText + ')');
        }
      })
    })
    // myFunc2 함수 정의
    function myFunc2(resData){
      var table = $('<table border="1"><thead><tr><td>순번</td><td>제조사</td><td>상품</td><td>가격</td></tr></thead><tbody>');
      $.each(resData.products, function(i, elem){
        var tr = $('<tr>');
        tr.append($('<td>').text(i + 1));
        tr.append($('<td>').text(elem.maker));
        tr.append($('<td>').text(elem.model));
        tr.append($('<td>').text(elem.price));
        table.append(tr);
      })
      $('#box4').append(table);
    }
  </script>

Promise

Promise 객체

      1. 비동기 처리의 결과(성공 또는 실패) 값을 나타낼수 있는 객체이다. 
        (비동기 처리를 할 때 응답이 올 때 까지 기다리는 JavaScript 객체이다. )
      2. Promise 상태
        1) 대기 상태 : pending, 이행도 하지 않고 거부도 하지 않는 초기 상태
        2) 이행 상태 : fulfilled, 비동기 처리가 성공적으로 완료된 상태
        3) 거부 상태 : reject, 비동기 처리사 실패된 상태 
      3. Promise 메소드
        1) Promise.resolve() : 이행상태에서 호출하는 메소드이다. resolve()메소드가 반환하는 프로미스는 then() 메소드를 따라가서 처리된다. 
        2) Promise.reject()  : 거부상태에서 호출하는 메소드이다. reject() 메소드가 반환하는 프로미스는 catch() 메소드를 따라가서 처리된다.

 	//Promise 객체 생성
   var promise = new Promise(function(resolve, reject){

     // 랜덤으로 이행상태(성공)와 거부상태(실패)를 생성
     if(Math.random() < 0.5){
       resolve('이행'); // resolve() 메소드를 호출하면 then() 메소드에서 정의한 함수가 실행된다.
     } else {
       reject('거부'); //reject()메소드를 호출하면 catch() 메소드에서 정의한 함수가 실행된다.
     }
   });

   //Promise가 이행상태인 경우
   promise.then(function(str){
     console.log(str + '이행');
   })
   
   //promise가 거부상태인 경우 
   promise.catch(function(str){
     console.log(str + '거부');

   })

예제

   <div>
    <button id="btn"> 이미지열기</button>
    <div id="img"></div>
  </div>
  <script>
    $('#btn').click(function(){
      var no = parseInt(Math.random() * 10 + 1); // 1 ~ 10 사이의 랜덤 값 생성
      openImage('../../assets/images/animal' + no + '.jpg');
    })
    function openImage(imageURL){
      new Promise(function(resolve, reject){
        // ajax을 이용해서 이미지를 blob(binary Type, 이진타입)
        $.ajax({
          type: 'get',
          url:imageURL,
          async: true,
          xhrFields: {
            responseType: 'blob'
          },
          success: function(resData){ //resData 에는 이미비의 이진데이터가 전달됨
            resolve(resData);
          },
          error: function(jqXHR){
            reject(jqXHR);
          }
        })
      }).then(function(resData){  //resDAata 이미지 파일의 이진데이터가 들어있다. 
        var img = new Image();  //<img> 태그를 만들어 주는 JavaScript 객체 
        img.src = URL.createObjectURL(resData);
        $('#img').empty();
        $('#img').append(img);
      }).catch(function(jqXHR){
        alert(jqXHR.status + '(' + jqXHR.statusText + ')');

      })
    }

  </script>