JSONP跨域数据请求方法详解 - 跨域访问接口的利器

JSONP\uFF08JSON with Padding\uFF09\u662F\u4E00\u79CD\u8DE8\u57DF\u6570\u636E\u8BF7\u6C42\u7684\u65B9\u6CD5\u3002\u5E38\u89C1\u60C5\u51B5\u4E0B\uFF0C\u6D4F\u89C8\u5668\u9650\u5236\u4E86\u8DE8\u57DF\u8BF7\u6C42\uFF0C\u4E0D\u5141\u8BB8\u4ECE\u4E00\u4E2A\u57DF\u540D\u4E0B\u7684\u9875\u9762\u5411\u53E6\u4E00\u4E2A\u57DF\u540D\u4E0B\u7684\u63A5\u53E3\u53D1\u9001\u8BF7\u6C42\u3002\u4F46\u662F\u901A\u8FC7\u4F7F\u7528JSONP\uFF0C\u53EF\u4EE5\u8FDB\u884C\u8FD9\u4E2A\u9650\u5236\u3002\n\nJSONP\u7684\u539F\u7406\u662F\u5229\u7528\u3Cscript\u3E\u6807\u7B7E\u53EF\u4EE5\u8DE8\u57DF\u5F15\u5165\u5916\u90E8\u811A\u672C\u7684\u7279\u6027\u3002\u5728\u8BF7\u6C42\u63A5\u53E3\u65F6\uFF0C\u5C06\u56DE\u8C03\u51FD\u6570\u540D\u79F0\u4F5C\u4E3A\u53C2\u6570\u4F20\u9001\u7ED9\u63A5\u53E3\uFF0C\u63A5\u53E3\u5728\u8FD4\u56DE\u6570\u636E\u65F6\uFF0C\u5C06\u6570\u636E\u4F5C\u4E3A\u53C2\u6570\u4F20\u9001\u7ED9\u56DE\u8C03\u51FD\u6570\uFF0C\u5E76\u5C06\u56DE\u8C03\u51FD\u6570\u7684\u8C03\u7528\u4EE3\u7801\u8FD4\u56DE\u7ED9\u9875\u9762\u3002\n\n\u5177\u4F53\u6B65\u9AA4\u5982\u4E0B\uFF1A\n\n1. \u5728\u9875\u9762\u4E2D\u5B9A\u4E49\u4E00\u4E2A\u5168\u5C40\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8BE5\u51FD\u6570\u7528\u4E8E\u5904\u7406\u63A5\u53E3\u8FD4\u56DE\u7684\u6570\u636E\u3002\n2. \u521B\u5EFA\u4E00\u4E2A\u3Cscript\u3E\u6807\u7B7E\uFF0C\u5C06\u63A5\u53E3\u7684URL\u4F5C\u4E3A\u5176src\u5C5E\u6027\u503C\uFF0C\u5E76\u5C06\u56DE\u8C03\u51FD\u6570\u540D\u79F0\u4F5C\u4E3A\u53C2\u6570\u4F20\u9001\u7ED9\u63A5\u53E3\u3002\n3. \u5C06\u8BE5\u3Cscript\u3E\u6807\u7B7E\u52A0\u5165\u5230\u9875\u9762\u4E2D\uFF0C\u6D4F\u89C8\u5668\u4F1A\u81EA\u52A8\u53D1\u9001\u8BF7\u6C42\u5E76\u6267\u884C\u8FD4\u56DE\u7684\u4EE3\u7801\u3002\n4. \u63A5\u53E3\u8FD4\u56DE\u6570\u636E\u65F6\uFF0C\u4F1A\u5C06\u6570\u636E\u4F5C\u4E3A\u53C2\u6570\u4F20\u9001\u7ED9\u56DE\u8C03\u51FD\u6570\uFF0C\u5E76\u5C06\u56DE\u8C03\u51FD\u6570\u7684\u8C03\u7528\u4EE3\u7801\u8FD4\u56DE\u7ED9\u9875\u9762\u3002\n5. \u5728\u56DE\u8C03\u51FD\u6570\u4E2D\u5904\u7406\u63A5\u53E3\u8FD4\u56DE\u7684\u6570\u636E\u3002\n\n\u793A\u4F8B\u4EE3\u7801\u5982\u4E0B\uFF1A\n\n```javascriptfunction handleData(data) { // \u5904\u7406\u63A5\u53E3\u8FD4\u56DE\u7684\u6570\u636E console.log(data);}

var script = document.createElement('script');script.src = 'http://example.com/api?callback=handleData';document.body.appendChild(script);\n\n\u5728\u4E0A\u8FF0\u4F8B\u5B50\u4E2D\uFF0ChandleData\u51FD\u6570\u662F\u9875\u9762\u4E2D\u5B9A\u4E49\u7684\u5168\u5C40\u56DE\u8C03\u51FD\u6570\uFF0Chttp://example.com/api\u662F\u63A5\u53E3\u7684URL\u3002\u63A5\u53E3\u8FD4\u56DE\u7684\u6570\u636E\u4F1A\u4F5C\u4E3AhandleData\u51FD\u6570\u7684\u53C2\u6570\u4F20\u9001\u8FDB\u6765\uFF0C\u7136\u540E\u53EF\u4EE5\u5728handleData\u51FD\u6570\u4E2D\u8FDB\u884C\u5904\u7406\u3002\n\n\u9700\u8981\u6CE8\u610F\u7684\u662F\uFF0C\u63A5\u53E3\u8FD4\u56DE\u7684\u6570\u636E\u5FC5\u987B\u4EE5\u56DE\u8C03\u51FD\u6570\u7684\u8C03\u7528\u4EE3\u7801\u5F62\u5F0F\u8FD4\u56DE\uFF0C\u4F8B\u5982\uFF1AhandleData({\'name\': \'John\', \'age\': 25})\u3002\u8FD9\u6837\uFF0C\u6D4F\u89C8\u5668\u5728\u63A5\u53D7\u5230\u8FD4\u56DE\u7684\u4EE3\u7801\u65F6\uFF0C\u4F1A\u76F4\u63A5\u6267\u884C\u8BE5\u4EE3\u7801\uFF0C\u5B9E\u73B0\u6570\u636E\u7684\u4F20\u9001\u548C\u5904\u7406\u3002\n\n\u9700\u8981\u6CE8\u610F\u7684\u662F\uFF0CJSONP\u5B58\u5728\u4E00\u4E9B\u5B89\u5168\u98CE\u9669\uFF0C\u56E0\u4E3A\u901A\u8FC7\u3Cscript\u3E\u6807\u7B7E\u5F15\u5165\u7684\u5916\u90E8\u811A\u672C\u53EF\u4EE5\u6267\u884C\u4EF7\u610F\u4EE3\u7801\u3002\u6240\u4EE5\uFF0C\u5982\u679C\u4F7F\u7528JSONP\u65F6\uFF0C\u8981\u4FDD\u8BC1\u63A5\u53E3\u7684\u5B89\u5168\u6027\uFF0C\u4EE5\u53CA\u5BF9\u63A5\u53E3\u8FD4\u56DE\u7684\u6570\u636E\u8FDB\u884C\u4E25\u683C\u7684\u9A8C\u8BC1\u548C\u5904\u7406\uFF0C\u9632\u6B62\u6076\u610F\u4EE3\u7801\u7684\u635F\u5165\u3002