zoukankan      html  css  js  c++  java
  • 从实现HTML页面局部刷新到JSONP

    也可以用iframe方法发get请求,但是目前iframe基本已经被弃用,所以此处就不介绍这个方法。

    方案一:用图片造 get 请求

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

    方案二:用 script 造 get 请求

    • 用script发请求有个问题,不管成功或者失败,都会生成一个<script>并执行其中的内容。
    button.addEventListener('click', function(e){
        let script = document.createElement('script')
        script.src = '/pay'
        document.body.appendChild(script) //一定要.body
        script.onload = function(e){ // 状态码是 200~299 则表示成功
           //删除新生成的<script>
           e.currentTarget.remove()
        }
        script.onerror = function(e){ // 状态码大于等于 400 则表示失败
            e.currentTarget.remove()
        }
    })
    //后端代码
    ...
    if (path === '/pay'){
        let amount = fs.readFileSync('./db', 'utf8')
        amount -= 1
        fs.writeFileSync('./db', amount)
        response.setHeader('Content-Type', 'application/javascript')  
        //如果是image发请求,上一列最后一个参数'image/png',并且需要write传入一个真的图片才能成功
        response.write('amount.innerText = ' + amount) 
       response.end() } ...

    方案三:JSONP

    button.addEventListener('click', (e)=>{
        let script = document.createElement('script')
        let functionName = 'dsfnd'+ 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] // 请求完了就kill掉这个随机函数
        }
        script.onload = function(e){ // 状态码大于等于 400 则表示失败
            e.currentTarget.remove()
            delete window[functionName] // 请求完了就kill掉这个随机函数
        }
    })
    //后端代码
    ...
    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()
    }
    ...
    请求方:aaa.com 的前端程序员(浏览器)
    响应方:bbb.com 的后端程序员(服务器)
    假设有aaa.com、bbb.com 两个网站,aaa.com的前端想要访问bbb.com 的后端,aaa.com的前端可在请求的“/pay”前面加上bbb.com 的域名。通过跨域SRG。
    后端不需要太了解前端的代码,如果太了解,就叫前端后端耦合,需要解耦。
    解耦的方法:后段调用前端提供的一个函数。
    
    什么是JSONP?
    请求方创建 script,src 指向响应方,同时传一个查询参数 ?callbackName=yyy 
    响应方根据查询参数callbackName,
    构造形如 yyy.call(undefined, '你要的数据') yyy('你要的数据') 这样的响应 
    浏览器接收到响应,就会执行 yyy.call(undefined, '你要的数据') 
    请求方就知道了他要的数据 
    这就是 JSONP 。简单说就是script加callback参数。
    JSONP的主要方法是通过动态创建<script>标签并配置的src属性,然后加入页面,触发浏览器加载并执行相应的 JavaScripts 代码,以实现无刷新数据交互的效果。
    约定:
    callbackName -> callback 
    yyy -> 随机数 frank12312312312321325()

    方案四:jQuery

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

    JSONP 为什么不支持 POST?

    因为JSONP是通过动态创建Script实现的,动态创建Script的时候只能用GET,不能用POST。

  • 相关阅读:
    oracle安装界面中文乱码解决
    Vmware esxi开启snmp服务
    sybase ase 重启
    zabbix通过snmp监控vmware vpshere5.5
    Linux下安装Sybase ASE 16
    DATAGUARD在做SWITCHOVER切换时遇到问题总结
    UVA 1564
    Drupal 7 模块开发 建立模块帮助信息(hook_help)
    HTML5实现图片文件异步上传
    RGCDQ(线段树+数论)
  • 原文地址:https://www.cnblogs.com/nolaaaaa/p/9152954.html
Copyright © 2011-2022 走看看