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 ...
随机推荐
- 百度地图 JS API开发Demo01
百度地图DEMO <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- boostrap 进入条显示百分比
<div class="progress"> <div class="progress-bar progress-bar-success" ...
- 正经学C#_判断[IF语句]：[c#入门经典]
判断语句几乎是最为常用的语句之一,是最有效的. 先说IF语句,IF语句也是属于分支的一种,用来控制流程的. IF的语句是这样的 IF(xxx 条件) { //代码块 } ,b; ) { b=a--; ...
- [Windows] VS打开资源文件(.rc)时显示 error RC2247 : SYMBOL name too long
源解决方案:error RC2247 : SYMBOL name too long 解决方法: 将所有要包含的文件用 APSTUDIO_HIDDEN_SYMBOLS 宏包起来,保存后关闭当前的资源文件 ...
- 微信小程序小结（5） -- 常用语法
在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面). Page生命周期 属性 类型 描述 onLoad Function 生命周期函数--监听页面加载.一个页面只会调用 ...
- 《图解HTTP》阅读笔记-第五章-web服务器
第五章.与HTTP协助的web服务器单台虚拟主机实现多个域名可以用单台物理主机运行多台虚拟主机,这些虚拟主机的IP相同,而虚拟主机有可以寄存多个不同主机名和域名的web网站,所以要保证发送HTTP ...
- SP8791 DYNALCA - Dynamic LCA
\(\color{#0066ff}{ 题目描述 }\) 有一个森林最初由 n (\(1 \le n \le 100000\))n(\(1\leq n\leq 100000\)) 个互不相连的点构成 你 ...
- 「产品经理全连接系列2」企业如何开展敏捷或DevOps的研发变革
大家好,我是华为云的产品经理 恒少: 作为布道师和产品经理,出差各地接触客户是常态,经常和华为云的客户交流.布道.技术沙龙,但是线下交流,覆盖的用户总还是少数. 我希望可以借线上的平台,和用户持续交流 ...
- matplotlib类
1.plt.subplot 在matplotlib下,一个Figure对象可以包含多个子图(Axes),可以使用subplot()快速绘制,其调用形式如下:subplot(numRows, numCo ...
- X星球居民小区的楼房全是一样的...
每周一题之3 [问题描述] X星球居民小区的楼房全是一样的,并且按矩阵样式排列.其楼房的编号为1,2,3... 当排满一行时,从下一行相邻的楼往反方向排号. 比如:当小区排号宽度为6时,开始情形如下: ...