用jsonp实现跨域访问

本文详细解释了JSONP技术原理,包括如何在客户端注册callback,服务器如何生成并返回JSON数据,以及如何在客户端执行回调函数。重点介绍了使用JSONP进行跨域访问的方法,包括动态生成script标签并插入页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需要实现跨域访问,无非就那么几种方式,其中jsonp是最为理想的方式,由于jsonp属于非正式协议,所以安全性就受到质疑。但是不妨碍我们使用其实现我们的跨域访问。

要使用jsonp完成跨域放访问,首先要熟悉他的原理。



首先在客户端注册一个callback, 然后把callback的名字传给服务器(此回调函数名字可以不带)。此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)



使用JSONP技术时,一般是由JS在客户端页面中动态插入script标签,将其src属性设置为带参数的URL。当页面加载时,前述URL会将 参数通过GET请求发送到相应服务器端应用程序(由URL表示),服务器根据参数返回数据——注意,这个数据格式是JSON,并且(注意)被包含在一个函 数调用中,例如:callback({json_data})。这样,在客户端页面中存在预定义的callback(data)函数的定义时,服务器返回 的函数调用就会立即执行,由客户端的函数对数据进行操作。



动态生成script并在页面加载完成后跨域访问:

$(document).ready(function (){ // 调用JSONP服务器,url为请求服务器地址
var script =document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src",“此处放置你需要跨越访问的url”);
script.setAttribute("id", url);
document.appendChild(script);});



===========Javascript代码段:JSONP客户端对服务器开放的接口方法,即回调函数=======================

function jsonpCallback(obj){
alert(obj.msg);
}
------------------END------------------------



===============服务器端代码==================

服务器端可以通过

java.io.PrintWriter out = getResponse().getWriter();

out.println("jsonpCallback({msg:'需要传递的数据',name:'需要传递的数据'})");

out.close();

将需要传递的数据通过设置到回调函数中进行传递。



注意:jsonpCallback({msg:'需要传递的数据',name:'需要传递的数据'})会在返回客户端的时候自动按照JavaScript语法将数据注入之,如果jsonpCallback函数在客户端没有预先定义,那么将会报找不到该函数的错误。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值