解决Ajax请求后台Servlet接口拿不到JSON数据问题
前端Ajax请求代码如下:
window.onload=function() { var url='http://127.0.0.1:8080/testpj/ErrorlogServlet'; $.ajax({ type : "GET", url : url, async: false, dataType: "jsonp", jsonp: "callback", beforeSend: function() {}, success : function(data) { alert('ok'); }, error : function() { alert('false'); } }); }
后台Servlet接口如下:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); response.setContentType("application/json"); JSONObject jsonObject = new JSONObject(); String callback = request.getParameter("callback"); String jsondata = "{\"logPath\":\"1\",\"success\":true}"; String res = callback + "(" + jsondata + ")"; PrintWriter out = null; try { out = response.getWriter(); out.write(res); } catch (IOException e) { e.printStackTrace(); } finally { if (out != null) { out.close(); } } }
先说JSON与JSONP:JSON(JavaScript Object Notation)是一种数据交换格式,而JSONP(JSON with Padding)是一个可以解决浏览器跨域问题的协议。
再说JSONP原理:由于浏览器同源策略,Ajax直接请求其他服务接口会存在跨域问题,但我们又会发现web页面调用js文件时则不受跨域问题影响(比如<script>、<img>、<iframe>),如果想通过web跨域访问数据就只能在服务端把数据装进js格式的文件里,供客户端调用。于是,JSONP协议出现了,该协议允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
最后谈谈Ajax与JSONP:上面客户端获取远程数据的方式看起来非常像Ajax,但其实并不一样,Ajax(Asynchronous Javascript and XML)核心是 JavaScript 对象XMLHttpRequest,通过这个对象,Javascript向服务器提出请求并处理响应而不阻塞用户。而JSONP的核心是动态添加<script>标签来调用服务器提供的js脚本。
本例中,前端代码因为使用到了JSONP,后台Servlet接口开始并没有加上callback参数,所以才出现前端Ajax请求拿不到JSON数据情况出现。