ajax跨域问题的几种方法

在使用ajax的时候,浏览器会对调用的地址做限制。只有在相同协议、相同域名、相同端口的情况下才能调用成功。
例如,一个网页是http://www.abc.com/abc.html,在这个页面上,下面的ajax调用将不会成功:
(1)https://www.abc.com/*(*表示任意的字母或斜线)(由于使用了不同的协议)
(2)http://www.abcd.com/* 或 http://www1.abc.com/*(由于不是相同的域名。一级域名相同,二级或以下域名不相同,也会被认为是不同的域名)
(3)http://www.abc.com:8080/* (由于端口不同)

可以使用以下几种方法来解决ajax跨域问题。
我们使用a.test.com和b.test.com 2个域名。b.test.com下的html页面使用ajax方式调用a.test.com下的接口。
打开eclipse,新建1个dynamic web project,工程名为crossSite,当作a.test.com。新建1个tomcat server。
再建一个static web project,工程名为crossSite2,当作b.test.com。
使用nginx给2个域名做反向代理。在nginx里做如下配置:

	server {
		listen 			80;
		server_name 	a.test.com;
		location	/ {
						proxy_pass 		http://localhost:8080/crossSite/;
					}
	}

	server {
		listen 			80;
		server_name 	b.test.com;
		location		/ {
				root	crossSite2的存储目录\\WebContent\\;
				index	index.html;
		}
	}

修改本机的host文件,2个域名都指向127.0.0.1。
(1)jsonp
jsonp的原理基于以下:html页面里的script标签可以引用的地址不受限制。比如:http://b.test.com/index.html这个页面里可以包含script标签,它的src为”http://a.test.com/CrossSiteServlet”。
在crossSite工程里创建一个servlet,代码如下:


import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONObject;

/**
 * Servlet implementation class CrossSiteServlet
 */
@WebServlet("/CrossSiteServlet")
public class CrossSiteServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public CrossSiteServlet() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		String callback = request.getParameter("callback");
		Map<String, String> map = new HashMap<String, String>();
		map.put("id", "id1");
		map.put("name", "name1");
		JSONObject jsonObj = new JSONObject(map);
		String returnStr = callback + "(" + jsonObj.toString() + ")";
		response.getWriter().println(returnStr);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

当我们访问http://a.test.com/CrossSiteServlet?callback=callback,将返回如下的数据:callback({“id”:”id1″,”name”:”name1″}),即一个js函数名以及json格式的数据。

在crossSite2工程webContent目录下新建一个html页面:index.html。内容如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    $().ready(function () {
        $.ajax({
            type: "get",
            async: true,
            url: "http://a.test.com/CrossSiteServlet",
            data:{},
            dataType: "jsonp",
            jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
            success: function (json) {
                alert(json.id+" "+json.name);
            },
            error: function () {
                alert('fail');
            }
        });
    });
</script>
</head>
<body>
jsonp test
</body>
</html>

注意上面的jsonp后面的值为callback,这个值必须同上面servlet返回的js函数名一致。

(2)iframe
原理:在页面里嵌套一个iframe,这个iframe的src属性指向不同的域名,从而可以从这个iframe里获取到其它域名下的数据。
iframe也有跨域限制,正常情况下,b.test.com域名下的网页是不能访问它内部指向a.test.com域名的iframe里的内容的。
可以通过修改页面和iframe的document.domain属性,让它们都为一级域名test.com,这样就可以跨域访问了。
首先在crossSite2工程WebContent目录下新建index2.html,内容如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
	document.domain='test.com';
	function getData(){
		document.getElementById('ifrm1').src="http://a.test.com/IframeCrossSiteServlet";
		//setTimeout(function(){alert($("#ifrm1").contents().find("div1").text())}, 3000);
		setTimeout(function(){alert($(document.getElementById('ifrm1').contentWindow.document.body).find('#div1').text())}, 3000);
	}
</script>
</head>
<body>
<iframe id="ifrm1" name="ifrm1" style="display: none;"></iframe>

<button type="button" onclick="getData()">get data</button>
</body>
</html>

注意上面将document.domain修改为‘test.com’,如果去掉这句就会报错。

然后在crossSite工程里新建一个servlet:IframeCrossSiteServlet。代码如下:

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class IframeCrossSiteServlet
 */
@WebServlet("/IframeCrossSiteServlet")
public class IframeCrossSiteServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public IframeCrossSiteServlet() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.getWriter().append("<script type=\"text/javascript\">\r\n" +
				"document.domain='test.com';\r\n</script>

<DIV id=\"div1\">I am an iframe.</DIV>

");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

注意上面在doGet方法里,同样地将document.domain的值改为‘test.com’。

以上2种方法存在的问题:
1. jsonp只能使用get调用。即使在代码里改成post调用,实际上还是使用get调用。所以不够安全。
2. iframe只能在一级域名相同的情况下使用。如果一级域名不同,就不能使用了。

使用jquery和spring实现图片上传功能

步骤如下:

(1)在html中定义1个form表单

<form id=”picForm” name=”picForm” action=”uploadPic.htm” enctype=”multipart/form-data” method=”post”>
    <table>
        <tr>
            <td>
                <label>图片:</label>
            </td>
            <td>
                <input id="picUpload" name="picUpload" type="file">
            </td>
        </tr>
        <tr>
            <td colspan=”2″>
            <input type="button" onclick="uploadPic();" value="上传">
            </td>
        </tr>
    </table>
</form>

(2)定义js函数

function uploadPic(){
    if($("#picUpload").val()==''){
        alert("please select picture first!");
        return;
    }
    var data = new FormData();
    data.append('file', document.picForm.picUpload.files[0]);
    $.ajax({
        type: "POST",
        url: "uploadPic.htm",
        processData:false,
        contentType:false,
        data: data,
        success: function (data) {
            var obj = jQuery.parseJSON(data);
            var result = obj.result;
            if(result !="1"){
                alert("Uploade file fail");
            }
            else{
                alert("Uploade file succeed");

            }

        }
    });
}

注意上面的document.picForm.picUpload.files[0],这里,javascript是通过name属性来找元素的。

(3)服务器端配置

在spring的配置文件里加入以下内容。

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- one of the properties available; the maximum file size in bytes -->
    <property name="maxUploadSize" value="1000000"/>
</bean>

(4)服务器端代码

@Controller
public class MyController {

@RequestMapping("/uploadPic.htm")
@ResponseBody
public void uploadPic(ModelMap modelMap, HttpServletRequest req, HttpServletResponse res)
throws Exception {
      JSONObject json = new JSONObject();
      InputStream input = null;
      OutputStream output = null;
      try{
          MultipartHttpServletRequest multipartReq = (MultipartHttpServletRequest) req;
          MultipartFile rawFile = multipartReq.getFile("file");
          String rawFilename = rawFile.getOriginalFilename();
          String saveFileName = "d:\\"+rawFilename;
          input = rawFile.getInputStream();
          output = new BufferedOutputStream(new FileOutputStream(saveFileName));
          byte[] buffer = new byte[1024];
          int n = -1;
          while ((n = input.read(buffer)) != -1) {
              output.write(buffer, 0, n);
          }
          json.put("result", 1);
          res.setContentType("text/html;charset=utf-8");
          res.getWriter().write(json.toString());
      }
      catch(Exception e){
          json.put("result", 0);
          res.setContentType("text/html;charset=utf-8");
          res.getWriter().write(json.toString());
          return;
      }
      finally{
          input.close();
          output.close();
      }
   }
}