欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

跨域请求

程序员文章站 2022-07-10 10:18:40
...

     

     更多资源:探讨跨域请求资源的几种方式


    由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域

跨域请求

    JSONP的规则:

a. 客户端页面中在script标签(或javascript动态创建)使用src来请求跨域Action,并提供callback函数名称以及所需数据。

b. 跨域服务器提供一个可以处理JSONP服务请求的Action,并返回客户端页面所需要的javascript代码,格式如:callback(responseJsonData);

c. 客户端页面中创建一个名为callback的函数来处理跨域请求的返回结果;

   在日常使用中,大家可以以下几种方式来使用JSONP:

    1 . 通过script标签加载中执行(不常用)

<script>
      var _script = document.createElement('script');
      _script.type = "text/javascript";
      _script.src = "http://localhost:8888/jsonp?callback=f";
      document.head.appendChild(_script);
    </script>

    2. 通过javascript脚本动态生成

 

//回调函数
function dataHandler(data){
    //处理代码
}
//提供jsonp服务的url地址(什么类型的地址无所谓,只要返回值是一段javascript代码)
var url = “http://www.a.com/Domain.action?callback=dataHandler&id=1024”;
//创建script标签
var script = document.createElement(“script”);
//传入url
script.setAttribute(“src”, url);
//加入head内并执行
document.getElementsByTagName('head')[0].appendChild(script);
    3. 通过jQuery的方式调用
 
$.ajax({
    type:"get",
    async: false,
    url: " http://www.a.com/Domain.action?id=1024",
    dataType:"jsonp",
    jsonp:"callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
    jsonpCallback:"dataHandler",//自定义的jsonp回调函数名称,如您不写,可以直接在下面的success中处理数据。
    success:function(json){
        //处理数据
    },
    error: function(){
        //处理异常
    }
});





 


相关标签: 跨域请求 JSONP