ajax通信をすると文字化けする

Question

###前提・実現したいこと
jqueryライブラリのccchartをjsonデータで受け取り、チャートを出力する

###発生している問題・エラーメッセージ
ajax通信でservletから返ってきたデータconsole.logで拾うと文字化けしている

{"config": {"title": "pie Chart","subTitle": "?(????)????","type": "pie","useVal": "yes","pieDataIndex": 1,"colNameFont": "100 18px 'Arial'","pieRingWidth": 80,"pieHoleRadius": 40,"textColor": "#888","bg": "#fff"},"data": [["??",2016], ["????",0], ["????",6], ["????????",4], ["????????",0], ["??????",0], ["??",3]]};

###jQuery

	$("#marketing-analisis").on("click",function(){
		$.ajax({
			type: "POST",
			url : "http://localhost:8080/PosSystem/SaleAnalysis",
			dataType: 'jsonp',
			//timeout:10000,
			success : function(data) {
				console.log(data);
				ccchart.init('chart_pie', data);
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				alert("リクエスト時になんらかのエラーが発生しました：" + textStatus +":\n" + errorThrown);
			}
		});
	});

###Servlet

package analysis;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.Statement;
import java.util.ArrayList;

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 javax.servlet.http.HttpSession;

import com.google.gson.Gson;


/**
 * Servlet implementation class SaleAnalysis
 */
@WebServlet(asyncSupported = true, urlPatterns = { "/SaleAnalysis" })
public class SaleAnalysis extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected Statement stmt = null;
	protected Connection con = null;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public SaleAnalysis() {
        super();
    }

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	@SuppressWarnings("unchecked")
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		int redWine = 0;
		int whiteWine = 0;
		int sparklingWhite = 0;
		int sparklingRed = 0;
		int rose = 0;
		int other = 0;
		Long liquor_id =(long) 0;
		HttpSession session = request.getSession(true);


		ArrayList<ArrayList<Long>>  saleTbl =
				new ArrayList<ArrayList<Long>>();
		saleTbl =  (ArrayList<ArrayList<Long>>) session.getAttribute("saletbl");//取れてる

		for(int i= 0;i<saleTbl.size();i++){
			liquor_id = saleTbl.get(i).get(2);

			if(liquor_id == 1){
				redWine = (int) (redWine+saleTbl.get(i).get(2));
			}else if(liquor_id == 2){
				whiteWine=(int) (whiteWine+saleTbl.get(i).get(2));
			}else if(liquor_id == 3){
				rose = (int) (rose+saleTbl.get(i).get(2));
			}else if(liquor_id == 4){
				sparklingWhite = (int) (sparklingWhite+saleTbl.get(i).get(2));
			}else if(liquor_id == 5){
				sparklingRed = (int) (sparklingRed+saleTbl.get(i).get(2));
			}else if(liquor_id == 6){
				other = (int) (other+saleTbl.get(i).get(2));
			}else{

			}
		}
		String graphValues ="{"
			+"\"config\": {"
		    +"\"title\": \"pie Chart\","
		    +"\"subTitle\": \"円(ドーナツ)チャート\","
		    +"\"type\": \"pie\","
		    +"\"useVal\": \"yes\","
		    +"\"pieDataIndex\": 1,"
		    +"\"colNameFont\": \"100 18px 'Arial'\","
		    +"\"pieRingWidth\": 80,"
		    +"\"pieHoleRadius\": 40,"
		    +"\"textColor\": \"#888\","
		    +"\"bg\": \"#fff\""
		    +"},"

			+"\"data\": ["
			+"[\"年度\",2016],"
			+" [\"赤ワイン\","+redWine+"],"
			+" [\"白ワイン\","+whiteWine+"],"
			+" [\"スパークリング白\","+ sparklingWhite+"],"
			+" [\"スパークリング赤\","+sparklingRed+"],"
			+" [\"その他ワイン\","+other+"],"
			+" [\"ロゼ\","+rose+"]"
			+"]"
			+"};";

		PrintWriter out = response.getWriter();
		Gson gson = new Gson();

	    String callback = request.getParameter("callback");//jsonp17....みたいな数字が入ってる
	    response.setHeader("Access-Control-Allow-Origin", "*");//これもないとダメかも

    	//String responseJson = "{\"data\":[" +graphValues+"]};";
    	//このcallbackを付けないと、JavaScript側でデータを受け取れない
    	out.println( callback + "(" + gson.toJson(graphValues) + ")");
	}
}

###レスポンスヘッダ部分

Access-Control-Allow-Orig...	*
Content-Length	
426
Content-Type	
text/javascript; charaset=utf-8;charset=ISO-8859-1
Date	
Mon, 21 Nov 2016 15:07:08 GMT
Server	
Apache-Coyote/1.1

###試したこと
Tomcatのserver.xmlのencoding部分を記述
特に変化なし

###補足情報(言語/FW/ツール等のバージョンなど)
Eclipse 4.5
Tomcat8
windows10

Answer 1

java側のresponse.setcontenttypeがprintwriterの前に書かれていないのが原因のようです。

Answer 2

javaは久方触っていないのであっているかわかりませんが、、

response.setContentType("application/json;charset=UTF-8");

とやったらどうなりますか？

Answer 3

java は全く分からないのにレスするのもなんですが・・・

Fiddler などのキャプチャツールを使って、生の応答を見たときどうなってますか？ 期待通りの応答が得られていますか？

success : function(data) の data は JSON 文字列ではなくて、JSON 文字列をパースした JavaScript オブジェクトになるはずですが console.log(data) で目的の結果が見られるのでしょうか？

Comments

[RyoM]

回答ありがとうございます！！
僕の勉強不足すぎて、質問の答えになっているかわからないのですが、
予定では目的のデータが送られてきていて、その部分の文字列が文字化けしてしまっているという状況です。

[退会済みユーザー]

ブラウザが IE、Firefox、Chrome の場合は Fiddler というキャプチャツールが使えるので、今後のためにもダウンロードして使えるようにすることをお勧めします。（IE の F12 開発者ツールでもキャプチャできますが Fiddler が使いやすいと思います）

Fiddler のお勧め
http://surferonwww.info/BlogEngine/post/2011/05/25/Recommendation-of-Fiddler.aspx

Fiddler はプロキシなので、起動すると（Firefox の場合は多少の設定が必要）ブラウザと Web サーバーの間でパケットをキャプチャして要求 / 応答の中身を見ることができます。

それを見れば、ブラウザから期待通りの要求が出ているか、Web サーバーから期待通りの応答が帰ってきているかを調べることができて、サーバー側 or クライアント側のどちらに問題があるかの切り分けが容易になります。

Web アプリの問題解決にはその切り分けから始めるのが有効だと思います。

[RyoM]

一応、firebugは使っているんですが、そちらの使い方も勉強してみたいと思います。

[退会済みユーザー]

キャプチャできるなら Fiddler でなくても何でもいいです。ブラウザから期待通りの要求が出ているか、Web サーバーから期待通りの応答が帰ってきているかを調べてください。