.jsonp跨域:jsonp跨域只支持get请求
1.可以使用script标签实现jsonp跨域
<script src="http://www.haohao.com?callback=showdata"></script>
callback是服务器获取回调函数的参数字段,showdata是在浏览器定义的方法,服务器会返回showdata(参数);也就是showdata函数的执行语句,浏览器接收到响应后会执行这个语句,那么也就相当于执行了showdata方法。
2.使用ajax实现jsonp跨域。
返回响应后,如果没有设置jsonpCallback会执行success方法,如果设置了,则会执行showdata方法(必须是window下的showdata方法,如果改方法在其他对象或函数里则不执行)然后执行success方法,
$.ajax({ url:"http://127.0.0.1:8888/", type : 'get', dataType: "jsonp", //指定服务器的返回类型 jsonp: "callback", //获取回调函数的参数名称 jsonpCallback:"showdata", //回调函数 success:function(res){ console.log(res); }, error : function (xhr){ console.log(xhr); } });
要实现jsonp跨域,需要服务器端的支持,服务器端需要根据参数获取到回调函数名称,然后返回该回调的执行语句,并传入返回的数据。
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 2 response.setCharacterEncoding("UTF-8"); 3 response.setContentType("text/html;charset=UTF-8"); 4 5 //数据 6 List<Student> studentList = getStudentList(); 7 8 9 JSONArray jsonArray = JSONArray.fromObject(studentList); 10 String result = jsonArray.toString(); 11 12 //前端传过来的回调函数名称 13 String callback = request.getParameter("callback"); 14 //用回调函数名称包裹返回数据,这样,返回数据就作为回调函数的参数传回去了 15 result = callback + "(" + result + ")"; 16 17 response.getWriter().write(result); 18 }
在服务器中跨域还需要设置响应头信息以支持跨域请求不被浏览器拦截
response.writeHead(200, { response.writeHead(200, { "access-control-allow-origin": "*", "access-control-allow-methods": "GET, POST, PUT, DELETE, OPTIONS", "access-control-allow-headers": "content-type, accept", 'Content-Type': 'text/plain' }); });