什么是数据库

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

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

局部刷新怎么做

1. 用 form 表单发起 post 请求（已弃用）
   但是 form 表单提交之后一定会刷新当前页面
   改进：加一个 iframe，在 iframe 中刷新改变的数据
2. 用 img 发起 get 请求

button.addEventListener('click', (e)=>{
    let image = document.createElement('img')
    image.src = '/pay'
    image.onload = function(){ // 状态码是 200~299 则表示成功
        alert('成功')
    }
    image.onerror = function(){ // 状态码大于等于 400 则表示失败
        alert('失败')
    }
})

3. 用 script 发起 get 请求

button.addEventListener('click', (e)=>{
    let script = document.createElement('script')
    script.src = '/pay'
    document.body.appendChild(script) // script 只有放在 body 中才能发请求
    script.onload = function(e){ // 状态码是 200~299 则表示成功
        e.currentTarget.remove() // 删除 script 标签
    }
    script.onerror = 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)  // 执行服务器中的 JavaScript 代码
    response.end()
}

这种技术叫做 SRJ(Server Rendered JavaScript)，服务器返回的 JavaScript，可以用来无刷新局部更新页面内容

4. JSONP 实现局部刷新

JSONP（跨域 SRJ ）

JSONP(JSON with Padding) 是 JSON 的一种"使用模式"，可以通过Server Rendered JavaScript 的方式从别的域名（网站）那获取资料，即跨域读取数据。

过程：

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

1. 请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy
2. 响应方根据查询参数callbackName，构造形如
     yyy.call(undefined, '你要的数据')
     yyy('你要的数据')
   这样的响应
3. 浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据') // success
4. 那么请求方就知道了他要的数据
   
   
   约定：
     callbackName -> callback
     yyy -> 函数名 + 随机数，如 frank12312312312321325()

代码：

button.addEventListener('click', (e)=>{
    let script = document.createElement('script')
    let functionName = 'frank'+ 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.onerror = 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') // String + Padding = StringP
    `)
    response.end()
}

jQuery 实现 JSONP

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

注意：AJAX 是指通过使用 XMLHttpRequest 对象进行异步数据交互的技术，JSONP是依靠 script 标签的 src 属性来获取的，不属于 AJAX


问：JSONP 为什么不支持 POST 请求？

答：因为 JSONP 是通过动态创建 script ，script 标签指向响应方（服务器）来实现的，而动态创建 script 时只能用 GET 请求，不能用 POST 请求