解决Ajax请求后台Servlet接口拿不到JSON数据问题

前端Ajax请求代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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数据情况出现。

 

posted @   ycyzharry  阅读(6791)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类

喜欢请打赏

扫描二维码打赏

支付宝打赏

点击右上角即可分享
微信分享提示