JQuery1.2后getJSON方法支持跨域读取json数据，原理是利用一个叫做jsonp的概念。当然，究其本质还是通过script标签动态加载js，似乎这是实现真正跨域的唯一方法。

getJSON的用法JQuery手册已经写得很详细，参考手册就可以了，很简单。需要指出的一点是getJSON利用的jsonp需要客户端与服务端作出配合。

  1. 客户端传递的URL里要包含callback变量，以形如callback=?的形式结尾。（jquery会随机生成一个字符串替换？传递给服务端）
  2. 服务端获取客户端传递的callback的值callbackValue，和需要传递的json字符串构成 callbackValue.’(’.json.’)'传回给客户端（示例为php字符串连接方式，其他语言类似）

不出意外的话应该已经可以跨域读取了。

同时输出json数据时候{之前的是(

Ajax的应用中，由于安全的问题，浏览器默认是不支持跨域调用的。传统解决的方法，包括：（参考http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/）

Local proxy:
Needs infrastructure (can't run a serverless client) and you get double-taxed on bandwidth and latency (remote - proxy - client).
Flash:
Remote host needs to deploy a crossdomain.xml file, Flash is relatively proprietary and opaque to use, requires learning a one-off moving target programming langage.
Script tag:
Difficult to know when the content is available, no standard methodology, can be considered a "security risk".

以上方法都各有缺陷，都不是很好多解决方案。后来出现了一种叫JSON with Padding 的技术，简称 JSONP .（原理参考http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/），应 用JSONP可以实现JSON数据的跨域调用。非常的幸运，JQuery1.2以后支持JSONP的应用。下面侧重说明在JQuery中，Json的跨域调用。

应用JSONP实现Json数据跨域调用，需要服务器端与客户端的合作完成。引用Jquery官方的例子，客户端掉用如下：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
          });
        });

注意这里调用的地址中jsoncallback=?是关键的所在！其中，符号会被Query自动替换成其他的回调方法的名称，具体过程和原理我们这里不理 会。我们关心的是jsoncallback=?起什么作用了？原来jsoncallback=?被替换后，会把方法名称传给服务器。我们在服务器端要做什 么工作呢？服务器要接受参数jsoncallback，然后把jsoncallback的值作为JSON数据方法名称返回，比如服务器是JSP,我们会这 样做：

...

String jsoncallback=request.getParameter("jsoncallback");

...

out.print(jsoncallback+"({\"account\":\"XX\",\"passed\":\"true\",\"error\":\"null\"})");

Jquery取得的数据可能如下：

JQUET0988788({"account":"XX","passed":"true","error":"null"})

总结，用JSONP要做两件事：

1/请求地址加参数：jsoncallback=?

2/服务器段把jsoncallback的值作为方法名传回来，如JQUET098788(...)

jQuery从1.2开始就支持XMLHttp跨域请求了，具体怎么操作？

jQuery中跨域访问的核心原理：JS文件注入，因为因为script标签的src属性是可以跨域的，利用script标签的src属性直接返回非本域名下的数据，具体采用的方式称为：jsonp。

代码：
    test.html，例如位于 www.qq.com
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>jQuery-跨域请求</title>
    <script type="text/javascript" src="/js/jquery.js"></script>
    </head>
     <script type="text/javascript">
    jQuery(document).ready(function(){
        $.ajax({
            type : "GET",
            url : "http://www.b.com/server.php&action=getmsg&callback=?",
            dataType : "jsonp",
           jsonp: 'callback',
            success : function(json){
                $('#msg_box').html(json.msg);
                return true;
            }
        });
    });
    </script>
     <body>
    <div id="msg_box"></div>
    </body>
    </html>

server.php，例如位于www.baidu.com
    <?php
    $action = $_GET['action'];
    $callback = $_GET[callback ];
    
    if ($action)
    {
        echo "{$callback}({"msg":"this is a jquery jsonp test message!"})";
        exit();
    }
    else
    {
        echo "{$callback}({"msg":"error action!"})";
        exit();
    }
    ?>

　　今天上午，路路同学问了一个JQuery跨域读取json数据的问题。JQuery用得很少，还真没实际试过。于是上网找个找，看到了JQ的$.getJSON() 方法。先介绍下概念性的东西，网上找的，简单看看就行了。

1.JSONP（JSON with Padding-填充json数据也就是常用的json跨域方式）：利用script标签，通过特定的src地址的调用，来执行一个客户端的js函数，在 服务器端生成相对的数据（json格式）并以参数的形式传递给这个客户端的js函数并执行这个函数，前提是需要服务器端的数据输出支持。

2.为什么使用JSONP：由于 JSON 只是一种含有简单括号结构的纯文本，因此许多通道都可以交换 JSON 消息。因为同源策略的限制，我们不能在与外部服务器进行通信的时候使用 XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法，即通过使用 JSON 与 <script> 标记相结合的方法，从服务端直接返回可执行的JavaScript函数调用或者JavaScript对象。

3.谁在使用JSONP：dojo、JQuery、Youtube GData API 、Google Social Graph API 、Digg API 、GeoNames webservice、豆瓣API、Del.icio.us JSON API等。

------------------------------------------------------------------------------------------------

　　和 AJAX 一样，JSONP 实际上也是早已存在，只是说法相对比较新颖（貌似也出来很久了）。自 1.2 版本起，JQuery加入了对 JSONP 的支持（http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback）。我们可以很容易的利用 $.getJSON() 方法（或者其它基于 $.ajax() 的方法），来跨域加载 JSON 数据。我参考官网，写了个JQ测试的例子：

a.html

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script type="text/javascript">
function do_jsonp() {
    $.getJSON("http://active.zol.com.cn/guofeng/profile2.php?callback=?",
    function(data) {
        $('#result').val('My name is: ' + data.nick);
    });
}
</script>
<a href="javascript :do_jsonp();">Click me</a><br />
<textarea id="result" cols="50" rows="3"></textarea>
</body>
</html>

profile2.php

<?php
$callback = isset($_GET['callback']) ? $_GET['callback'] : '';
$json = '';

//php数组
$arr = array(
     'name' => 'lava',
     'nick' => '比目鱼',
     'contact' => array(
      'MSN' => 'lavaguo#msn.com',
         'email' => 'guo.feng#zol.com.cn',
         'website' => 'http://www.zol.com.cn',
     )
 );

$arr = gb2312ToUtf8($arr);//中文需要转UTF-8
$json = json_encode($arr);//转成json数组
if (!empty($callback)) {
    $json = $callback . '(' . $json . ')';//注意这里的格式，调试时这里费了点时间
}
echo $json;

function gb2312ToUtf8(&$input)
{
    if (!is_array($input)) {
        $input = iconv('GB2312', 'UTF-8', $input);
    } else {
        foreach ($input as $k=>$v) {
            gb2312ToUtf8(&$input["$k"]);
        }
    }
    return $input;
}

?>

你可能注意到上面的例子中，url 被写成了http://active.zol.com.cn/guofeng/profile2.php?callback=?，需要说明的是，这个问号会被 jQuery 自动替换为回调函数的函数名（如果是一个匿名函数，JQuery 会自动生成一个带时间戳的函数名）。

总结下JSONP原理：

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

Jquery的跨域调用的更多相关文章

  1. jquery Ajax跨域调用WebServices方法

    由于公司需要开发一个手机页面,想提供给同事直接在手机上可以查询SAP资料.数据需要使用js调用webserver来获取. 因为初次使用Jquery调用Webserver,所以期间并不顺利.测试调用We ...

  2. jquery ajax跨域调用

    客户端: //ajax跨域调用的方法 $.ajax({ url:dustUrl+"/screenshot/getDevices.do", type: "get" ...

  3. C# jquery webservices 跨域调用的问题解决方案

    前台代码: <script src="js/jquery-1.9.1.min.js" type="text/javascript"></scr ...

  4. jquery ajax 无法跨域调用的解决办法

    今天要用到jquery ajax 跨域调用,但是ajax是禁止跨域调用的,所以只能先在php文件使用函数取得跨域的值,然后用ajax调用本地php文件.

  5. jquery中的jsonp跨域调用

                                                    jquery jsonp跨域调用接口

  6. jquery中的jsonp跨域调用（接口）

                                                                           jquery jsonp跨域调用接口

  7. jquery post跨域请求数据

    原先一直以为要实现跨域请求只能用jsonp,只能支持GET请求,后来了解到使用POST请求也可以实现跨域,但是需要在服务器增加Access-Control-Allow-Origin和Access-Co ...

  8. 实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法

    关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...

  9. jquery跨域调用wcf

    使用jquery跨域调用wcf服务的时候会报如下错误 $.ajax({ url: 'http://localhost:28207/Service1.svc/GetData', method: 'get ...

随机推荐

  1. 【转】Spark源码分析之-scheduler模块

    原文地址:http://jerryshao.me/architecture/2013/04/21/Spark%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90%E4%B9%8B- ...

  2. Google Guava--Guava新增集合

    Multiset Multiset 虽然带了个set但是却允许重复元素,与set相同的是不保证元素顺序. 使用场景:获取文章中单词的出现次数 String[] wordArr = new String ...

  3. golang-利用反射给结构体赋值

    由于想给一个结构体的部分成员赋值,但是有不知道具体名字,故将tag的json名字作为索引,按照json名字来一一赋值 1.通过tag反射//将结构体里的成员按照json名字来赋值 func SetSt ...

  4. 理解Linux内核之中断控制

    乍一看下边的Linux内核代码,貌似L3389有bug,于是我就绕有兴趣地阅读了一下local_irq_save/local_irq_restore的源代码. /* linux-4.14.12/mm/ ...

  5. java基本类型自动转换

    具体自动提升类型如上图所示.其中long->float的转换一开始让我感觉有点问题,因为long是64位的,而float却是32位的. 遂找寻答案,参考博客java中long到float的自动转 ...

  6. Nodejs学习笔记（七）—Node.js + Express 构建网站简单示例

    前言 上一篇学习了一些构建网站会用到的一些知识点:https://www.cnblogs.com/flyingeagle/p/9192936.html 这一篇主要结合前面讲到的知识,去构建一个较为完整 ...

  7. eclipse查看源码

    通常eclipse中按住ctrl+左键单击,可以查看源码,很方便学习使用 如果看不到源码,需要简单的设置 设置源码 window—preference--Java—Installed JREs –jr ...

  8. WinForm通过操作注册表实现限制软件使用次数的方法

    1.创建注册表文件: 打开记事本,输入一些内容: ? 1 2 3 REGEDIT4 [HKEY_CURRENT_USER/Software/MyRegDataApp] "UseTime&qu ...

  9. 【JavaScript 从零开始】表达式和运算符(2)

    in运算符 in运算符希望它的左操作数是一个字符串或可以转换为字符串,希望它的右操作数是一个对象. 如果右侧的对象拥有一个名为做操作数值的属性名,那么表达式返回true,例如: var point= ...

  10. （二）this、call和apply

    在javascript中,this关键字总让一些初学者迷惑,Function.prototype.call, Function.prototype.apply这两个方法广泛的运用.我们有必要理解这几个 ...