jsonp原理-node篇

枫叶在飘呀

已于 2022-10-03 00:16:22 修改

阅读量420

点赞数

分类专栏： node.js 文章标签： javascript json 前端

于 2022-10-02 23:37:06 首次发布

本文链接：https://blog.csdn.net/ld16631069828/article/details/127143527

版权

node.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jsonp-原理node篇

在学习kerwin老师讲的nodejs的课程其中的jsonp原理这节课，使我理解的更加透彻，加深了我对jsonp理解，所以我打算写一篇文章用来记录一下，jsonp的学习成果。

什么是jsonp?

官方给出的解释是这样的:

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的script 元素是一个例外。利用 script元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

通俗来讲就是：现在我有两台服务器，我想通过server1访问server2这个服务器由于浏览器的同源策略问题（域名，端口号，请求协议三者有一者不同就会产品生同源策略问题（也叫跨域问题））但是像script标签以及img和iframe这种开放策略的HTML标签不会产生同源策略问题。
jsonp原理他不属于ajax，他属于js只不过是借助了script标签不会产生同源策略问题而定义的。
下面我们通过一个小例子来实际操作一下.

1.我们先创建一个html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
         var oscript = document.createElement("script");
         oscript.src = "http:127.0.0.1:3000/api/ld?callback=store";     //我们现在要请求端口为3000的这台服务器/api/ld/是请求的路由，我们定义一个函数store用来接收服务器传送过来的数据
         document.body.appendChild(oscript);
         function store(obj){
                console.log(obj);
         }
    </script>
</body>
</html>

2.展示一下node代码：

var http = require('http');           //引入http模块儿
var url = require('url');					//引入url模块儿

http.createServer((req,res)=>{
    var ld = url.parse(req.url,true);   //url.parse 用来解析一个地址他有两个参数  当第二个参数为true时将查询字符串转化为一个对象（通过query属性来访问）,默认是false，下面会打印一下加true和不加true的区别
    console.log(ld.query);
    switch(ld.pathname){   //路由地址
        case "/api/ld":
            res.end(`${ld.query.callback}(${(JSON.stringify({
                name:'ld',
                age:'23'
            }))})`)
            break;
    }
    res.end();
}).listen(3000) //监听3000这个端口号

2.1 先打印一下ld 这个变量，看一下都由什么组成

var http = require('http');
var url = require('url');

http.createServer((req,res)=>{
    var ld = url.parse(req.url);   //第二个参数不给到true
    console.log(ld);
    res.end();
}).listen(3000)

输出结果，可以看到query是以字符串的形式展示的

Url {
  protocol: null,
  slashes: null,
  auth: null,
  host: null,
  port: null,
  hostname: null,
  hash: null,
  search: '?callback=store',
  query: 'callback=store',
  pathname: '/api/ld',
  path: '/api/ld?callback=store',
  href: '/api/ld?callback=store' }

2.2 我们再将参数true加上

var http = require('http');
var url = require('url');

http.createServer((req,res)=>{
    var ld = url.parse(req.url,true);
    console.log(ld);
    res.end();
}).listen(3000)

输出结果:加true与不加true的区别就是 query的展示状态不一个样，一般我们都会选择使用对象的形式,这样会方便好多

Url {
  protocol: null,
  slashes: null,
  auth: null,
  host: null,
  port: null,
  hostname: null,
  hash: null,
  search: '?callback=store',
  query: { callback: 'store' },
  pathname: '/api/ld',
  path: '/api/ld?callback=store',
  href: '/api/ld?callback=store' }