jquery ajax json 跨域取得json格式的值：
此方法解决jquery ajax 跨域取json数据的时候返回值通过firebug 可以查到，但是不执行回调函数的问题
$(document).ready(function (){
$('#btn').click(function(){
alert("frist");
var q = document.getElementById("k").value;
alert("second="+q);
var randomnum=(new Date()).getMilliseconds();
$.getJSON('http://192.168.1.201:8080/solrClient/g.action?jsoncallback=jsonfeed',{"q":q},
jsonfeed=function(json){
var data = eval(json);
for(i=0 ;i<data.length;i++){
alert(data[i].id);
}
});
return false;
})
})
在 请求url里面写入jsoncallback 参数jsoncallback=jsonfeed jsonfeed为 回调的方法名 通过jsoncallback=jsonfeed我们把 该 回调方法名传给服务器，然后服务器接收到jsoncallback的值 ,其实接收到的是 回调的方法名jsonfeed 也就是回调的方法, 然后将json格式的数据 以方法的参数的形式 传递给 jsonfeed 因为json为回调方法 而不是字符串 这里需要注意,具体形式为：jsonfeed(json) 的形式返回 .
用jQuery与JSONP来解决跨域访问的问题
时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了.
好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘.
跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,
所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作，然后在浏览器端用AJAX获取本机服务器端“跨域访问”对应的url.来间接完成跨域访问也是可以的.但很显然开发量比较大,但限制也最少,很多widget开放平台server端(如sohu博客开放平台)其实就么搞的.不在本次讨论范围.
要讨论的是浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的.
真实案例:
var qsData ={'searchWord':$("#searchWord").attr("value"),'currentUserId':$("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")};
$.ajax({
async:false,
url: http://跨域的dns/document!searchJSONResult.action,
type: "GET",
dataType: 'jsonp',
jsonp: 'jsoncallback',
data: qsData,
timeout: 5000,
beforeSend: function(){
//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
},
success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
if(json.actionErrors.length!=0){
alert(json.actionErrors);
}
genDynamicContent(qsData,type,json);
},
complete: function(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 });
},
error: function(xhr){
//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
//请求出错处理
alert("请求出错(请检查相关度网络状况.)");
}
});
注意:$.getJSON("http://跨域的dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?",
function(json){
if(json.属性名==值){
// 执行代码
}
});
这种方式其实是上例$.ajax({..}) api的一种高级封装,有些$.ajax api底层的参数就被封装而不可见了.
这样,jquery就会拼装成如下的url get请求
http://跨域的dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=%E7%94%A8%E4%BE%8B¤tUserId=5351&conditionBean.pageSize=15
在响应端(http://跨域的dns/document!searchJSONResult.action),
通过 jsoncallback =request.getParameter("jsoncallback") 得到jquery端随后要回调的js functionname:jsonp1236827957501
然后 response的内容为一个ScriptTags:"jsonp1236827957501("+按请求参数生成的json数组+")";
jquery就会通过回调方法动态加载调用这个js tag:jsonp1236827957501(json数组);
这样就达到了跨域数据交换的目的.
jsonp的最基本的原理是:动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.
这样其实"jQuery AJAX跨域问题"就成了个伪命题了,jquery $.ajax方法名有误导人之嫌.
如果设为dataType: 'jsonp', 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，
我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。
这种跨域的通讯方式称为JSONP。
jsonCallback 函数jsonp1236827957501(....):是浏览器客户端注册的，获取跨域服务器上的json数据后，回调的函数
Jsonp原理：
首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意：服务端得到callback的数值后，要用jsonp1236827957501(......)把将要输出的json内容包括起来，此时，服务器生成 json 数据才能被客户端正确接收。
然后以 javascript 语法的方式，生成一个function , function名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据,作为参数，
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function(json))里.（动态执行回调函数）
可以说jsonp的方式原理上和<scriptsrc="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.
原理的示例代码:
| //客户端的JAVASCRIPT代码 var script=document.createElement("script"); script.src="http://www.pl4cj.com:8888/5/6/action.php?param=123&callback="+fnName; document.getElementsByTagName("head")[0].appendChild(script)
//服务器端的PHP代码，一定要有callback来进行回调，在这里加上括号，是让它以语句块的方式来进行解析 <?php <span style="color: #ff00ff;">echo $_GET["callback"]."(".json_encode($_GET).");"; </span>? |
注意,jquey是不支持post方式跨域的.
为什么呢?
虽然采用post +动态生成iframe是可以达到post跨域的目的,但这样做是一个比较极端的方式,不建议采用.
也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的, 万不得已还是不要剑走偏锋..
client端跨域访问的需求看来也引起w3c的注意了,看资料说html5 WebSocket标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案,
jquery的ajax和getJson跨域获取json数据[转]
2012-10-26 15:47:47| 分类： javascript|字号 订阅
很多开发人员在使用jquery在前端和服务器端进行数据交互，所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开发时，因为要和第三方公司的一个项目进行数据的共享，因为考虑多不占用服务器的资源，遂决定直接在html进行数据的读取，不走服务器端进行中转了。然后正好就遇到了浏览器端跨域访问的问题。
跨域的安全限制都是指浏览器端来说的，服务器端不存在跨域安全限制的问题。
目前浏览器端跨域访问常用的两种方法有两种：
1、通过jQuery的ajax进行跨域，这其实是采用的jsonp的方式来实现的。
jsonp是英文json with padding的缩写。它允许在服务器端生成script tags至返回至客户端，也就是动态生成javascript标签，通过javascript callback的形式实现数据读取。
html页面端示例代码：
| 01 | //首先要引入jquery的js包 | |
| 02 | jQuery(document).ready(function(){ | |
| 03 | $.ajax({ | |
| 04 | type : "get", //jquey是不支持post方式跨域的 | |
| 05 | async:false, | |
| 06 | url : "http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL | |
| 07 | dataType : "jsonp", | |
| 08 | //传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback) | |
| 09 | jsonp: "jsoncallback", | |
| 10 | //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 | |
| 11 | jsonpCallback:"success_jsonpCallback", | |
| 12 | //成功获取跨域服务器上的json数据后,会动态执行这个callback函数 | |
| 13 | success : function(json){ | |
| 14 | alert(json); | |
| 15 | } | |
| 16 | }); | |
| 17 | }); |
服务器端示例代码，以java为例：
服务器端代码，是重点，开始以为，只要客户端通过jsonp就可以直接跨域访问，其实不然，需要服务器端的支持才行。
| 01 | public void jsonpTest() throws IOException{ | |
| 02 | HttpServletRequest request = ServletActionContext.getRequest(); | |
| 03 | HttpServletResponse response = ServletActionContext.getResponse(); | |
| 04 | //根据html指定的jsonp回调函数的参数名，获取回调函数的名称 | |
| 05 | //callbackName的值其实就是：success_jsonpCallback | |
| 06 | String callbackName = (String)request.getAttribute("jsoncallback"); | |
| 07 | //简单模拟一个json字符串，实际可使用google的gson进行转换，次数通过字符串拼接 | |
| 08 | //{"name":"张三","age":28} | |
| 09 | //\是对"号进行转义 | |
| 10 | String jsonStr = "{\"name\":\"张三\",\"age\":28}"; | |
| 11 | //最终返回的数据为：success_jsonpCallback({"name":"张三","age":28}) | |
| 12 | String renderStr = callbackName+"("+jsonStr+")"; | |
| 13 | response.setContentType("text/plain;charset=UTF-8"); | |
| 14 | response.getWriter().write(renderStr); | |
| 15 | } |
jsonp的原理：
首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:success_jsonpCallback)传给服务器端对应的处理函数。
服务器先生成需要返回给客户端的 json 数据。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数(jsoncallback)的值(success_jsonpCallback) 。
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并将服务器端返回的数据，作为参数，
传入到了客户端预先定义好的callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里。
实际上跨域是通过动态增加script来加载数据，无法直接获得数据，所以需要使用回调函数。
2.使用jquery的getJson进行跨域读取数据
实际上getJson方式的根本原理和ajax使用jsonp的方式是一样的。
jquery中常用getJson来调用获取远程的数据，并通过json格式返回。函数的原型如下：
jQuery.getJSON(url,data,success(data,status,xhr))
| 参数 | 描述 |
| url | 必需。规定将请求发送的哪个 URL。 |
| data | 可选。规定连同请求发送到服务器的数据。 |
| success(data,status,xhr) | 可选。规定当请求成功时运行的函数。 额外的参数： · response - 包含来自请求的结果数据 · status - 包含请求的状态 · xhr - 包含 XMLHttpRequest 对象 |
该函数是简写的ajax函数，实际上等价于：
$.ajax({ url: url, data: data, success: callback, dataType: json });
言归正传，下面我们来看如何使用getJson跨域获取数据。
html页面示例代码：
$.getJSON("http://api.taobao.com/apitools/ajax_props.do&jsoncallback=?", function (data) { alert(data); } );
执行原理：
发送请求时需要传一个callback的回调函数名到服务器端，服务器端拿到这个回调函数名，再将返回数据用参数的形式反回到客户端，这样客户端就能够调到。
所以发送请求URL的地址后面一定要上jsoncallback=?这样的参数，jquery会将?号自动替换成自动生成的回调函数的名称。
所以最终的实际请求为：http://api.taobao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697
所以和ajax的方式想比较，也就是callback函数一个是自动生成的函数名，一个是手工指定的函数名。
扫一扫
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
