在自己的电脑上实现一个JSONP

2017-12-31 本文已影响0人没头脑很不高兴

数据库是什么

相当于是一个文件系统。可以长久地存储数据，就叫做数据库
在这里，用一个文件代表数据库，取名为db（没有后缀），在文件内输入 100 ，保存退出。我们现在要实现一个跨域打钱的功能

JSONP是什么

JSON是一种互联网通用的数据传输格式，P即padding，是包住JSON两边的一部分字符。JSONP可理解为跨域的请求。因为一般来说，在本域名下，是不能访问到其他域名下的资源的，JSONP是民间程序员发明的、用来请求其他域名下资源的工具。

在自己的电脑上如何跨域请求自己的资源？

安装一个http-server
因为一般在本地打开一个页面调试的时候，一般都是适应的file资源，但是，有的类型的资源必须是通过http网络协议才能访问的，可以在电脑上安装一个http-server
安装方法
npm install http-server -g
安装完之后，进入目标文件夹，在命令行输入
http-server -c-1
就可以开启一个本地的服务器
image.png

这两个IP地址看起来很眼熟，第一个是经常用来配置路由器的IP，第二个是电脑自己访问自己的时候的IP，因为前一个IP是路由器产生的，所以，在同一局域网的手机也可以连接这个这个IP进行调试。

http-server这一部分可以不看，因为只是稍微提一下，我们完全可以自己用node配置一个本地的服务器，实现更多的功能

接下来修改一下Hosts文件：
这样可以让自己的电脑在访问一个域名的时候提供一个电脑伪装的ip

如果是Windows系统，进入C:\Windows\System32\drivers\etc，打开hosts文件，在文件里面添加像下图一样的最后两行

image.png

随便叫什么 xxx.com什么的域名都可以，后面需要用，保存退出。

用node写一个server

第一步，写一个index.html文件，把 js 代码也写在这里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jsonp</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h5>您的账户余额是</h5><span id="amount">&&&amount&&&</span>
    <button id="btn">-1s</button>
    <script>
        btn.addEventListener('click', (e)=>{
            let script = document.createElement('script')
            let functionName = 'frank'+ parseInt(Math.random()*10000000 ,10)  // 生成一个随机的函数名
            window[functionName] = function(result){ 
                if (result==='success'){
                    amount.innerText = amount.innerText - 0 - 1  // 避免刷新页面，前端和后台做同样的操作
                }else{
                    console.log('zhelicuol')
                }
                
            }
            // 这里在frank.com:8001下，请求 jack.com:8002的资源
            script.src = 'http://jack.com:8002/pay?callbackName=' + functionName
            document.body.appendChild(script)
            script.onload = function(e){
                console.log('onload')
                e.currentTarget.remove()
                delete window[functionName]  // 无论是否请求成功，都删掉发送过请求的script标签和函数名
            }
            script.error = function(e){
                e.currentTarget.remove()
                delete window[functionName] 
            }
        })
    
    </script>
</body>
</html>

我们把发送JSONP的代码也写在这里，就是通过点击按钮之后，就发送一个请求

第二步，写一个style.css的文件

button{
    background: red;
}

虽然这里给定了button的样式，但是后端并没有前端返回这个文件

第三部，自己用node.js配置后台的文件

因为我们是前端，不需要对这个有过多的了解，只需要明白中间的路由配置方法就可以了，其他部分在需要的时候都可以复制直接用
代码如下

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

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

  if (path === '/') {
    var string = fs.readFileSync('./index.html', 'utf-8')
    var amount = fs.readFileSync('./db', 'utf-8')
    string = string.replace('&&&amount&&&', amount)
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(string)
    response.end()
  } else if(path == '/style.css'){
    response.setHeader('Content-Type','text/css;charset=utf-8')
    response.write('body{color:green;}')  // 后台自己写的css
    response.end()
  }else if (path === '/pay') {
    var amount = fs.readFileSync('./db', 'utf-8')
    var newAmount = amount - 1
    fs.writeFile('./db',newAmount,function err(error) {
      console.log(error)
    })
    response.setHeader('Content-Type','text/javacript;charset=utf-8')
    response.write(`
      ${query.callbackName}.call(undefined,'success')
    `)
    response.end()
  } else {
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write('404了')
    response.end()
  }

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

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

中间需要看的部分是路由的设置，可以看到，如果用户请求了 /style.css这个路径，后台并没有返回style.css这个文件，而是自己做了一个假的信息响应给浏览器。

image.png

这个时候，文件夹里面有这些文件（README.md是github加的文件，不用管）

使用JSONP

使用命令行，进入这个目录
输入 node index.js 8001
另外再打开一个gitbash（或者其他命令行工具），在这个目录下输入 node index.js 8002
使用浏览器访问 frank.com:8001 ，点击按钮，就可以让fran.com的域名给jack.com的域名发送。并且接收请求了

JSONP的原理

JSONP不是官方提供的跨域的方法，而是古代的前端程序员为了实现跨域利用script标签自创的一个方法

它的本质上和页面引入一个 CDN 的jQuery是一样的

如果在页面中写
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js></script>"
浏览器就会下载 https://cdn.bootcss.com/jquery/3.3.1/jquery.js 这个url里面的JS代码，并且将其展示到 html 文件中
这段代码可以是立即执行的，并且它可以完成一些功能