2018-04-09 JSONP 시작

1635 단어

1. 필수 면접, JSONP란 무엇인가


네이티브 JS:
button.addEventListener('click',(e)=>{
  let script = document.createElement('script');
  let functionName = 'frank'+parseInt(Math.random()*100000,10);
  window[functionName] = function (result) {
    if(result === 'success'){
      amount.innerText = amount.innerText - 1
    }else {
      alert(`fail`)
    }
  };

  script.src = 'http://jack.com:8002/pay?callback=' + functionName;
  document.body.appendChild(script);
  script.onload = function (e) {
    e.currentTarget.remove();
    delete window[functionName]
  };
  script.onerror = function (e) {
    alert('fail');
    e.currentTarget.remove();
    delete window[functionName]
  }
});

요청자:frank.com의 프런트엔드 프로그래머(브라우저) 서버:jack.com의 백엔드 프로그래머(서버)
  • 요청자는 src가 서버의 IP 주소를 가리키는 스크립트 탭을 만들고 조회 매개 변수 (?callback=functionName) 를 전송합니다
  • 서버 통과
    response.write(`
      ${query.callback}.call(undefined,'success')
    `)
    
    이 말은 정수'success'는 JSON입니다. 왼쪽은 왼쪽 패딩, 오른쪽 괄호는 오른쪽 패딩, 합치면 JSONP라고 합니다. 이렇게 요청자의 콜백 함수를 호출합니다. 이름은functionName입니다
  • 브라우저가 성공의 응답을 받으면 functionName 함수를 실행합니다

  • 2. 필수 면접 문제: JSONP는 왜 POST 요청을 지원하지 않는가


    답: JSONP는 동적으로 script를 만드는 방법으로 진행되며, script는 get 요청만 보낼 수 있고post 요청은 보낼 수 없습니다.

    3. jquery의 작법


    jsonp는 aax가 아니에요.
    $.ajax({
      url:"http://jack.com:8002/pay",
      dataType: "jsonp",
      success:function (response) {
        if(response === 'success'){
          amount.innerText = amount.innerText-1;
        }
      }
    })
    

    좋은 웹페이지 즐겨찾기