JSONPとは

2456 ワード

JSONPは1つのオブジェクトで、左paddingと右paddingがあって、オブジェクトの中のkeyは二重引用符(JSON文法に合致します)をプラスして、このオブジェクトはJSONと言って、左paddingと右paddingはPと言って、合わせてJSONPです.
「私はscriptを要求して、scriptは私の1つの関数を呼び出して同時にこの関数を最初のパラメータのこのような形式をJSONPと呼んで、ただ特殊な情況の下でJSONが現れて、普通はStringPです.
JSONPが解決しなければならない問題は、2つのサイト間でどのように交流するかです.
JSONPの完全なプロセス:
請求先:xxx.comのフロントエンドプログラマー(ブラウザ)応答者:yyy.comのバックエンドプログラマ(サーバ)1.リクエスト側はscriptを作成する.srcは応答者を指し、同時にクエリーパラメータを送信しますか?callbackName=xxx(任意の名前)2.応答者は、クエリパラメータcallbackNameに従って、(1)xxx.call(undefined,'必要なデータ')(2)xxx('必要なデータ')のような応答を行い、データを最初のパラメータとしてリクエスト者3に渡す.ブラウザは応答を受信とxxxを実行する.call(undefined,'必要なデータ')4.では、リクエスト側は彼が要求したデータを知っています.
業界の共通認識:
1.callback Nameはcallback/jquery-callbackと呼ぶことを約束しています.callbackの名前は勝手に取ってもいいですが、数字で始まるのはやめましょう.
約束通りの書き方:
JSには次のように書かれています.
button.addEventListener('click',(e) => {
  let script = document.createElement('script')
  //       ,         ,         
  let functionName = 'wen' + parseInt(Math.random()*100000,10)
window[functionName] = function(result){
  if(result === 'success'){
    amount.innerText = amount.innerText - 1
}else{
    alert('  ')
      }
}
script.src = 'http://xxx.com:8001/pay?callback = ' + functionName
document.body.appendChild(script) //  script  body ,     
script.onload = function(e){
  e.currentTarget.remove() //     script  
  delete window[functionName] //         
}
script.onerror = function(e){
  e.currentTarget.remove()
  delete window[functionName]
}
})

node.jsには次のように書かれています.
if (path === '/pay'){
      let amount = fs.readFileSync('./db','utf8')
      amount -= 1
      fa.writeFileSync('./db',amount)
      let callbackName = query.callback 
      response.setHeader('content-Type','application/javascript')
      response.write(
          `${callbackName}.call(undefined,'success')`
    )
      response.end()
}

JSONPのjQueryの書き方:
 $.ajax({ //  API ajax,   ajax    
 url: "http://jack.com:8002/pay",
 dataType: "jsonp",
 success: function( response ) {
     if(response === 'success'){
     amount.innerText = amount.innerText - 1
     }
 }
 })     //  jQuery  ,    script   ,    callback    ,          

 $.jsonp()

JSONPはなぜPOSTリクエストをサポートしていないのか
JSONPはダイナミックにscriptを作成するので、ダイナミックにscriptを作成するときはgetしか使えず、postは使えません.