使用Ajax解析数据遇到的问题

Posted 2020-10-22 OverZeal

数据格式

我最近在使用JQuery的$.ajax访问后台的时候，发现竟然无法解析返回的数据，具体的错误记不清了(以后在遇到问题先截个图)，可以在浏览器的Console中看到一个错误，但是去看这条请求是有数据返回的，所以刚开始我一直以为是Ajax写的不对，但是这个Ajax也并不是很复杂，实在搞不懂了。

还好这个url可以通过get方式访问，所以我当时直接在浏览器地址栏访问，发现是有数据返回的，但是这个数据的方式很奇怪，因为现在的浏览器都会对JSON数据进行格式化显示，但是这段数据的格式并非JSON的显示样式，反而是XML的方式显示的，这就奇怪了，明明说的都是通过JSON格式交互的，这是什么情况？我看后台代码之后发现他们使用的是@RestController (springMVC 的 org.springframework.web.bind.annotation.RestController)注解，而不是使用的@ResponseBody (使用RestController会告诉SpringMVC使用信息转换器，就可以不使用@ResponseBody注解，而是SpringMVC通过请求头的Accept属性判断，而有些时候这个值会是application/xml，所以会生成XML格式数据)，我先没有修改这些后台代码，而是将JQuery中Ajax的dataType属性(dataType属性可以手动设置为json)指定为json，这些数据就可以正常被解析了。

唉，之后写Ajax还是可以加上dataType属性吧。后来，我修改后台代码，设置response的ContentType (使用response.setContentType(type))为application/json;charset=utf-8也是可以被前端正常解析的(哪怕不使用dataType)。

        $.ajax({
            url:\'\',
            type:\'get\',
            //设置Accept 预期服务器返回的数据类型
            dataType:\'json\',
            //contentType 可以指定发送给服务器的数据格式
            contentType:\'application/json;charset=utf-8\',
            data:{}
        });

跨域问题

因为有些数据是需要访问其他的应用才可以获得的，所以就涉及到跨域的问题，处理跨域的问题有两种：

第一种：使用JSONP来处理跨域问题，只需要将dataType设置为jsonp即可（只支持GET方式的请求，因为其底层使用的的是js添加script标签，并设置script的src属性值，所以只能是GET方式）

 $.ajax({
        url: \'http://localhost:8080/testJsonp\',
        dataType: "jsonp",
        success: function (data) {
            console.log(data)
        }
    })

这种方式不用修改后台的代码，但是并不一定可以100%解决跨域问题，现象就是：请求响应都很正常（200），而且在浏览器调试工具中也有数据返回，就是拿不到数据，还会报一个数据格式不正确（是多一个还是少一个，号的问题）这个时候需要使用CORS方式。

如果数据量过大，使用GET方式就不太好了，因为URL长度有限制，这个时候也需要使用CORS方式

方法二：CORS，跨域资源共享。修改后台的代码，添加响应头

  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,OPTIONS");
  response.setHeader("Access-Control-Allow-Credentials", "true");

这种方式可以解决绝大部分跨域问题，但是就是需要修改后台代码