jsonp 原理 并模拟实现一个简单的jsonp

时间：2024-03-21 18:33:20

jsonp产生的背景

1.从原网站向目标网站（服务端）发送ajax请的时候，由于浏览器的安全策略（这两个网站只要域名，端口，协议 有一个不同就不允许请求访问）导致跨域，从而请求无法正常进行。

2.Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）。

3.于是可以判断，当前阶段如果想通过纯web端跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理。

4.从服务器端请求到的js代码是立即执行的,想要处理请求到的数据，可以把服务器端的数据放在一个方法里面，跟随数据一起返回，浏览器端获取到js代码后，立即执行此方法，于此同时浏览器端需要先定义这个方法，供服务器返回的js调用，这个方法就是所谓的callBack。

做实验，了解大概流程

比如服务端（www.abc.com）的根目录下有个 test.js 文件，代码如下：

alert('hello')

本地服务器127.0.0.1:3000 下有个demo.html页面代码如下：

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<script type="text/javascript" src='http://www.abc.com/test.js'></script>

</body>

</html>

这时候页面就会弹出 'hello'， 因为alert是浏览器自带的函数。

这时候 把 test.js 的内容改成如下：

testFunction('hello')

再打开demo.html页面，就会报错如下：

jsonp 原理 并模拟实现一个简单的jsonp

因为在浏览器端没有找到testFunction方法，这就需要在浏览器端要事先定义好要执行的这个testFunction方法。

在浏览器加上testFunction方法后，代码如下：

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<script type="text/javascript">

    var testFunction = function(data){

        alert('执行testFunction' + data)

    }

</script>

<script type="text/javascript" src='http://127.0.0.1:3000/users'></script>

</body>

</html>

运行demo.html 结果如下：

jsonp 原理 并模拟实现一个简单的jsonp

实验总结

1.服务端返回一个函数，并且函数包裹着浏览器端需要的数据。

2.浏览器端定义一个函数，跟服务端返回的函数名一样，用来处理获取到的数据。

浏览器端具体代码实现

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<script type="text/javascript">

    var testFunction = function(data){

        alert('执行testFunction' + data.message)

    }

</script>
<!-- 把浏览器定义的方法以参数的形式传递给服务端就是 callback=testFunction -->

<script type="text/javascript" src='http://127.0.0.1:3000/users?callback=testFunction'></script>

</body>

</html>

服务端代码，以node.js为例

const express = require('express');

const app= express();

app.get('/users', (req, res)=>{

   // 这一步JSONP必备

  var _callback = req.query.callback;

  // 这个responseData是后台要传回给前台的数据

  var responseData = { status: '', message: 'hello, 你好'};

  if (_callback){

      // 这两步设置发送也是NODE.JS发送JSONP必备

      res.type('text/javascript');

      res.send(_callback + '(' + JSON.stringify(responseData) + ')');

  }

  else{

      res.json(responseData);

  }

});

app.listen(, ()=>{

    console.log('Server is running at http://localhost:8080')

})

完成，jsonp的过程就是这样了，jquery这类框架的 jsonp 是其实就把这个过程给封装好了， 由于需要把参数都放在 <script> 的 src里面向服务端请求， 所以jsonp只持之get请求。

相关文章