解决ajax跨域问题之JSONP

页面数据交互的发展过程

付款是我们日常中常见的一种金钱交易，用户在页面中点击付款按钮，网页提交请求给服务器，服务器收到请求后在数据库对金额进行扣减，然后将消息返回给页面，告诉用户给付款成功。

在讲JSONP之前，我们先看看以前的前端程序员是用什么办法实现一个网页数据交互过程的。

用form表单向服务器发起请求

页面代码如下：用表单提交post请求，请求路径为/pay




    
    Title


您的账户余额是&&&amount&&&
//用表单提交post请求，请求路径为/pay

服务器代码

当请求的路径为/pay时，数据库进行扣减金额一块钱，然后给页面返回success

if(path === '/pay'&& method.toUpperCase()==='POST'){
//如果的路径是path，而且你的方法是post
    var amount = fs.readFileSync('./db', 'utf8') //100
    //那么我就去读一下你当前有多少钱
    var newAmount = amount - 1
    //然后把这个钱扣一块，扣了一块之后就是99
    fs.writeFileSync('./db', newAmount)
    //然后再把剩下的钱存到数据库里
    response.write('success')
    //然后告诉你扣费成功了
    response.end()
    //结束
  }

当我们点击付款的时候可以看到扣费了一块钱

再回到我们之前自己用文件db存的一个数据库，库里就只有一个数字100，上面点击扣费后，数据库里的余额剩99了

再来模拟一下失败付款扣费的方案

if(path === '/pay'&& method.toUpperCase()==='POST'){
    var amount = fs.readFileSync('./db', 'utf8') //100
    var newAmount = amount - 1
    if(Math.random()>0.5{
        fs.writeFileSync('./db', newAmount)
        response.write('success')
    }else{
        response.write('fail')
    }
  response.end()

这里有一个比较重要的细节，在点击付款按钮的form表单，一旦提交了，就一定会刷新当前页面，不管是成功付款还是失败付款，都会刷新页面。这样用户体验效果就很差了，我们可以用另外一种方式优化一下，但是这个方式也是比较古老的，就是用iframe来实现。

您的账户余额是&&&amount&&&

    



//使用iframe来实现，这个方法也很古老

img发请求法

浏览器有一个特点，一旦发现你在内存里面创建了一个img，它就会去请求这个img的source.
这种办法有一个缺陷，就是没办法去post，所以它一定会去get
使用用img发起一个请求，服务器会同时执行两句话

页面代码

用图片发起get请求
button.addEventListener('click', (e) => {
    let image = document.createElement('img')
    image.src = '/pay'
    image.onload = function() {
      alert('打钱成功')
      amount.innerText = amount.innerText - 1
    }
    image.onerror = function() {
      alert('打钱失败')
    }
}

服务器代码

if(Math.random()>0.5{
    fs.writeFileSync('./db', newAmount)
    response.setHeader('Content-Type','image/ipg')
    response.statusCode = 200
    response.write('fs.writeFileSync('./dog.jpg'))
    //只能传送一张真的图片，才能让服务器成功发起请求
}else{
    response.status=400
    response.write('fail')
}
response.end()

script发请求法(SRJ)

尝试用script发起请求，但是到服务器运行后发现没有丝毫变化

通过其他前端工程师不断地尝试，发现只有把