ajax跨域请求jsonp

先来说明以下jsonp的请求原理:jsonp的原理其实就是在客户端动态添加一条<script>标签,而<script>标签的src属性是没有域限制的,所以与ajax 的xmlhttprequest协议无关。

而jsonp请求只有get,没有post

下面我们来看实例:

客户端:

        $.ajax({
            type:"GET",
            url:'...',
            data:{ ...},
            dataType:'jsonp',
            jsonp:'jsoncallback',  // 回调函数,回调函数名有浏览器动态生成
            success:function(data){
            	console.log(data);
            }
        });
服务器端:

response.setHeader("Access-Control-Allow-Origin","*");  // *表示所有域都可以请求
String callbackname = request.getAttribute("jsoncallback"); // 获取回调函数
String data = "Hello World";  // 模拟数据
String result = callbackname + "(" + data + ")";  // 固定格式,封装成一个js函数,函数名就是回调函数名
response.getWriter().print(result);

上述就是一个完整的jsonp响应过程,不过只接受type="GET"的请求,即使你在服务器端加了 response.setHeader("Access-Control-Allow-Methods","GET,POST");实际请求方式还是get。
接下去我们再说一下jsonp的具体请求过程:
首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的函数名(有浏览器动态生成,如jsonp123456)传给服务器。注意:服务端得到callback的数值后,要用jsonp123456(......)把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。
然后以 javascript 语法的方式,生成一个function, function 名字就是callback函数名,如jsonp123456,然后将数据已参数的方式传入success函数中,最后输出。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值