最近花了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数据格式为:

  1. {"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方法调用方式:

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

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

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

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

  1. callbackFunction233(原json输出字符串)
  2.  
  3. 如:
  4.  
  5. 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跨域访问的正确使用方式(史上最傻瓜式解释)的更多相关文章

  1. 关于JQuery Ajax 跨域 访问.net WebService

    关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...

  2. System.Web.Http.Cors配置跨域访问的两种方式

    System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心 ...

  3. Jquery Ajax跨域访问

    一.同源策略 二.跨域的集中方法: 1.服务器端发送请求,服务器作为中继代理(此方法不理解) 2.iframe 3.script标签 通过动过动态生成script标签,并将src指向目标源的方式(im ...

  4. jQuery实现跨域访问

    示例: $.ajax({ url: url, crossDomain: true, async: false,dataType:"jsonp" }); 说明:$.ajax()有很多 ...

  5. ajax实现跨域访问的两种方式

    一.使用jsonp实现跨域请求 在前端开发这中你会发现,所有带src属性的标签都可以跨域访问其他服务器文件.jsonp实现的原理也是如此. 以jsonp的数据类型进行请求时,JQ会动态在页面中添加sc ...

  6. 解决Entity Framework查询匿名对象后的跨域访问的一种方式

    在Entity Framework中,可以使用lambda表达式进行对数据的查询,而且可以将查询结果直接映射为对象或者对象列表,这极大的提高的开发速度,并且使数据层的数据更加方便处理和传递.但是很多时 ...

  7. 用 jQuery.getJSON() 跨域请求 JSON 数据

    $.getJSON()可以理解为特殊形式的$.ajax(),手册里的说明好复杂,这里只记录一下用到的跨域请求. 先说在同一域名下,js发送数据到php,php返回JSON数据: $.getJSON(' ...

  8. 【js跨域】js实现跨域访问的几种方式

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. WEX5中ajax跨域访问的几种方式

    1.使用jsonp方式 使用jsonp访问的话,前端需要把回调函数名传递给后端,后端执行完后也需要把回调函数传回给前端,默认情况下ajax自动生成一个回调函数名,后端可以通过String callba ...

随机推荐

  1. 集合--数据结构与算法JavaScript描述(9)

    集合 Set 概念 (跟高中时数学课上学的集合几乎一模一样哦哈哈) 集合是一种包含不同元素的数据结构. 集合中的元素称为成员. 集合的两个最重要的特性: 集合中的成员是无序的. 集合中不允许相同成员存 ...

  2. shell重温---基础篇(shell数组&数组操作)

    上篇博客已经分析重温了shell的运行方式以及其中的变量还有字符串,之后按照套路就是数组方面了,废话不多说,直接进入正题哈.(小白笔记,各位看官勿喷...)     bash shell呢,支持一位数 ...

  3. python2.7练习小例子(二十四)

        24):1.题目:利用递归方法求5!.     程序分析:递归公式:fn=fn_1*4! #!/usr/bin/python # -*- coding: UTF-8 -*- def fact( ...

  4. Ubuntu无法安装vim怎么办?(Ubuntu 出现apt-get: Package has no installation candidate问题)

    apt-get install vim 正在读取软件包列表... 完成 正在分析软件包的依赖关系树 正在读取状态信息... 完成 有一些软件包无法被安装.如果您用的是不稳定(unstable)发行版, ...

  5. 2844: albus就是要第一个出场

    2844: albus就是要第一个出场 链接 分析: 和HDU3949差不多互逆,这里需要加上相同的数. 结论:所有数任意异或,构成的数出现一样的次数,次数为$2^{n-cnt}$,cnt为线性基的大 ...

  6. Vue-router用法

    #全局守卫- router.beforeEach(to,from,next){} #全局后置钩子- router.afterEach(to,from){} #路由独享守卫- beforeEnter(t ...

  7. 【数据库】 SQLite 介绍

    [数据库] SQLite 介绍 一. 特点 : 小而精悍 1. 轻量级 : 占用资源低 2. 嵌入式 : 无需安装,直接引用就可用 3. 支持 SQL 语法, 大部分兼容 Sql Server 语法, ...

  8. 使用PSSH批量操作Linux服务器

    简介 服务器多了,有一个问题就是如何批量快速操作多台服务器,在网上搜到了PSSH工具,试用了一下发现挺好用,推荐给大家. pssh是一个python编写的可以在多台服务器上执行命令的轻量级管理工具,同 ...

  9. 虚拟现实-VR-UE4-编辑自定义Character-上下左右移动-旋转

    在上一片文章中,我创建了一个自定义的Character,但是只是有一行log显示,我使用了自己的Character,不能有任何操作,这里,我将记录我修改我的Character的过程 万事第一步,打开工 ...

  10. Assetbundle2

    Assetbundle可以将Prefab封装起来,这是多么方便啊! 而且我也强烈建议大家将Prefab封装成Assetbundle,因为Prefab可以将游戏对象身上带的游戏游戏组件.游戏脚本.材质都 ...