關於JSONP

今天學習到了JSONP，關於JSONP的定義和用法在阮一峰阮老師的博客裏講解得很清楚了，這裏只是記錄一些關於JSONP的點。

回調函數的命名

在阮老師的博客中舉的例子是回調函數命名為foo，在實際使用環境中回調函數一般是搭配著隨機數使用，使用時實時生成，使用過後銷毀此函數。

如：

//客戶端（瀏覽器）
button.addEventListener(‘click‘,(e)=>{
    let script = document.createElement(‘script‘)

    //生成隨機函數名
    let functionName = ‘no1harm‘ + parseInt((Math.random()*1000000),10)
    window[functionName] = function(result){
        alert(result)
    }
    script.src = ‘http://xxx.com:8002/xx?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]
    }
})

// 服務器
...
if( path === ‘/xx‘){
    response.setHeader(‘Content-type‘,‘text/html;charset=utf-8‘)
    response.statusCode = 200
    response.write(`
        ${query.callback}.call(undefined,‘success‘)
    `)
    response.end()
}
...
 

JSONP 為什麽不支持 POST

因為JSONP是通過動態創建script實現的，而動態創建script只能使用GET，不能使用POST。

JSONP的jQuery使用方式

首先在項目引入jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

然後：

//客戶端
button.addEventListener(‘click‘,(e)=>{
    $.ajax({
        //要請求的域名
        url: "http://xxx.com:8002/xx",

        dataType: "jsonp",

        //回調函數
        success: function( response ) {
            if(response === ‘success‘){
                ...
            }
        }
    })
}


//服務器
...
if( path === ‘/xx‘){
    response.setHeader(‘Content-type‘,‘text/html;charset=utf-8‘)
    response.statusCode = 200
    response.write(`
        ${query.callback}.call(undefined,‘success‘)
    `)
    response.end()
}
...
 

值得註意的是，雖然這個命名為$ajax，但是他和ajax沒有關系，他是jQuery的方法。

[JSONP]關於JSONP的幾個點