ajax异域请求jsonp,Java Ajax jsonp 跨域请求

一、什么是JSONP

通常来讲位于 server1.example.com 的网页没法与不是 server1.example.com的服务器沟通,而 HTML 的 元素是一个例外。利用 元素的这个开放策略,网页能够获得从其余来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并非 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

JSONP是一种协议,为了解决客户端请求服务器跨域的问题,可是并不是是正式的传输协议。该协议的一个要点就是容许用户传递一个callback参数给服务端,而后服务端返回数据时会将这个callback参数做为函数名来包裹住JSON数据,这样客户端就能够随意定制本身的函数来自动处理返回数据了.javascript

二、Ajax 请求其余域接口

我这个项目要请求另一个第一个后台接口请求数据,在页面渲染的时候,经过ajax加载数据以下:java

$.ajax({

url: 'http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10',

type: 'GET',

dataType: 'json',

timeout: 5000,

contentType: 'application/json; charset=utf-8',

success: function (result) {

alter("aaaa");

}

});

这样就出现跨域的错误,以下所示:jquery

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 500.ajax

bVAioR

这里就说明不容许跨域请求,那么怎么办? 换成jsonp好了。就改了dataType这个字段。json

$.ajax({

url: 'http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10',

type: 'GET',

dataType: 'jsonp',

timeout: 5000,

contentType: 'application/json; charset=utf-8',

success: function (result) {

alter("aaaa");

}

});

结果: Uncaught SyntaxError: Unexpected token!跨域

what the fuck!bVAio1 明明请求回来数据,结果仍是报错。缘由是ajax请求服务器,而返回的数据格式不符合jsonp的返回格式,那么jsonp格式是什么样的?浏览器

Callback({msg:'this is json data'})

这是什么叼东西,奇葩谁定义的!若是你这么想,看来你没有仔细看第1点,JSON是一种轻量级的数据交换格式,像xml同样。JSONP是一种使用JSON数据的方式,返回的不是JSON对象,是包含JSON对象的javaScript脚本。可是上图是一段json串,因此报错啦。服务器

三、参数返回处理

有一点你会发如今你是用jsonp协议请求时,在参数中除了本身填写的参数外还有名为callback的参数,如图:

bVAipbapp

看看这个参数是什么东西,由于我在ajax请求的时候没有指定,jsonp这个参数,那么系统默认参数名为“callback”。没有指定jsonpCallback参数, 那么jquery会生成随机的函数名,如上图所示。函数

好比我以下配置:

$.ajax({

url: 'http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10',

type: 'GET',

dataType: 'jsonp',

jsonp:'callbacka',//传递给请求处理程序或页面的,用以得到jsonp回调函数名的参数名(默认为:callback)

jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名

timeout: 5000,

contentType: 'application/json; charset=utf-8',

success: function (result) {

alter("aaaa");

}

});

那么服务器亦能够经过下面方法获取回调的函数名:

string callbackFunName =request.getParameter("callbacka");//获取的就是success_jsonpCallback 字符串

注意:系统会区分函数名大小写。

bVAipB

那么下面按照格式包装一下看看咯:

String callback = request.getParameter("callback"); //不指定函数名默认 callback

return callback+ "(" + jsonStr + ")"

包了一下,结果然的不报错,看下返回数据以下图:

bVAiqs

四、JSONP的执行过程

首先在客户端注册一个callback (如:'jsoncallback'), 而后把callback的名字(如:jsonp1236827957501)传给服务器。注意:服务端获得callback的数值后,要用jsonp1236827957501(......)把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。

而后,以 javascript 语法的方式,生成一个function, function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

最后,将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,做为参数, 传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值