JSONP-CSDN博客

数据库

文件系统是一种数据库
MySQL是一种数据库

局部刷新怎么做

方案一：用图片造GET请求

button.addEventListener('click', (e)=>{
    let image = document.createElement('img')
    image.src = '/pay'
    image.onload = function(){ // 状态码是 200~299 则表示成功
        alert('成功')
    }
    image.onload = function(){ // 状态码大于等于 400 则表示失败
        alert('失败')
    }
})
复制代码

后端代码：

    var amount = fs.readFileSync('./db','utf-8')
    var newAmount = amount - 1
    fs.writeFileSync('./db',newAmount)
    response.setHeader('Content-Type','image/jpg')
    response.statusCode = 200
    response.write(fs.readFileSync('./dog.jpg')) // 响应一个真图片欺骗浏览器
    response.end()
复制代码

弊端：后台需要返回一个真的图片欺骗浏览器

方案二：用script造GET请求

button.addEventListener('click', (e)=>{
    let script = document.createElement('script')
    script.src = '/pay'
    document.body.appendChild(script) // 将script标签加入body,否则会加载失败
    script.onload = function(e){ // 状态码是 200~299 则表示成功
        e.currentTarget.remove()  // 删掉这个script标签
    }
    script.onload = function(e){ // 状态码大于等于 400 则表示失败
        e.currentTarget.remove()
    }
})
复制代码

后端代码：

if (path === '/pay'){
    let amount = fs.readFileSync('./db', 'utf8') // 读取db文件里的数据
    amount -= 1  
    fs.writeFileSync('./db', amount) // 将运算后amount的写入db文件
    response.setHeader('Content-Type', 'application/javascript')
    response.write('amount.innerText = amount.innerText - 1')
    response.end()
}
复制代码

这种技术叫做SRJ： Server Rendered JavaScript

JSONP

请求方：frank.com 的前端程序员（浏览器）响应方：jack.com 的后端程序员（服务器）

请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy
响应方根据查询参数callbackName，构造形如yyy.call(undefined, '你要的数据')这样的响应
浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据')
那么请求方就知道了他要的数据

这就是JSONP，动态标签跨域请求技术。

方案三

button.addEventListener('click', (e)=>{
    let script = document.createElement('script')
    let functionName = 'frank'+ parseInt(Math.random()*10000000 ,10)
    window[functionName] = function(){  // 每次请求之前搞出一个随机的函数
        amount.innerText = amount.innerText - 0 - 1
    }
    script.src = '/pay?callback=' + functionName
    document.body.appendChild(script)
    script.onload = function(e){ // 状态码是 200~299 则表示成功
        e.currentTarget.remove()
        delete window[functionName] // 请求完了就干掉这个随机函数
    }
    script.onload = function(e){ // 状态码大于等于 400 则表示失败
        e.currentTarget.remove()
        delete window[functionName] // 请求完了就干掉这个随机函数
    }
})
复制代码

后端代码：

if (path === '/pay'){
    let amount = fs.readFileSync('./db', 'utf8')
    amount -= 1
    fs.writeFileSync('./db', amount)
    let callbackName = query.callback
    response.setHeader('Content-Type', 'application/javascript')
    response.write(`
        ${callbackName}.call(undefined, 'success')
    `)
    response.end()
}
复制代码

JSONP的一些约定

callbackName约定写成callback
函数名yyy写成一个随机数frank1231321564()

终极方案，用jQuery写

 $.ajax({
 url: "http://jack.com:8002/pay",
 dataType: "jsonp",
 success: function( response ) {
     if(response === 'success'){
     amount.innerText = amount.innerText - 1
     }
 }
 })

 $.jsonp()
复制代码