使用后台response添加header
后台response添加header,response.setHeader("Access-Control-Allow-Origin",
"*"); 支持所有网站
使用JSONP
前端代码:
$.ajax({
type :"POST",
async :false,
url :"http://a.a.com/a/FromUserServlet?userName=张三",
dataType :"jsonp",//数据类型为jsonp
jsonp :"jsonpCallback",//服务端用于接收callback调用的function名的参数
success :function(data) {
alert(data.result);
},
error :function() {
alert('fail');
}
});
jquery 中jsonp的实现原理
在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的ajax是不能进行跨域请求的。但 img、iframe 、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用 script标签的开放策略,我们可以实现跨域请求数据,当然这需要服务器端的配合。 Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加 标签来调用服务器提供的 js脚本。
当我们正常地请求一个JSON数据的时候,服务端返回的是一串 JSON类型的数据,而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ,所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get !
示例:
$.ajax({
url:
'http://192.168.1.114/yii/demos/test.php', //不同的域
type: 'GET', // jsonp模式只有GET 是合法的
data: {
'action': 'aaron'
},
dataType: 'jsonp', // 数据类型
jsonp: 'backfunc', // 指定回调函数名,与服务器端接收的一致,并回传回来
})
其实jquery 内部会转化成
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron
然后动态加载
type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc=
jQuery2030038573939353227615_1402643146875&action=aaron">
然后后端就会执行backfunc(传递参数 ),把数据通过实参的形式发送出去。
使用JSONP 模式来请求数据的整个流程:客户端发送一个请求,规定一个可执行的函数名(这里就是 jQuery做了封装的处理,自动帮你生成回调函数并把数据取出来供success属性方法来调用,而不是传递的一个回调句柄),服务器端接受了这个 backfunc函数名,然后把数据通过实参的形式发送出去
(在jquery 源码中, jsonp的实现方式是动态添加标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数,当 代码插入时函数执行,执行完毕后就 会被移除。同时jquery还对非跨域的请求进行了优化,如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。)
后端代码:
@WebServlet("/FromUserServlet")
public classFromUserServletextends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setCharacterEncoding("UTF-8");
// resp.setHeader("Access-Control-Allow-Origin",
"*");
StringuserName = req.getParameter("userName");
StringuserAge = req.getParameter("userAge");
System.out.println(userName + "----" + userAge+"---"+req.getMethod());
// JSONObject JSONObject1 = new JSONObject();
// JSONObject1.put("success", "添加成功!");
// resp.getWriter().write("callbackparam(" + JSONObject1.toJSONString()
// + ")");
try {
resp.setContentType("text/plain");
resp.setHeader("Pragma", "No-cache");
resp.setHeader("Cache-Control", "no-cache");
resp.setDateHeader("Expires", 0);
PrintWriterout = resp.getWriter();
JSONObjectresultJSON = new JSONObject(); // 根据需要拼装json
resultJSON.put("result", "content");
StringjsonpCallback = req.getParameter("jsonpCallback");// 客户端请求参数
out.println(jsonpCallback + "(" + resultJSON.toJSONString()
+ ")");// 返回jsonp格式数据
out.flush();
out.close();
}catch (Exception e) {
// TODO: handle exception
}
}
}
JSONP的优缺点:
JSONP只支持get请求不支持psot请求
后台Http请求转发
使用HttpClinet转发进行转发
使用接口网关
使用nginx转发。