写一个JSONP

首先让我们来先写一个server

var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]

if(!port){
  console.log('请指定端口号好不啦？\nnode server.js 8888 这样不会吗？')
  process.exit(1)
}

var server = http.createServer(function(request, response){
  var parsedUrl = url.parse(request.url, true)
  var pathWithQuery = request.url 
  var queryString = ''
  if(pathWithQuery.indexOf('?') >= 0){ queryString = pathWithQuery.substring(pathWithQuery.indexOf('?')) }
  var path = parsedUrl.pathname
  var query = parsedUrl.query
  var method = request.method

  /******** 从这里开始看，上面不要看 ************/

  console.log('包含查询字符串的路径\n' + pathWithQuery)

  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 === '/style.css'){
    var string = fs.readFileSync('./style.css','utf8')
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(string)
    response.end()
  }else if(path === '/main.js'){
      var string = fs.readFileSync('./main.js','utf8')
      response.setHeader('Content-Type','application/javascript')
      response.write(string)
      response.end()
  }else{
      response.statusCode = 404
      response.setHeader('Content-Type','text/html;charset=utf-8')
      response.write('找不到对应的路径，需要先自行修改')
      response.end()
  }

  /******** 代码结束，下面不要看 ************/
})

server.listen(port)
console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)

html代码

    <p>您的余额是<span id="amount">&&amount&&</span></p>
    <button id='click'>Click</button>
    <script src="./main.js"></script>

main.js代码

click.addEventListener('click',function(e){
    amount.innerText = amount.innerText - 1
})

返回html会同时返回里面内联的main.js文件和style.css


ASYUJJ.png

当我们点击一下余额数字就会减一，但是如果刷新页面，数字就会重新回到100，所以我需要一个数据库来存放余额


ASYhQI.png

我们给余额添加一个数据库，首先新建一个bd文件，然后把100写进去，然后修改server.js 
 if(path === '/'){
    var string = fs.readFileSync('./index.html','utf8')
    var amount = fs.readFileSync('./bd','utf-8') //读取bd文件里面的amount值
    string = string.replace('&&amount&&',amount) //用amount来替换html里面的&&amount&&
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(string)
    response.end()
  }

<p>您的余额是<span id="amount">&&amount&&</span></p>

接着我们要告诉服务器，每当我点一下button你都去拿bd里的数字，那么我们就要发一个post请求了，那我们用form来发一个请求吧

  <form action="/pay" method="post">
        <input type="submit" value="付款">
    </form>

然后server处理这个请求

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

form表单提交，每次点击后success和fail刷新后显示，想要看到余额变化需要返回再刷新，于是我们可以添加一个iframe来承载success和fail，让他在iframe里面刷新，而不是当前页面

   <form action="/pay" method="post" target="result">
        <input type="submit" value="付款">
    </form>
    <iframe src="about:blank" name="result" frameborder="0"></iframe>
ASwkss.png

但是这样体验还是很差，用户仍需要刷新才能看到余额变化，而且还要加一个iframe，那么能不能不用iframe，发请求除了用form还能用什么呢？css的link,a标签，img标签和script标签都可以发请求。
先尝试动态创建一个图片来发请求。
main.js 代码

click.addEventListener('click',function(e){
   let image = document.createElement('img')
   image.src = '/pay'
})

这种方法没用办法去post,一定会去get.而且我们还不知道他成功没成功，我们可以通过image.onload()和image.onerror()方法，并且在方法内部判断返回的状态码来确定成功和失败
main.js代码

click.addEventListener('click',function(e){
   let image = document.createElement('img')
   image.src = '/pay'
   image.onload = function(){
     alert('打钱成功')
     amount.innerText = amount.innerText - 1
   }
   image.onerror = function(){
     alert('打钱失败')
   }
})

server代码

else if (path === "/pay") {
        var amount = fs.readFileSync('./bd', 'utf-8')
        var newAmount = amount - 1
        if (Math.random() > 0.5) {
            fs.writeFileSync('./bd', newAmount)
            response.setHeader('Content-Type','image/jpg')
            response.statusCode =200
            response.write(fs.readFileSync('./dog.jpg'))
            
        } else {
            response.statusCode =400
            response.write('fail')
            
        }
        response.end()
    }

现在实现了无刷新的更新，但是没有办法post。我们再来尝试一下script发请求
main.js代码

click.addEventListener('click',function(e){
  let script = document.createElement('script')
  script.src = '/pay'
  document.body.appendChild(script)
  script.onload = function(){
      alert('success')
  }
  script.onerror = function(){
      alert('fail')
  }
})

server代码

else if (path === "/pay") {
        var amount = fs.readFileSync('./bd', 'utf-8')
        var newAmount = amount - 1
        fs.writeFileSync('./bd', newAmount)
        response.setHeader('Content-Type', 'application/javascript')
        response.statusCode = 200
        response.write('alert("我是pay")')
        response.end()
    }

但是每次都会在html里面创建一个会执行的script


ASBHRU.png

我们可以把onload()的内容写到server里面

response.write(`
        alert("success")
        window.location.reload()
        `)

这样服务器返回了一个在浏览器里执行的代码，但是刷新体验不好，那么我们可以在服务器上改amount

   response.write(`
        alert("success")
        amount.innerText = amount.innerText - 1
        `)

每次打钱都会新建一个script，我们当然要删掉他们

script.onload = function(e){
    e.currentTarget.remove()
  }
  script.onerror = function(e){
      alert('fail')
      e.currentTarget.remove()
  }

这里有一个重要的概念，就是script的src可以请求不同的域名，我们做两个网站，让他们彼此交流 frank.com:8001和jack.com:8002

click.addEventListener('click',function(e){
  let script = document.createElement('script')
  script.src = 'http://jack.com:8002/pay'
  document.body.appendChild(script)
  script.onload = function(e){
    e.currentTarget.remove()
  }
  script.onerror = function(e){
      alert('fail')
      e.currentTarget.remove()
  }
})
ASs6G6.png

jack.com操作它的数据库打钱


ASy9J0.png

但是这里有一个问题，就是jack.com的程序员需要对frank.com的页面细节了解的很彻底，有很大的耦合性

else if (path === "/pay") {
        var amount = fs.readFileSync('./bd', 'utf-8')
        var newAmount = amount - 1
        fs.writeFileSync('./bd', newAmount)
        response.setHeader('Content-Type', 'application/javascript')
        response.statusCode = 200
        response.write(`
        ${query.callbackName}.call(undefined,'success')
        `)
        response.end()
    }

window.yyy = function(result){
    alert(`我得到的结果是${result}`)
}
click.addEventListener('click',function(e){
  let script = document.createElement('script')
  script.src = 'http://jack.com:8002/pay?callbackName=yyy'
  document.body.appendChild(script)
  script.onload = function(e){
    e.currentTarget.remove()
  }
  script.onerror = function(e){
      alert('fail')
      e.currentTarget.remove()
  }
})
AS6sgK.png

我们把回调函数的名字写在callbackName里面,服务器通过query.callbackName.call()来调用前端写好的函数，如果把'success'换成JSON那么就是JSONP了！

 response.write(`
          ${query.callbackName}.call(undefined,{
            "success":true,
            "left":${newAmount} 
          })
        `)     // JSON + Padding 叫做JSONP

xxx一般用一个随机数代替

 let script = document.createElement('script')
  let functionName = 'frank'+parseInt(Math.random()*1000000,10)
  window[functionName] = function(result){
    if(result === 'success'){
        amount.innerText = amount.innerText - 1
    }else{

    }
  }

当我调用完这个函数后，就删除这个函数

 script.onload = function(e){
    e.currentTarget.remove()
    delete window[functionName]
  }
  script.onerror = function(e){
      alert('fail')
      e.currentTarget.remove()
      delete window[functionName]
  }

其实jQuery已经封装好了


click.addEventListener("click", function(e) {

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

问：JSONP为什么不支持POST?
答：因为JSONP是通过动态创建script来实现的，动态创建script的时候只能用get没有办法用post

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,560评论 4赞 361
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,104评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,297评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,869评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,275评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,563评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,833评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,543评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,245评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,359评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,006评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2赞 273
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2赞 268

推荐阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,102评论 1赞 45
  • JSONP的历史方案和实现原理
    1. JSONP的实现原理 JSONP是通过动态创建script实现的。请求方：frank.com 的前端程序员（...
    王童孟阅读 447评论 0赞 2
  • 详解跨域
    什么是跨域 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实...
    Yaoxue9阅读 1,224评论 0赞 6
  • 详解跨域
    什么是跨域 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实...
    他方l阅读 1,041评论 0赞 2
  • JSONP技术栈
    简单的前后端交互 前面学习了这么多，都是在和页面打交道，不管是HTML、CSS、JavaScript，DOM，都没...
    astak3阅读 266评论 0赞 0