JSONP（JSON with Padding）是JavaScript对象 notation的Padding形式，它是解决浏览器同源策略限制，实现AJAX跨域请求的一种方法。同源策略是浏览器为了安全而实施的一种机制，它规定了只有相同协议、域名和端口的网页才能互相访问其资源。然而，JSONP巧妙地绕过了这一限制。
在JSONP的工作模式中，客户端（通常是JavaScript）向服务器发送请求时，会在URL中附加一个callback参数，这个参数的值是客户端预先定义好的函数名。服务器接收到请求后，不再返回纯JSON数据，而是返回一个包裹在函数调用中的JSON数据，即`callback({json数据})`。当这个包裹着JSON数据的JavaScript脚本被浏览器执行时，JSON数据会被自动传递给客户端预先定义的函数，从而实现了跨域数据交互。
例如，在PHP环境下，服务器端（b.php）可以根据接收到的callback参数动态生成响应内容：
```php
<?php
$callback = !empty($_GET['callback']) ? trim($_GET['callback']) : '';
if (!empty($callback)) {
$data = json_encode(['uid' => 1, 'name' => '测试']);
echo "{$callback}({$data});";
}
?>
```
客户端（a.com）则可以通过以下方式发起JSONP请求：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function handleData(data) {
alert("uid :" + data.uid + " name :" + data.name);
}
</script>
<script type="text/javascript" src="http://www.b.com/b.php?callback=handleData"></script>
</body>
</html>
```
在这个例子中，`handleData`是客户端定义的函数，服务器端根据`callback`参数生成`handleData({"uid":1,"name":"测试"})`这样的响应，浏览器执行这个脚本时，就会调用`handleData`并将JSON数据作为参数传递。
jQuery库也内置了对JSONP的支持，使用`$.ajax`或`$.getJSON`时，只需设置`dataType: 'jsonp'`即可。例如：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://www.b.com/jquery.js"></script>
</head>
<body>
<div class="info"></div>
<script>
$.ajax({
url: 'http://www.b.com/b.php',
dataType: 'jsonp',
success: function(data) {
$('.info').html('uid : ' + data.uid + ', name : ' + data.name);
},
error: function() {
alert('请求失败');
}
});
</script>
</body>
</html>
```
在这个jQuery示例中，jQuery会自动处理callback参数的生成和JSON数据的回调，简化了开发过程。
需要注意的是，JSONP的安全性和灵活性相对较弱。由于所有控制权都交给了客户端指定的函数，服务器无法验证请求的合法性，容易受到XSS攻击。此外，JSONP只能实现GET请求，不能处理POST等其他HTTP方法，也不支持HTTP头，如Cookie和自定义头信息。
JSONP是一种在特定场景下解决跨域问题的有效手段，尤其是在只支持GET请求且对安全性要求不高的情况下。随着现代浏览器对CORS（跨源资源共享）的支持，JSONP逐渐被更安全、更灵活的CORS所替代。但鉴于老版本浏览器的兼容性需求，JSONP仍然是许多开发者在进行跨域通信时的重要选择。
