前端使用JSONP与服务器交互的过程

关键概念：浏览器、服务器、回调函数

1、浏览器跨域向服务器请求数据，并传回调函数名给服务器

2、服务器生成调用该回调函数的js代码，将数据作为回调函数的参数传入。将这段代码返回给客户端

3、浏览器执行服务器返回的js代码，即调用回调函数

综上：用jsonp跨域请求数据需要服务器支持

用代码表示如下：

// 1. 客户端定义接收数据的函数
// 这个函数在收到服务器响应后会被执行
function getUser(res) {
    console.log('got it!')
    console.log(res)
    // dosome things with res
}

// 2. 客户端建立script元素，设置src: url?callback=getUser
// <script src="url?callback=getUser">
// 设置完src属性后，客户端会立即发送请求

// 3. 服务器接受客户端请求，发送数据
function serverResponse() {
    // 获取url中callback的值
    let fn = 'getUser'
    let data = "{name: 'zhangsan'}"
    return `${fn}(${data})` // 'getUser({name: 'zhangsan'})'
}

// 4. 客户端收到响应，立即执行script脚本
// 客户端收到"getUser({name: 'zhangsan'})"的字符串
// 字符串会被浏览器解析并执行
eval(serverResponse())
//这个时候步骤一中的getUser()函数就被执行了，打印出{name: 'zhangsan'}