JS的跨域问题，很多人在网上找其解决方法，教其用IFRAME去解决的文章很多，真有那么复杂吗？其实很简单的，如果你用JQUERY，一个GETJSON方法就搞定了，而且是一行代码搞定。

下面开始贴出方法。

//跨域（可跨所有域名）

        $.getJSON("http://user.hnce.com.cn/getregion.aspx?id=0&jsoncallback=?",function(json){

         //要求远程请求页面的数据格式为： ?(json_data)

         //例如：

         //?([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}])

         alert(json[]._name);

         });　　

意，getregion.aspx中，在输出JSON数据时，一定要用Request.QueryString["jsoncallback"]，将获取的内容放到返回JSON数据的前面，假设实际获取的值为42342348，那么返回的值就是 42342348([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}])

因为getJSON跨域的原理是把？随机变一个方法名，然后返回执行的，实现跨域响应的目的。

具体getJSON的使用说明，请参考JQUERY手册。需要指出的一点是getJSON利用的jsonp需要客户端与服务端作出配合。

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

不出意外的话应该已经可以跨域读取了。
同时输出json数据时候{之前的是(

下面一个是跨域执行的真实例子：

<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

//跨域（可跨所有域名）

    $.getJSON("http://e.hnce.com.cn/tools/ajax.aspx?jsoncallback=?", { id: , action: 'jobcategoryjson' }, function(json) {

        alert(json[].pid);

        alert(json[].items[]._name);

    });　

</script>

jquery 的ajax 默认是异步的, 跨域用同步试，ajax jsonp

========================

注意这里调用的地址中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中跨域访问的核心原理：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();

     }

     ?>

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 函数里.（动态执行回调函数）

转：http://www.cnblogs.com/taven/archive/2010/05/20/1739731.html

http://www.cnblogs.com/5201314/archive/2009/06/23/1509552.html

JQuery 的跨域方法 可跨任意网站的更多相关文章

  1. js中几种实用的跨域方法原理详解（转）

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  2. js中几种实用的跨域方法原理详解

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

  3. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

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

  4. 【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

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

  5. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

  6. js中几种实用的跨域方法原理详解【转】

    源地址:http://www.cnblogs.com/2050/p/3191744.html 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通 ...

  7. js处理的8种跨域方法

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

  8. 【转】js中几种实用的跨域方法原理详解

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

  9. 前端Js跨域方法汇总—剪不断，理还乱，是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

随机推荐

  1. ffmpeg windows下编译ffmpeg

    windows下编译ffmpeg 今天由于工作需求需重新编译ffmpeg,百度,goole了一大堆,看眼花缭乱的,但几乎都是三种方案,大部分都是直接转发,一字不漏,错误的缺文件的还是照转,可是问题都大 ...

  2. 反欺诈(Fraud Detection)中所用到的机器学习模型

    反欺诈应用的机器模型算法,多为二分类算法. 1.gbdt梯度提升决策树(Gradient Boosting Decision Tree,GBDT)算法,该算法的性能高,且在各类数据挖掘中应用广泛,表现 ...

  3. 正经学C#_变量与其数据类型：《c#入门经典》

    这一篇总结以下变量与其数据类型. 变量:在c#中指 某一个值或者数据存储在变量中,并且可以取出或者查看.变量不仅仅是一种,也有很多种,细分而言就是类型.泛指就是变量.如果是要是使用变量就要 声明变量, ...

  4. iOS开发之蓝牙使用-建立连接的

    1.大佬笔记 CSDN 2.代码 github

  5. [转载]pytorch自定义数据集

    为什么要定义Datasets: PyTorch提供了一个工具函数torch.utils.data.DataLoader.通过这个类,我们在准备mini-batch的时候可以多线程并行处理,这样可以加快 ...

  6. 分割字符串(C++)

    方案1: 利用"IO流"的概念,即C++中的stream,我们都用过C++中std::iostream中的std::istream与std::ostream 如果你接触过网络编程( ...

  7. 用异或运算交换两个整数实现swap函数功能

    对于异或运算有这如下说明: 1^1=0 0^0=0 1^0=1 0^1=1 简单理解就是当两个书相同时结果为0,而两个数不同时异或的结果为1 可用于两个整数的交换,而不用去引入一个中间变量 #incl ...

  8. 2018年 CCPC 网络赛 赛后总结

    历程:由于只是网络赛,所以今天就三开了.一开始的看题我看了d题,zz和jsw从头尾看起来,发现c题似乎可做,和费马大定理有关,于是和zz一起马上找如何计算勾股数的方法,比较慢的A掉了,而jsw此时看了 ...

  9. The MathType DLL cannot be found 一劳永逸的方法

    可能会看到下面的情况,然后实际上我们也能用过外部打开直接使用,那要你何用? 于是,我们找到这个文件,删除就OK 反正我写完论文就卸载了...

  10. LDAP环境搭建 OpenLDAP和phpLDAPadmin -- yum版

      前言: 前两天公司要求做一个使用LDAP和Kerberos做一个认证授权系统,然后开始学习LDAP相关知识,期间找了不少博客按照步骤来安装,可是很多博客在配置的时候,都会遇到安装过程中一两个问题卡 ...