一、使用jsonp实现跨域请求
在前端开发这中你会发现，所有带src属性的标签都可以跨域访问其他服务器文件。jsonp实现的原理也是如此。
以jsonp的数据类型进行请求时，JQ会动态在页面中添加script标签，将请求内容放置到src中。
jsonp类型请求数据时，无法使用post方式（你会发现，在JQ中即使你将type设置为POST方式，JQ也会将其转换为get方式请求）。
jsonp方式请求不支持修改头部信息参数。服务器端数据返回也需要做相应的处理，返回的数据必须是一个JS代码。Jsonp请求时，设置jsonpCallback参数假设为reciver，服务器处理数据返回格式类似于reviver('datas need retun ')，请求成功后，会自动调用前端reciver方法。
JQ前端请求代码:
- $.ajax({
- type: "get",
- async: false,
- url: "http://192.168.2.229:8081/api/web_search_directnew.html",
- dataType: "jsonp",
- jsonpCallback: "receive", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
- success: function(data) {
- console.log(data)
- },
- error: function() {
- alert('fail');
- }
- });
- function receive(data){
- }
java后台代码:
- def index() {
- def a = [:]
- a.name = "张小白"
- a.age = 12
- a.sex = '男'
- a = a as JSON
- render params.callback + "('" + a + "')"
- }
二、Access-Control-Allow-Origin
服务器端在返回资源的时候，指定这个资源能被哪些域所访问。如response.addHeader( "Access-Control-Allow-Origin", "http://192.168.2.229:8020" );指定http://192.168.2.229:8020可以进行跨域访问该资源，若不限制，则改成*
浏览器限制：Chrome 3+，Firefox 3.5+，Opera 12+，Safari 4+，IE 8+
js代码:
- $.ajax({
- url: "http://192.168.2.229:8091/myTest/hellow/index",
- type: "POST",
- crossDomain: true,
- dataType: "json",
- success: function(result) {
- alert(JSON.stringify(result));
- },
- error: function(xhr, status, error) {
- alert(status);
- }
- });
服务器:
response.addHeader( "Access-Control-Allow-Origin", "http://192.168.2.229:8020" )
我自己尝试之后的代码，可供参考：
js代码
function sub(){
var uname = $("#uname").val();
var upass = $("#upass").val();
var url = "/system/do_login1.htm";
$.ajax({
type: "POST",//请求方式
url: url,
dataType:"jsonp",
jsonp:"jsonpCallback",
data: {
"uname": uname,
"upass": upass
},
success : function(msg) {
alert(msg)
},
});
}
后台代码
@RequestMapping("/system/do_login1.htm")
public void isUser(HttpServletRequest request,HttpServletResponse response,
ModelMap map,String uname,String upass) throws Exception{
TSysUser sysUser = sysUserManager.getSysUserByLogin(uname, upass);
Gson gson = new Gson();
String jsonpCallback = request.getParameter("jsonpCallback");
if(sysUser != null){
String massage = "验证成功";
response.getWriter().print(jsonpCallback+"("+gson.toJson(massage)+")");
}else{
String massage = "用户名或密码错误";
response.getWriter().print(jsonpCallback+"("+gson.toJson(massage)+")");
}
}