如何在JavaScript中运用JSONP实现前后台数据交互

：

以下代码片段展示了如何使用jsonp技术来异步从服务器取得数据并在前端进行一些处理。

```javascript

document.write("<"); var $mGiftPack = $('#mGiftPack'); $.ajax({ async: true, dataType: "jsonp", type: "GET", url: "//ka.18183.com/api/get-by-kuid.shtml?kuid="+_kuid, success: function (res) { var giftTotal = res.length; console.log(giftTotal); // 打印收到的数据长度（示例功能逻辑，可视需求修改或去除） if (giftTotal) { console.log(res[0].name); // 进行数据处理和页面的更新操作 } else { $mGiftPack.hide(); } }, error: function () {} }); };

```

### JSONP技术说明

#### 解释：

* 在客户端（如Web浏览器），脚本或浏览器请求JSON格式的原始数据通常会被同源的XMLHttpRequest协议的跨域策略所限制。为了绕过这个浏览器的同源策略，可以采用JavaScript Protocol的一种方式，称为JSONP（或者直接称之为Ping）。

* JSONP通过添加一个查询字符串到请求URL以提供一个"callback"（通常是浏览器端的自定义函数名），后端脚本解析此"callback"，之后在所有传递回给客户端（即Web页面的代码或标记中）数据的包装上附加上该回调，从而使得脚本可以正确触发并接收返回的数据。

#### JSONP如何工作：

1. 前段JS动态地建立一个`

```

2. 宏服务器端API检查URL中是否有callback的名字并在给数据上用回调名字调用它，即把JSON数据的周围包裹了客户端指定的回调引用函数的名字，构造成为以function + 空格 + 函数名()开始的字符串。

样式为：

```

(data).then(handlerName => {}).catch((err, handlerName) => {});

```

3. 客户端的提供的callback被触发并解析从服务器发送回的数据。

通过以上方式使得我们可以突破浏览器的同源策略限制，实现客户端与第三方API服务提供商之间的有效通信接口，并在页面中及时更新数据显示和执行后续的动作逻辑。