JSONP

• JSONP是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get请求
• 工作方式：在网页有一些标签天生具有跨域能力：img、link、iframe、script；JSONP就是利用script标签的跨域能力来发送请求的

8.3.1. 原理

.html

• response.end()返回的结果是函数调用，函数的参数是想给客户端返回结果的数据，函数必须在前端页面提前声明，（前端页面的函数对返回过去的数据进行处理）
• script标签中引用url

server.js

//原理：返回的结果是函数调用，函数的参数是想给客户端返回结果的数据
//函数要在前端页面提前声明（前端函数对返回过去的数据进行处理）
app.all('/jsonp-server', (request, response) => {
  const data = {
    name: 'phy'
  };
  //将数据转化成字符串
  let str = JSON.stringify(data);
  //返回结果
  response.end(`handle(${str})`);
})

8.3.2. JSONP实践

.html

  
  



  用户名：
  

  

server.js

//检测用户名是否存在
app.all('/check-username', (request, response) => {
  const data = {
    exist: 1,
    msg: '用户名已经存在'
  };
  //将数据转化成字符串
  let str = JSON.stringify(data);
  //返回结果
  response.end(`handle(${str})`);
})

8.3.3. jQuery-jsonp

.html

• url后需加?callback=?固定写法

  
  
  
  



  
  点击发送jsonp请求
  


  
  

server.js

//jQuery-jsonp
app.all('/jquery-jsonp-server', (request, response) => {
  const data = {
    name: 'jscksmk',
    city: ['北京', '上海', '杭州']
  };
  //将数据转化成字符串
  let str = JSON.stringify(data);
  //接收callback参数
  let cb = request.query.callback;
  //返回结果
  response.end(`${cb}(${str})`);
})