Comprendre les requêtes inter-domaines JSONP (exemple de code)

Le contenu de cet article concerne la compréhension des requêtes inter-domaines JSONP (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

J'ai toujours eu peu de connaissances sur JSONP, j'ai donc profité du week-end pour faire le tri aujourd'hui

Explication de Wikipédia :

JSONP (JSON with Padding ou JSON-P[ 1]) est un modèle javascript pour demander des données en chargeant une balise <script> Ippolito en 2005.[2] JSONP permet le partage de données en contournant la même origine La politique interdit l'exécution de JavaScript pour lire le DOM multimédia. éléments ou données XHR récupérés en dehors de l'origine de la page. l'agrégation du schéma du site, du numéro de port et du nom d'hôte identifie comme son origine.</script>

Ma compréhension est la suivante :

1 Le front-end écrit sa propre fonction, utilise la balise script pour envoyer la requête get et apporte le nom de la fonction
2. Le côté serveur reçoit la requête. Ensuite, récupérez la requête lorsque le front-end envoie la requête, ajoutez vos propres données et renvoyez-la.
3. Le contenu renvoyé par le front-end est en fait le paramètre réel de son propre appel de fonction, c'est-à-dire l'objet de données.

• Peu importe si l'explication est un peu confuse, parlez simplement avec des châtaignes.

Code front-end

nbsp;html>


    <title>Document</title>


<script>
    //编写调用函数
    function getremotedata(data) {
        console.log(data);
    }
</script>
<!--用script标签get方法把数据请求发送到后端-->
<script></script>

Code back-end

//用node编写一个简单的服务器
const http = require('http');
const urlModule = require('url');
const server = http.createServer();
server.on('request', function (req, res) {
    //urlModule.parse(req.url.url)的请求 就是这个对象
    // {
    //   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' }
    // 对象结构赋值得到query是一个对象
    const {pathname: url, query} = urlModule.parse(req.url, true)
    if (url === '/') {
        var data = {
            name: '大毛',
            age: 18,
            gender: '未知'
        };
        // 解析query的请求得到前端发送的函数名称，加上括号调用此函数，函数里加实参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')
})

De cette façon, le front-end envoie une requête, et quel que soit le rappel, le back-end renverra le rappel. L'ajout de données permet des requêtes inter-domaines.

La première chose que j'ai écrite, c'est que le langage était un peu flou. Vous pouvez le comprendre en tapant le code vous-même

Front-end autodidacte depuis 3 mois et souhaitez trouver une base. travail frontal

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!