推荐答案
-- -------------------- ---- ------- -------- ---------- --------- - -- ------------ ----- ------------ - --------------------------------------------------------- -- ------------- -------------------- - -------------- - -- --------- --------------- -- ------------ ------ --------------------- -- ---------- ---------------------------------- -- -- ---------- ----- ------ - --------------------------------- ---------- - ---------------------------------- ---------------------------------- -
本题详细解读
1. 什么是JSONP?
JSONP(JSON with Padding)是一种跨域数据请求的技术。由于浏览器的同源策略,普通的AJAX请求不能跨域访问数据。JSONP通过动态创建<script>
标签来绕过这一限制,因为<script>
标签的src
属性不受同源策略的限制。
2. 实现原理
- 动态创建
<script>
标签:通过JavaScript动态创建一个<script>
标签,并将其src
属性设置为目标URL。这个URL通常包含一个回调函数名作为查询参数。 - 回调函数:服务器端接收到请求后,会将数据包裹在回调函数中返回。例如,如果回调函数名为
callbackName
,服务器会返回类似callbackName(data)
的响应。 - 全局回调函数:在客户端,我们需要在全局对象(通常是
window
)上定义一个与回调函数名相同的函数。当<script>
标签加载并执行时,这个全局函数会被调用,从而处理返回的数据。
3. 代码解析
- 唯一回调函数名:为了避免全局命名冲突,我们使用
Math.random()
生成一个唯一的回调函数名。 - 挂载回调函数:将回调函数挂载到
window
对象上,以便在<script>
标签加载时能够调用。 - 清理工作:在回调函数执行完毕后,删除全局对象上的回调函数,并移除
<script>
标签,以避免内存泄漏。
4. 使用示例
jsonp('https://example.com/api/data', function(data) { console.log('Received data:', data); });
在这个示例中,jsonp
函数会向https://example.com/api/data
发送一个JSONP请求,并在数据返回时调用传入的回调函数。