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跨域访问
jQuery.getJSON跨域访问的正确使用方式(史上最傻瓜式解释)的更多相关文章
- 关于JQuery Ajax 跨域 访问.net WebService
关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...
- System.Web.Http.Cors配置跨域访问的两种方式
System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心 ...
- Jquery Ajax跨域访问
一.同源策略 二.跨域的集中方法: 1.服务器端发送请求,服务器作为中继代理(此方法不理解) 2.iframe 3.script标签 通过动过动态生成script标签,并将src指向目标源的方式(im ...
- jQuery实现跨域访问
示例: $.ajax({ url: url, crossDomain: true, async: false,dataType:"jsonp" }); 说明:$.ajax()有很多 ...
- ajax实现跨域访问的两种方式
一.使用jsonp实现跨域请求 在前端开发这中你会发现,所有带src属性的标签都可以跨域访问其他服务器文件.jsonp实现的原理也是如此. 以jsonp的数据类型进行请求时,JQ会动态在页面中添加sc ...
- 解决Entity Framework查询匿名对象后的跨域访问的一种方式
在Entity Framework中,可以使用lambda表达式进行对数据的查询,而且可以将查询结果直接映射为对象或者对象列表,这极大的提高的开发速度,并且使数据层的数据更加方便处理和传递.但是很多时 ...
- 用 jQuery.getJSON() 跨域请求 JSON 数据
$.getJSON()可以理解为特殊形式的$.ajax(),手册里的说明好复杂,这里只记录一下用到的跨域请求. 先说在同一域名下,js发送数据到php,php返回JSON数据: $.getJSON(' ...
- 【js跨域】js实现跨域访问的几种方式
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- WEX5中ajax跨域访问的几种方式
1.使用jsonp方式 使用jsonp访问的话,前端需要把回调函数名传递给后端,后端执行完后也需要把回调函数传回给前端,默认情况下ajax自动生成一个回调函数名,后端可以通过String callba ...
随机推荐
- 002---time & datetime
time & datetime 时间模块 分类 时间戳 时间字符串 时间元祖 定义 UTC:格林威治时间,世界标准时间,中国(UTC + 8) 时间戳:1970-01-01 0:0:0 开始按 ...
- ABS(引数と同じ大きさの正の数を返す)
ABS 関数 [数値] 数値式の絶対値を返します. 構文 ABS( numeric-expression ) パラメータ numeric-expression 絶対値が返される数値. 戻り値 数値 ...
- shell重温---基础篇(连接数据库)
前几天分享了shell字符串操作,数组操作等,接下来回归到项目,进行数据库操作.按照一般情况来说,shell连接数据库基本上都是DB使用的,因为需要运行大量的sql啊什么的,所以都会封装到shell中 ...
- 带你认识Xmanager
XManager是一款小巧.便捷的浏览远端X窗口系统的工具.在工作中经常使用Xmanager来登录远端的Solaris系统,在X窗口系统上作图形化的操作.但是,Xmanager默认并不提供对于中文的支 ...
- 仿造vue-resource的formdata传对象
众插件不支持同步,也是没办法的事情,具体为啥就不分析了,确实搞不懂. 一直用vue-resource的post,觉得很舒服. 然,没办法只能仿造一个,自己提供一个同步方法 几个点先摆清楚 1. .th ...
- Java技术——I/O知识学习
个字节,主要用在处理二进制数据,字节用来与文件打交道,所有文件的储存都是通过字节(byte)的方式,在磁盘上保留的并不是文件的字符而是先把字符编码成字节,再储存这些字节到磁盘.在读取文件(特别是文本文 ...
- 关于C++类模板无法解析的问题
自己写了一个C++模板类,可是在vs2012中死活显示无法解析它的成员函数. 开始怎么也想不通,因为我是按照普通方式布置的:头文件放声明,在同名源文件中放实现,并包含其头文件. 后来百度了一下才发现, ...
- 20160120使用myeclipse一年开始转IntelliJ IDEA 15做以下总结
20160120使用myeclipse一年开始费元星转IntelliJ IDEA 15做以下总结 1.输入psv就会看到一个psvm的提示,此时点击tab键一个main方法就写好了.psvm 也就是p ...
- Django笔记 —— 模型高级进阶
最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...
- Loadrunner11.0安装与简单使用
公司开发了APP或者微信小程序啊什么的,都会先进行性能测试,而性能测试一般肯定会来测试接口的压测,并发.Loadrunner是一个很强大的测试工具,它是一种预测系统行为和性能的负载测试工具.通过以模拟 ...