jquery用jsonp方式跨域获取json数据原理(解决jquery跨服务器权限受限问题)
html代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
function getdata() {
$.ajax({
url: "http://192.168.2.32/jquery/ajax_do.aspx?callback=?",
dataType: "jsonp",
jsonp:"callback",
success: function(data) {
alert(data);
$("#sp_data").html(data.msg);
}
});
}
</script>
</head>
<body>
<div>
<a onclick="getdata()" href="#" style="color:Blue">跨域</a>
</div>
</body>
</html>
<title></title>
<script src="jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
function getdata() {
$.ajax({
url: "http://192.168.2.32/jquery/ajax_do.aspx?callback=?",
dataType: "jsonp",
jsonp:"callback",
success: function(data) {
alert(data);
$("#sp_data").html(data.msg);
}
});
}
</script>
</head>
<body>
<div>
<a onclick="getdata()" href="#" style="color:Blue">跨域</a>
</div>
</body>
</html>
后台代码(ajax_do.aspx.cs):
string callback=Request.QueryString["callback"];
Response.Write(callback+"({msg:'error action!'})");
Response.Write(callback+"({msg:'error action!'})");
Jsonp原理:
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)