整个调用过程中,起关键作用的是jsoncallback=?,在客户端调用时需在请求地址中添加参数:jsoncallback=?;同时服务器端则需要把jsoncallback的值作为方法名传回来。
服务端代码:
代码如下 |
复制代码 |
protected void Page_Load(object sender, EventArgs e)
{
Response.Write(Request.QueryString["jsoncallback"] + "({name:'test'})");
}
|
html页面调用:
代码如下 |
复制代码 |
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$.getJSON("http://localhost:10272/test.aspx?jsoncallback=?",
function(data) {
$("#divHeaderLink").html(data.name);
});
});
</script>
</head>
<body>
<div id="divHeaderLink">
</div>
</body>
</html> |
如果你不想使用jquery我们也可以使用js来实现
代码如下 |
复制代码 |
var $ = {
getJSON: function(url, params, callbackFuncName, callback){
var paramsUrl ="",
jsonp = this.getQueryString(url)[callbackFuncName];
for(var key in params){
paramsUrl+="&"+key+"="+encodeURIComponent(params[key]);
}
url+=paramsUrl;
window[jsonp] = function(data) {
window[jsonp] = undefined;
try {
delete window[jsonp];
} catch(e) {}
if (head) {
head.removeChild(script);
}
callback(data);
};
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.charset = "UTF-8";
script.src = url;
head.appendChild(script);
return true;
},
getQueryString: function(url) {
var result = {}, queryString = (url && url.indexOf("?")!=-1 && url.split("?")[1]) || location.search.substring(1),
re = /([^&=]+)=([^&]*)/g, m;
while (m = re.exec(queryString)) {
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
return result;
}
}; |
调用方法
代码如下 |
复制代码 |
var url = "http://xxx.xxx.xxx?callback=jsonp123";
var params = {
a:1,
b:2
};
$.getJSON(url, params, "callback", function(data){
//todo
}); |
|