ajax实现跨域访问的两种方式

一、使用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)+")");
		}
	}