jQuery.getJSON跨域访问的正确使用方式（史上最傻瓜式解释）

最近花了2天时间完整的看了一遍 jQuery 的API，其中 $.getJSON(url[, data][, callback]) 方法的跨域访问解释真心看的一头雾水，大家可以从这里感受一下：

http://hemin.cn/jq/jQuery.getJSON.html

http://www.w3school.com.cn/jquery/ajax_getjson.asp

 

跨域访问原理解释

由于JSON使用一种叫同源策略的安全访问模式，无论使用jQuery.get()、jQuery.ajax()还是$.getJSON()等方法，直接访问其他网站接口（即跨域访问）的请求都会被浏览器进行默认拦截（实际上对普通页面的访问也会被拦截），但是<script>标签的资源访问请求则是允许跨域的，因此为了适应跨网站访问开放API接口数据的需求，诞生了利用<script>访问外网JSON数据接口的JSONP技术。

 

操作方式

假设需要访问的外网JSON数据接口URL为：http://wavky.com/api/helloWorld

取得的JSON数据格式为： 

{"physicalAddress":"广州市电信192.168.1.1","status":"OK!!!","timestamp":"A.D. 2014-12-23 21:58:51:921","yourIP":"192.168.1.1"}

 

按照JSONP技术要求进行改造（需要服务端配合）：

1、上面的访问URL改为： "http://wavky.com/api/helloWorld?jsoncallback=?"  （即增加一个自定义参数 jsoncallback ）

2、getJSON方法调用方式：  

$.getJSON("http://wavky.com/api/helloWorld?jsoncallback=?", function(jsonObject){ // 对返回的json的处理代码 }); 

    其中参数名 jsoncallback 可与服务端开发人员进行协商定义，参数值 ? 将由jQuery自动替换为后面定义的匿名function回调函数的内部名称

 

3、请求发出后，服务端接收到一个正常的JSON接口访问请求，包含一个参数 jsoncallback ，参数值为 callbackFunction233（假设值）

    利用参数值 callbackFunction233 对正常返回的JSON字符串进行二次包裹，格式如下（注意包含小括号）：

callbackFunction233(原json输出字符串)

如：

callbackFunction233({"physicalAddress":"广州市电信192.168.1.1","status":"OK!!!","timestamp":"A.D. 2014-12-23 21:58:51:921","yourIP":"192.168.1.1"})

 

4、前端页面中jQuery接收到上面的返回后，调用js解释器进行解析，执行callbackFunction233函数（即上面第2步调用 $.getJSON() 中第二个参数定义的function）并传入参数值{"physicalAddress":"广州市电信....."yourIP":"192.168.1.1"}，此后在function中通过变量 jsonObject 进行访问操作，由此完成JSON跨域访问