什么是数据库

• 1.文件系统就是一种数据库
• 2.MySQL是一种常见的数据库

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

SRJ(Server Rendered JavaScript)服务器提供的JS

用script造get请求

<script>
  button.addEventListener('click', (e)=>{
    let script = document.createElement('script')
    script.src = '/pay'  //  请求路径是 /pay
    document.body.appendChild(script)
    script.onload = function(e){ // 状态码是 200~299 则表示成功
        e.currentTarget.remove()
    }
    script.onerror = function(e){ // 状态码大于等于 400 则表示失败
        e.currentTarget.remove()
    }
})
</script>

node js 后端代码

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

通过更改请求路径，向别的服务器发送请求

什么是JSONP

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

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

约定：

1. callbackName -> callback
2. yyy -> 随机数 frank12312312312321325()

<script>
  button.addEventListener('click', (e)=>{
    // JSONP js源代码(动态script)*********************************************
    let script = document.createElement('script')
    let functionName = 'frank'+ parseInt(Math.random()*10000000 ,10)
    window[functionName] = function(){  // 每次请求之前搞出一个随机的函数
        amount.innerText = amount.innerText  - 1
    }
    script.src = '/pay?callback=' + functionName
    document.body.appendChild(script)
    script.onload = function(e){ // 状态码是 200~299 则表示成功
        e.currentTarget.remove()
        delete window[functionName] // 请求完了就干掉这个随机函数
    }
    script.onerror = function(e){ // 状态码大于等于 400 则表示失败
        e.currentTarget.remove()
        delete window[functionName] // 请求完了就干掉这个随机函数
    }
  })
</script>

node js 后端代码

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()
}

JSONP的jquery版本

<script>
  button.addEventListener('click', (e)=>{
    //JSONP jQuery实现，应用更简单(动态script，其实和ajax一点关系没有)***************************************************************
    $.ajax({
      url: "http://jack.com:8002/pay",
      dataType: "jsonp",
      success: function( response ) {
        if(response === 'success'){
          amount.innerText = amount.innerText - 1
        }
      }
    })
    $.jsonp()
  })
</script>

面试题：JSONP为什么不支持POST请求？

1. 因为JSONP是通过动态创建script实现的；
2. 创建script只能发起GET请求