JQuery 的跨域方法 可跨任意网站
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需要客户端与服务端作出配合。
- 客户端传递的URL里要包含callback变量，以形如callback=?的形式结尾。（jquery会随机生成一个字符串替换？传递给服务端）
- 服务端获取客户端传递的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 的跨域方法 可跨任意网站的更多相关文章
- js中几种实用的跨域方法原理详解（转）
今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...
- js中几种实用的跨域方法原理详解
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- [转]js中几种实用的跨域方法原理详解
转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...
- js中几种实用的跨域方法原理详解【转】
源地址:http://www.cnblogs.com/2050/p/3191744.html 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通 ...
- js处理的8种跨域方法
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【转】js中几种实用的跨域方法原理详解
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 前端Js跨域方法汇总—剪不断，理还乱，是跨域
1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...
随机推荐
- Centos7安装配置JDK8
Centos7安装配置JDK8 一.准备工作 第一步,去甲骨文官网下载Jdk相应的版本,我这里下载的是jdk1.8. 第二步将你从官网上下载下来的jdk使用FTP工具上传到云服务器上的相应目录,我的是 ...
- MapReduce-自定义 InputFormat 生成 SequenceFile
Hadoop 框架自带的 InputFormat 类型不能满足所有应用场景,需要自定义 InputFormat 来解决实际问题. 无论 HDFS 还是 MapReduce,在处理小文件时效率都非常低, ...
- Python字典基础知识补充
1.添加键值对 #!/usr/bin/env python i1 = {'k1':'cai' , 'k2':123} print(i1) i1['k3'] = 0 i1['k4'] = "r ...
- 最短路+状压DP【洛谷P3489】 [POI2009]WIE-Hexer
P3489 [POI2009]WIE-Hexer 大陆上有n个村庄,m条双向道路,p种怪物,k个铁匠,每个铁匠会居住在一个村庄里,你到了那个村庄后可以让他给你打造剑,每个铁匠打造的剑都可以对付一些特定 ...
- Tarjan缩点+LCA【洛谷P2416】 泡芙
P2416 泡芙 题目描述 火星猫经过一番努力终于到达了冥王星.他发现冥王星有 N 座城市,M 条无向边.火星猫准备出发去找冥王兔,他听说有若干泡芙掉落在一些边上,他准备采集一些去送给冥王兔.但是火星 ...
- 2017ACM/ICPC亚洲区沈阳站-重现赛（感谢东北大学）
Little Boxes Problem Description Little boxes on the hillside.Little boxes made of ticky-tacky.Littl ...
- C语言利用指针排序与选择排序算法
//读入字符串,并排序字符串 #include <stdio.h> #include <string.h> #define SIZE 81 #define LIM 20 #de ...
- P4213 【模板】杜教筛
[题目链接] https://www.luogu.org/problemnew/show/P4213 给定一个正整数\(N(N\le2^{31}-1)\) 求 \(ans_1=\sum_{i=1}^n ...
- C#后端调用WebApi地址
using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; using Syst ...
- BZOJ3620（kmp）
要点 本题使用\(O(n^2)\)的算法 外层枚举左端点,内层一直kmp到结尾,中间遇到合法的就ans++ 如果是acccca这种数据直接kmp过程顺手判断即可:但是aaa这种数据,j = 2,实际判 ...