JS 基础 - JSONP

frontEnd

先看：《阮一峰：浏览器同源政策及其规避方法》

注意：请首先更新你的 nodejs-test 代码，否则会报错

最新 nodejs-test 代码

Windows 用户注意

Windows 没有 /etc/hosts 文件，请按照如下方法修改 hosts：

Windows系统hosts文件修改方法

数据库是什么

  1. 文件系统是一种数据库

  2. MySQL 是一种数据库

只要能长久地存数据，就是数据库

用数据库做加法

server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
  
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('有个傻子发请求过来啦！路径（带查询参数）为：' + pathWithQuery)

  if(path === '/'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(`二哈`)
    response.end()
  } else if(path === '/x'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/css;charset=utf-8')
    response.write(`body{color: red;}`)
    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)

启动应用

1
node server.js 8888

或者

1
node server 8888

添加路由

  1. 编辑 server.js 文件，添加 if else
  2. 重新运行 node server.js 8888

后台启动

touch log node server.js 8888 >log log 2>&1 &

局部刷新怎么做

有没有想过，不返回 HTML，返回 JS

方案一：用图片造 get 请求

1
2
3
4
5
6
7
8
9
10
button.addEventListener('click', (e)=>{
  let image = document.createElement('img')
  image.src = '/pay'
  image.onload = function(){ // 状态码是 200~299 则表示成功
    alert('成功')
  }
  image.onload = function(){ // 状态码大于等于 400 则表示失败
    alert('失败')
  }
})

方案二：用 script 造 get 请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
button.addEventListener('click', (e)=>{
  let script = document.createElement('script')
  script.src = '/pay'
  document.body.appendChild(script)
  script.onload = function(e){ // 状态码是 200~299 则表示成功
    e.currentTarget.remove()
  }
  script.onload = 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')
  response.write('amount.innerText = ' + amount)
  response.end()
}

...

这种技术叫做 SRJ - Server Rendered JavaScript

域名刷新无所谓

跨域 SRJ

确定函数名

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

  1. 请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy

  2. 响应方根据查询参数callbackName，构造形如

    i. yyy.call(undefined, ‘你要的数据’)

    ii. yyy(‘你要的数据’)
    这样的响应

  3. 浏览器接收到响应，就会执行 yyy.call(undefined, ‘你要的数据’)

  4. 那么请求方就知道了他要的数据

这就是 JSONP

方案3：JSONP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
button.addEventListener('click', (e)=>{
  let script = document.createElement('script')
  let functionName = 'req'+ 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()
}

...

约定

  1. callbackName -> callback

  2. yyy -> 随机数 frank12312312312321325()

JQuery 中怎么用 JSONP

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
	url: "http://jack.com:8002/pay",
	dataType: "jsonp",
	success: function( response ) {
 		if(response === 'success'){
			amount.innerText = amount.innerText - 1
  	}
 	}
})


$.jsonp()

这个方法和 ajax 一点关系都没有。

什么是 JSONP？

JSONP(JSON with Padding)是JSON的一种”使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的然后将url指向要请求的地址，script是没有同源策略的，用这种办法自然只能是get了。

用代码实现 frank.com:8001 和 jack.com:8002 之间的 JSONP 请求

编辑