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

jsonp产生的背景

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

2.Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如

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

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

testFunction('hello')

再打开demo.html页面,就会报错如下:

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

在浏览器加上testFunction方法后,代码如下:




    





运行demo.html 结果如下:

 

实验总结

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

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

浏览器端具体代码实现




    



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

const express = require('express');
const app= express();

app.get('/users', (req, res)=>{
   // 这一步JSONP必备
  var _callback = req.query.callback;
  // 这个responseData是后台要传回给前台的数据
  var responseData = { status: '1', message: 'hello, 你好'};
  if (_callback){
      // 这两步设置发送也是NODE.JS发送JSONP必备
      res.type('text/javascript');
      res.send(_callback + '(' + JSON.stringify(responseData) + ')');
  }
  else{
      res.json(responseData);
  }
});
app.listen(8080, ()=>{
    console.log('Server is running at http://localhost:8080')
})

 

完成,jsonp的过程就是这样了,jquery这类框架的 jsonp 是其实就把这个过程给封装好了, 由于需要把参数都放在

你可能感兴趣的:(jsonp 原理 并模拟实现一个简单的jsonp)