JS #5 JSONP가 뭐예요?

2028 단어
JSONP는 그다지 높은 것이 아니다. 간단하게 말하자면
요청자:frontend.com(브라우저)
응답방:backend.com(서버)
  • 요청자가 동적 script를 만드는데 그 중에서 라벨의 src는 응답자를 가리킨다. 요청자의 리셋 함수 이름이renderPayment라고 가정하면 우리는 검색 매개 변수인callbackName=renderPayment를 응답자에게 동시에 전달해야 한다
  •     let script = document.createElement("script");
        let functionName = 'f' + parseInt(Math.random() * 100000, 10);
        window[functionName] = function(result){
            console.log(`the result from back end is ${result}!`);
        }
        script.src = `127.0.0.1:8001/pay?callbackName=${functionName}`
        document.body.appendChild(script);
    
        // delete script tag when finish the request
        script.onload = function(e){
            e.currentTarget.remove();
        }
    })
    

    물론 우리는 jQuery를 사용하여 더욱 간결한 코드로 실현할 수 있다.
    $.ajax({
        url: '127.0.0.1:8001/pay',
        dataType: 'jsonp',
        success: function(response){
            console.log(`the result from back end is ${response}!`);
        }
    })
    
  • 응답자는 조회 매개 변수인callbackName에 따라 유사하게 구성됩니다

  • xxx.call(undefined,'요청자가 원하는 데이터')xxx('청구자가 원하는 데이터')
    이러한 응답
    if (path === '/pay'){
        let amount = fs.readFileSync('./db', 'utf8')
        amount -= 1
        fs.writeFileSync('./db', amount)
        let callbackName = query.callback
        response.setHeader('Content-Type', 'application/javascript')
        response.write(`
            ${callbackName}.call(undefined, 'success')
        `)
        response.end()
    }
    
  • 브라우저가 응답을 받으면 renderPayment를 실행합니다.call(undefined,'요청자가 원하는 데이터')
  • 그러면 요청자는 원하는 데이터를 얻고 처리를 완료합니다

  • 이게 바로 JSONP입니다.
    다음은 약속이 속된 것들이다.
  • GET 요청의 조회 매개 변수는 보통callback입니다
  • 리셋 함수 이름은 보통 비숫자+랜덤수이다. 예를 들어 j48174940

  • 마지막으로 면접 문제를 기록합니다: 왜 JSONP는 POST 요청을 지원하지 않습니까?Answer:
  • JSONP는 동적으로 script 라벨을 만들어서 이루어진 것이기 때문이다
  • 동적으로 스크립트를 만들 때 GET만 사용할 수 있고 POST를 사용할 수 없습니다
  • 좋은 웹페이지 즐겨찾기