本文解析jQuery在跨域请求JSON时出现invalid label错误的原因,指出这是由于服务器直接返回纯JSON而非JSONP格式所致。通过启用JSONP类型或修改服务器端输出,将回调函数名包裹JSON数据,可有效解决该问题。
jQuery跨域JSONP原理与错误分析
最终,静心研读 JSON 官方文档后注意到如下内容:
JSON 数据是一种便于 JavaScript 解析的结构化数据格式。当获取的数据文件位于远程服务器(即跨域)时,需采用 jsonp 类型。该类型会生成查询字符串参数 callback=? 并附加至请求 URL 末尾。服务器端需在 JSON 数据前添加回调函数名以构成有效的 JSONP 请求。若需指定不同于默认 callback 的参数名,可通过配置 $.ajax() 的 jsonp 参数实现。
jQuery 跨域机制实为通过外链 <script> 标签实现,并借助回调函数及其参数完成真正的跨域操作。
jQuery 每次跨域请求均携带 callback 参数,其值为回调函数名。因此,服务器端发送 JSON 数据时,需将该参数置于数据前,该值通常为随机生成,例如 jsonp1294734708682。此外,亦可通过 $.ajax 方法自定义 callback 参数名。理解此原理后,服务器端应如下发送数据:
string message = "jsonp1294734708682({\"userid\":0,\"username\":\"null\"})";
如此,JSON 数据 {\"userid\":0,\"username\":\"null\"} 便作为 jsonp1294734708682 回调函数的参数。
跨域获取 JSON 时 invalid label 错误的解决方法:
服务器端输出 JSON 数据时,需在前方附加 callback 参数的值,例如:jsonp1294734708682({\"userid\":0,\"username\":\"null\"})