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前端请求代码:

1. $.ajax({
2. type: "get",
3. async: false,
4. url: "http://192.168.2.229:8081/api/web_search_directnew.html",
5. dataType: "jsonp",
6. jsonpCallback: "receive", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
7. success: function(data) {
8. console.log(data)
9. },
10. error: function() {
11. alert('fail');
12. }
13. });
14. function receive(data){
15. }

java后台代码:

1. def index() {
2. def a = [:]
3. a.name = "张小白"
4. a.age = 12
5. a.sex = '男'
6. a = a as JSON
7. render params.callback + "('" + a + "')"
8. }

二、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代码:

1. $.ajax({
2. url: "http://192.168.2.229:8091/myTest/hellow/index",
3. type: "POST",
4. crossDomain: true,
5. dataType: "json",
6. success: function(result) {
7. alert(JSON.stringify(result));
8. },
9. error: function(xhr, status, error) {
10. alert(status);
11. }
12. });

服务器:

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)+")");
		}
	}