Jquery(12)Jquery Ajax跨域访问

同源策略

一、跨域的集中方法:

  1. 服务器端发送请求,服务器作为中继代理(此方法不理解)
  2. iframe
  3. script标签

通过动过动态生成script标签,并将src指向目标源的方式

原生实现方式示例:

var url="www.xxx.baidu.com/aa.js",
scriptTag=document.createElement("script");
scriptTag.src=url;
document.getElementByTagName("head")[0].appendChild(scriptTag);

function showSth(data){
  alert(data.a);
}
////////////aa.js
var aa={"a":"A"};
showSth(aa);

二、jsonp:

1、客户端

使用script标签实现跨域访问、可在url中指定回调函数、获取json数据并在指定的回调函数中执行

jQuery实现jsonp

//$.getJSON
var url="wwwa.xxx.baidu.com/aa.js?callback=?"//使用?作为回调函数名,jquey会自动生成随机名替换?号。
$.getJSON(url,function(jsoon){
  alert(json.name+json.Email);
});

//$.ajax;
var url=www.xxx.baidu.com/aa.asmx?code=xx
$.ajax({
  url: url,
  dataType: jsonp,
   jsonp:”callback”,//传递给请求处理程序的参数名,用来获取jsonp回调函数名(默认为“callback”,自动在URL中加上callback=?参数)
   jsonpCallback:”GetUser”,//自定义的jsonp回调函数名(默认为jquery自动生成的随机函数名),此参数通常不用设置
  success:function(json){
    alert(json.name+json.Email);
  }
});

jQuery 只支持get方式的jsonp实现。

jsonp的缺点:如果返回的数据格式有问题或返回失败了,并不会报错。

2、服务端

string jsoncallback = context.Request["callback"]; //如果不指定jsoncallback参数名,则返回随机函数名。
string jsonp=jsoncallback+"("+ new JavaScriptSerializer(new {Name="a",Email="B"})+")"
context.Response.ContentType = "text/plain";
context.Response.Write(jsonp);

posted on 2018-08-12 00:31  springsnow  阅读(1449)  评论(0编辑  收藏  举报

导航