JSONP

JSONP

问：什么是　JSONP？

1. 问题引入

在日常开发中，前端程序员想要从后端请求一些数据，是如何操作的呢？如下图：

image

需求为：用户每点击一下“打钱”，上面的账户余额数量减１
如何实现？

首先，要修改动态数据必然是要请求数据库的数据，在此基础上进行修改，然后保存在数据库中，便于下一次使用。由此发现，在请求数据过程中必然是要请求外部链接。

然而在HTML标签中，可以发请求的标签屈指可数，只有,

,,, //部分后端代码如下 if(path == '/'){ var string = fs.readFileSync('./index.html','utf8') response.setHeader('Content-Type', 'image/jpg; charset=utf-8') response.write(string) response.end() }

假设服务器允许该请求，在请求路径为/pay 时表示告诉服务器要请求数据，后台进行相对应的操作。

4.方案三：使用

细节：

• 使用 标签的传输 方式只能为 get ，没有 post 的方式
• 创建 // 部分后端代码 if(path == '/'){ var string = fs.readFileSync('./index.html','utf8') response.setHeader('Content-Type', 'text/html; charset=utf-8') response.write(string) response.end() }else if(path == '/pay'){ var amount = fs.readFileSync('./db','utf8') var newAmount = amount - 1 fs.writeFileSync('./db',newAmount) response.setHeader('Content-Type','application/javascript') response.statusCode = 200 response.write(`amount.innerText = amountText - 1`) response.end }else{ response.statusCode = 404 response.end() }
  • 当script执行完了以后,无论成功或者失败，都自动删除
  • 验证方法？ debugger

  使用

  知道 以上原理以后，我们可以开始使用 jQuery

  首先引用 jQuery，关于 JSONP 的API 和使用方法可以参考 jsonp-jquery

  $.ajax({
    dataType: "json",
    url: "http://www.jack.com/pay",
    data: data,
    success: function(rewponse){
      if(response === 'success'){
        amount.innerText = amount.innerText - 1
      }
    }
  });
  

  注意：上面的 $.ajax 和 AJAX 没有半毛钱关系，它的本质还是上面我们说到的 动态