jsonp使用

浏览器存在同源策略,XMLHttpRequest无法接收其他服务器数据,实际中常需跨域,可使用jsonp实现。jsonp基于有src属性的标签,如script标签不受同源策略限制。可手动用script标签获取数据,也可用jQuery指定dataType为JSONP,使用时实际都会转为get形式发送。

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

浏览器可以向其他服务器发送数据,但是默认不会接收从其他服务器返回的数据,这叫做浏览器的同源策略,即XMLHttpRequest无法接收其他服务器的数据。但在实际生活场景中经常需要向其他服务器发送数据,这就需要用到jsonp实现跨域。

<!--直接向其他服务器发送数据返回的报错信息-->
XMLHttpRequest cannot load http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403.
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://127.0.0.1:8000' is therefore not allowed access. The response had HTTP status code 405.

jsonp的使用是基于,具有src属性的标签,例如img标签、script标签,它们不遵守浏览器的同源策略,可以接受从其他服务器返回的数据。

 

1.利用script标签不遵守同源属性手动从远程服务器获取数据

<div id="content">原始内容</div>
<input type="button" value="jsonp发送" onclick="submitJsonp2()">
function submitJsonp2() {
    var tag = document.createElement('script'); //创建script标签
    tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';  //指定script标签的src属性为远程服务器地址
    document.head.appendChild(tag);   //在head部分增加创建的script标签,获取访问的远程服务器地址的返回内容
    document.head.removeChild(tag);  //删除创建的script标签
}

//由于远程服务器的返回值由list函数包裹,因此在本地需要创建一个list函数
function list(arg) {
    $('#content').html(JSON.stringify(arg))   //将远程服务器的返回值显示到当前页面
}

 

 

2.直接使用jQuery

<div id="content">原始内容</div>
<input type="button" value="jsonp发送" onclick="submitJsonp3()">
function submitJsonp3() {
    $.ajax({
        url:'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
        type:'POST',
        dataType:'JSONP',
        jsonp: 'callback',
        jsonpCallback:'func'
    })
}

function func(arg) {
    $('#content').html(JSON.stringify(arg))
}

dataType:'JSONP'指定数据格式为JSONP,则整个ajax请求不会通过XMLHttpRequest对象向后台发送,而是在页面创建script标签并获取远程服务器的返回数据,再将创建的script标签删除。

jsonp和jsonpCallback参数相当于指定回调参数名称为func,在远程服务器通过request.GET.get('callback')获取回调函数的名称再包裹到返回值上,即name = request.GET.get('callback'),return HttpResponse('%s("返回值")'%name)

使用jsonp形式时,无论type指定为get还是post,实际都会转换为get形式发送。

 

转载于:https://www.cnblogs.com/Forever77/p/10906904.html

Java中使用JSONP主要是通过使用跨域请求来获取JSON数据。JSONPJSON with Padding)是一种跨域请求技术,它实际上是通过在页面中动态创建一个`<script>`标签来加载远程的JSON数据,并通过回调函数来处理返回的数据。 下面是一个简单的Java JSONP的示例代码: ```java import javax.ws.rs.GET; import javax.ws.rs.Path; import javax.ws.rs.Produces; import javax.ws.rs.QueryParam; import javax.ws.rs.core.MediaType; @Path("/jsonp") public class JSONPService { @GET @Path("/data") @Produces(MediaType.APPLICATION_JSON) public String getJSONPData(@QueryParam("callback") String callback) { // 构造要返回的JSON数据 String jsonData = "{\"name\":\"John\", \"age\":30}"; // 将返回的数据包装成JSONP格式 String jsonpData = callback + "(" + jsonData + ")"; return jsonpData; } } ``` 上面的代码使用了JAX-RS(Java API for RESTful Web Services)来创建一个简单的RESTful服务。通过访问`/jsonp/data?callback=callbackFunction`,可以获取到如下格式的JSONP数据: ``` callbackFunction({"name":"John", "age":30}) ``` 在前端页面中,可以使用类似下面的代码来处理返回的JSONP数据: ```javascript function callbackFunction(data) { // 处理返回的JSON数据 console.log(data.name); console.log(data.age); } var script = document.createElement('script'); script.src = 'http://example.com/jsonp/data?callback=callbackFunction'; document.body.appendChild(script); ``` 以上代码中,通过动态创建`<script>`标签,设置`src`属性为请求JSONP数据的URL,并指定回调函数名字为`callbackFunction`。当服务器返回数据时,会调用该回调函数来处理返回的数据。 需要注意的是,JSONP存在一些安全性问题,因为它允许在页面中执行任意的JavaScript代码。因此,在使用JSONP时需要谨慎处理返回的数据,以防止潜在的安全漏洞。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值