jsonp

JSONP使用动态创建script实现的，动态创建script只能使用GET不能使用POST。

用 form 可以发请求，但是会刷新页面或新开页面
用 a 可以发 get 请求，但是也会刷新页面或新开页面
用 img 可以发 get 请求，但是只能以图片的形式展示
用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
用 script 可以发 get 请求，但是只能以脚本的形式运行

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

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

一个用script标签更新页面信息的方法

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 path = request.url 
  var query = ''
  if(path.indexOf('?') >= 0){ query = path.substring(path.indexOf('?')) }
  var pathNoQuery = parsedUrl.pathname
  var queryObject = parsedUrl.query
  var method = request.method

  console.log('HTTP 路径为\n' + path)
  if(path == '/'){
      var string = fs.readFileSync('./index.html','utf8')
      var amount = fs.readFileSync('./db','utf8')
      string = string.replace('&&amount&&',amount)
    response.setHeader('Content-Type', 'text/html; charset=utf-8')
     response.write(string)
    response.end()
  }else if(path === '/pay'){
      var amount = fs.readFileSync('./db','utf8')
      var newAmount = amount - 1;
      fs.writeFileSync('./db',newAmount)
      response.setHeader('Content-Type', 'application/javascript')
      response.statuseCode = 200;
      response.write(`alert('success')
      amount.innerText = amount.innerText - 1
      `)
      response.end()
  }else{
    response.statusCode = 404
    response.write('找不到对应路径')
    response.end()
  }
})

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

前端页面

  
  


    
您的余额：&&amount&&
    
    
    

jsonp

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 path = request.url 
  var query = parsedUrl.query
  var pathNoQuery = parsedUrl.pathname
  var queryObject = parsedUrl.query
  var method = request.method



  console.log('HTTP 路径为\n' + path)
  if(path == '/style.css'){
    response.setHeader('Content-Type', 'text/css; charset=utf-8')
    response.write('body{background-color: #ddd;}h1{color: red;}')
    response.end()
  }else if(path == '/main.js'){
    response.setHeader('Content-Type', 'text/javascript; charset=utf-8')
    response.write('alert("这是JS执行的")')
    response.end()
  }else if(path == '/'){
      var string = fs.readFileSync('./index.html','utf8')
      var amount = fs.readFileSync('./db','utf8')
      string = string.replace('&&amount&&',amount)
    response.setHeader('Content-Type', 'text/html; charset=utf-8')
     response.write(string)
    response.end()
  }else if(pathNoQuery === '/pay'){
      var amount = fs.readFileSync('./db','utf8')
      var newAmount = amount - 1;
      fs.writeFileSync('./db',newAmount)
      response.setHeader('Content-Type', 'application/javascript')
      response.statuseCode = 200;
      response.write(`
      ${query.callback}.call(undefined,'success')
      `)
      response.end()
  }else{
    response.statusCode = 404
    response.write('找不到对应路径')
    response.end()
  }
})

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

前端页面

  
  


  
您的余额：&&amount&&
    
    
    

使用jquery jsonp

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