说到JSONP，你听过没?这个叫做JSONwithPadding，简单来说就是利用标签不看同源策略的漏洞，做个跨域请求数据的把戏。我们只需要给标签加个src属性，设为跨域的URL，就可以轻松拿到数据。虽然这种方法有点老套，但有时候还真挺实用的！
咱们先来科普下JSONP是咋回事儿。客户端只要发出JSONP请求，其实就是在标签里加载个远程的JavaScript文件。这个文件就是个函数调用，把你想要的数据当作参数传过去。然后，客户端也要定义个和远程文件里的函数名一样的函数。等文件加载完后，那个函数就会自动跑起来，帮你拿到数据！
jQuery中JSONP的实现方法
想要玩转jQuery搞JSONP跨域请求？那简单得很！只要用上那个神奇的$.getJSON工具，知道URL、参数和成功后该咋做就行了。不过别忘了，这个$.getJSON跟别的$.get有点儿不同，得在URL后面加上个参数callback=?，然后jQuery会帮你把?变成正确的函数名，让回调函数跑起来。
简单来说，就是我们在回调函数里面操作那从其他网站传来的JSON对象。服务器就把这些数据传给我们了。这么搞，就能毫不费劲地搞定跨站数据的获取和处理咯~
服务端的JSONP响应处理
想要搞定JSONP请求，首先得把数据变成JSON字符串，再给它套上”callback(json)”这层外衣。这个callback其实就是客户端传过来的函数名，我们只需要把数据当做参数传过去就行了。这样一来，当客户端加载这个JavaScript文件时，就能自动调用那个函数，享受我们提供的数据！
以下是用C#搞定的简单例子！只需将获取到的数据编成JSON字符串，然后加上”callback(json)”这个格式就OK了。接着，把这个格式好的字符串发给客户端，他们就能通过回调函数轻松拿到数据~
实战案例：跨域获取用户列表
假设我们的网站上有个叫demo.html的页面，它想要展示其他服务器（网址为3561/User/GetAllNames）里的用户列表。由于两个页面不在同一台主机上，所以要用到JSONP这个神奇的东西来实现跨站访问。
用jQuery的$.getJSON功能，咱们可以轻松地从客户端发出跨域请求。首先得确定要去哪里和怎样处理回传的数据。接着，在返回的JSON数据中进行操作，最后把结果展示出来就搞定！这样就能轻松获取到用户名单！
在服务器那头儿，我们得先把用户列表弄成JSON格式，然后包到”callback(json)”里去。这是啥意思？就是只要你的浏览器加载了这个JS代码，它就会自动跑个回调函数，轻轻松松就能拿到我们准备好的用户列表！
JSONP的安全性问题
JSONP确实挺好使，不过也可能有漏洞。简单来说，用它能轻松搞定跨域请求，但万一被有心人利用了怎么办？比如说，如果服务端没注意回调函数名，那他们的代码就可能被黑客攻击了！
搞定这事儿，我们就给服务器的回复函数带上个限制条件，只让它认咱们设定好的名字。再就是，咱们还能设置些安全防护，比如说在HTTP头部加个Content-Security-Policy（内容安全策略），这样就能保证标签只能去指定的地方找资源。
JSONP的局限性
nbsp;html>
你知道吗？JSONP虽然好用，能解决跨域问题，但是也有几个小瑕疵。首先，它只能用来做GET请求，不能用在POST上；再就是，只能处理JSON格式的数据；还有，要是加载的标签出错了，那就抓不到错误信息。
JSONP与其他跨域解决方案的比较
啊你们知道吗？处理跨站脚本问题，可不止JSONP一招喔！其实还有CORS这个好用的工具（可以让你在不同站点之间共享信息）以及WebSocket（一种基于TCP的通信技术，可以实现双向交流，最适合实时聊天这种场景了！）。相比之下，CORS更灵活，适用于各种HTTP请求，而且出错时也能轻松应对。而WebSocket，它可是实时聊天的利器！
挑跨域解决办法要看你的需求和实际情况。简单的数据获取用JSONP就行了；复杂的通信还是CORS或者WebSocket靠谱些！
public class UserController : Controller
{
public string GetAllNames(string callback)
{
string[] names = new string[] { "张三丰", "张无忌", "令狐冲", "杨过", "郭靖" };
JavaScriptSerializer jss = new JavaScriptSerializer();
string json = jss.Serialize(names);
return string.Format("{0}({1})", callback, json);
}
}
总结与展望
这篇文章给大家科普了一下jQuery+JSONP这个跨域神器。我们从零开始，告诉你怎么运行JSONP，怎么用它，以及使用时需要注意什么。希望看过之后，你们能用好JSONP，轻松解决跨域问题！
开发的时候，大家常用哪个跨域方式？为啥选它？快来评论区聊聊~觉得有帮助的话，记得点赞分享！
评论0