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には次のように書かれています.
node.jsには次のように書かれています.
JSONPのjQueryの書き方:
JSONPはなぜPOSTリクエストをサポートしていないのか
JSONPはダイナミックにscriptを作成するので、ダイナミックにscriptを作成するときはgetしか使えず、postは使えません.
「私は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は使えません.