骨刻文字数字化识别10

---

一、前后端交互

有很多种方式可以发送HTTP请求，如下：

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

JSONP

JSONP即“JSON Padding”，当两个网站（如x.com访问y.com，不同域）之间需要访问，可以通过script作为交互方式，具体过程为：

请求方（x.com前端）定义一个发送请求成功/失败后执行的函数f（回调函数，即使用方提供函数给对方调用）；
请求方动态创建script（添加到body），其src指向响应方url（y.com后端），同时将回调函数名作为参数传递，即http://y.com?callback=f；
响应方接收请求，根据查询参数f和返回的数据、构造调用这个函数的JavaScript代码字符串，形如f.call(undefined, data)或f(data)作为响应结果返回给请求方；
请求方浏览器接收响应（一段JS代码），被添加到body就会执行f.call(undefined, data)，从而获得需要的数据data。

二、JSONP

JSONP即“JSON Padding”，当两个网站（如x.com访问y.com，不同域）之间需要访问，可以通过script作为交互方式，具体过程为：

请求方（x.com前端）定义一个发送请求成功/失败后执行的函数f（回调函数，即使用方提供函数给对方调用）；
请求方动态创建script（添加到body），其src指向响应方url（y.com后端），同时将回调函数名作为参数传递，即http://y.com?callback=f；
响应方接收请求，根据查询参数f和返回的数据、构造调用这个函数的JavaScript代码字符串，形如f.call(undefined, data)或f(data)作为响应结果返回给请求方；
请求方浏览器接收响应（一段JS代码），被添加到body就会执行f.call(undefined, data)，从而获得需要的数据data。

<script>
    button.addEventListener(
        'click', (e) => {
            let functionName = 'x' + parseInt(Math.random() * 10000, 10)    
            window[functionName] = function(result) {
                if (result === 'success') {
                    // ...
                }
            }
            let script = document.createElement('script')
            script.src = 'http://y.com/?callback=' + functionName     // 发送请求获取script
            document.body.appendChild(script)   
            script.onload = function(e) {
                e.currentTarget.remove()
                delete window[functionName]
            }
            script.onerror = function(e) {
                e.currentTarget.remove()
                delete window[functionName]
            }
        }
    )
</script>

---