JSONP跨域請(qǐng)求的示例分析

發(fā)布時(shí)間：2020-12-07 13:49:25 來源：億速云閱讀：120 作者：小新欄目：web開發(fā)

這篇文章主要介紹了JSONP跨域請(qǐng)求的示例分析，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

維基百科的解釋：

JSONP (JSON with Padding or JSON-P[1]) is a javascript pattern to request data by loading a <script> tag. It was proposed by Bob Ippolito in 2005.[2] JSONP enables sharing of data bypassing same-origin policy. The policy disallows running JavaScript to read media DOM elements or XHR data fetched from outside the page's origin. The aggregation of the site's scheme, port number and host name identifies as its origin.

我的理解是：

1、前端編寫自己的函數(shù)，用script標(biāo)簽發(fā)送get請(qǐng)求把函數(shù)名字帶上
2、服務(wù)器端接送到請(qǐng)求后獲取前端發(fā)送請(qǐng)求時(shí)的query，添加上自己的數(shù)據(jù)返回后。
3.、前端獲取返回的內(nèi)容其實(shí)就自己的函數(shù)調(diào)用實(shí)參是數(shù)據(jù)對(duì)象。

解釋的有點(diǎn)懵逼沒關(guān)系，用栗子說話。

前端代碼

<!doctype html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
<script>
    //編寫調(diào)用函數(shù)
    function getremotedata(data) {
        console.log(data);
    }
</script>
<!--用script標(biāo)簽get方法把數(shù)據(jù)請(qǐng)求發(fā)送到后端-->
<script src="http://localhost:3999/?callback=getremotedata"></script>
</body>
</html>

后端代碼

//用node編寫一個(gè)簡(jiǎn)單的服務(wù)器
const http = require('http');
const urlModule = require('url');
const server = http.createServer();
server.on('request', function (req, res) {
    //urlModule.parse(req.url.url)的請(qǐng)求 就是這個(gè)對(duì)象
    // {
    //   protocol: null,
    //   slashes: null,
    //   auth: null,
    //   host: null,
    //   port: null,
    //   hostname: null,
    //   hash: null,
    //   search: '?callback=getremotedata',
    //   query: 'callback=getremotedata',
    //   pathname: '/',
    //   path: '/?callback=getremotedata',
    //   href: '/?callback=getremotedata' }
    // 對(duì)象結(jié)構(gòu)賦值得到query是一個(gè)對(duì)象
    const {pathname: url, query} = urlModule.parse(req.url, true)
    if (url === '/') {
        var data = {
            name: '大毛',
            age: 18,
            gender: '未知'
        };
        // 解析query的請(qǐng)求得到前端發(fā)送的函數(shù)名稱，加上括號(hào)調(diào)用此函數(shù)，函數(shù)里加實(shí)參servedata返回
        var scripteStr = `${query.callback}(${JSON.stringify(data)})`
        console.log(scripteStr)
        res.end(scripteStr)
    } else {
        res.end('404')
    }
});
server.listen('3999', function () {
    console.log('server is running 3999')
})

這樣前端發(fā)送請(qǐng)求，無論回調(diào)是什么，后端都會(huì)返回回調(diào)加data數(shù)據(jù)，就實(shí)現(xiàn)了跨域請(qǐng)求啦。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享JSONP跨域請(qǐng)求的示例分析內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

JSONP跨域請(qǐng)求的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽