Set Content Type to JSON causes open a download dialog display rather than populate into Data Table

Hello to all, I had set Content Type to JSON from Java Servlet causes open a download dialog display rather than populate into Data Table.What is the reason causes this error? I debug it using the firebug and nothing seems weird from there. The content type is application/json. I tested the function using Google Chrome, IE and Mozilla.

Another question is when first load the page, it make two requests to server. Why is the error?

JSP

<script type="text/javascript" charset="utf-8">

$(document).ready(function()
{

	$("#ticketList").dataTable({
		
		"bProcessing" : true,						// Enable processing indicator
		"bServerSide" : true,						// Configure data option - server or client 
													// Send XHR request to server
		"sServerMethod": "POST",						// GET or POST
		"bSort" : true,								// Enable sorting
		"bFilter" : false,
		"bAutoWidth" : true,			
		"sPaginationType" : "full_numbers",			// Paginate Type -> two_button (Previous && Next)
													// 				 -> full_numbers (First, Previous, 1, 2, Next, Last)		
		"bLengthChange" : true, 
		"iDisplayLength" : 10, 
		"sAjaxSource" : "${context}/app.view?tn=Ticket.SearchTicket", 
		// Override $.getJson() get data from server
		/*"fnServerData": function(sSource, aoData, fnCallback) {
            $.ajax({ "dataType": 'json',
                "type": "GET",			// GET or POST to server for getting data
                "url": sSource,
                "data": aoData,
                "success": fnCallback,
                "error": function(jqXHR, textStatus, errorThrown) {
                    console.log(txtStatus, errorThrown); 	// use alert() if you prefer
                }
            });
		 },  */ 

		"aoColumns": [
		      			//mData mDataProp
                      	{"mDataProp": "id"}, 
                      	{"mDataProp": "category"}, 
                      	{"mDataProp": "status"}, 
                        {"mDataProp": "assignee"}, 
                        {"mDataProp": "urgency"}, 
                        {"mDataProp": "action"}
                     ]
        /*
        "fnRowCallBack" : function( nRow, aData, iDisplayIndex) {
			// oTable.fnUpdate( newValue, rowPos, columnPos);
        }*/
	});
});

</script>
<div class="clear" id="content">		
	<div class="box">
		<em>Search Ticket </em>	
		<div class="data">
			<div class="fb clear">
				<form id="searchTicketForm" name="searchTicketForm" action="${context}/app.view?tn=Ticket.SearchTicket" method="POST">
					<fieldset>
						<div class="field"> 
							<label>Ticket Id:</label>
							<input type="text" id="id" name="id"></input>
						</div>
						<div class="field"> 
							<label>Category:</label>
							<select id="category" name="category">
								<option value="account">Account</option>
								<option value="invoice" selected="selected">Invoice</option>
								<option value="rates">Rates</option>
								<option value="">No category</option>
							</select>
						</div>
						<div class="field"> 
							<label>Urgency:</label>
							<select id="urgency" name="urgency">
								<option value="high">High</option>
								<option value="medium" selected="selected">Medium</option>
								<option value="low">Low</option>
								<option value="">No urgency</option>
							</select>
						</div>
						<div class="field"> 
							<label>Status:</label>
							<select id="status" name="status">
								<option value="unassigned" selected="selected">Unassigned</option>
								<option value="in_progress">In Progress</option>
								<option value="solved">Solved</option>
								<option value="">No Status</option>
							</select>
						</div>				
						<div class="clear"></div>
						<div id="error" class="field"></div>
						<div class="field">
							<button class="dark" id="searchBtn" type="submit" name="search">Search Ticket</button>
						</div>
						
					  </fieldset>
				</form>
			</div>
		</div>
		<div class="data">
			<div id="ticketList_wrapper" class="dataTables_wrapper">
				<c:if test="${not empty tableView}">
					<div id="ticketList_length" class="dataTables_wrapper">
						
					</div>
					
					<!-- <form name="searchUserForm" action="${context}/app.view?tn=Ticket.SearchTicket" method="POST"> -->
						<table id="ticketList" class="display" cellspacing="0" cellpadding="0" border="0">
							<thead>
								<tr>
									<th class="sorting"><b>Ticket ID</b></th>
									<th class="sorting_disabled"><b>Category</b></th>
									<th class="sorting_disabled"><b>Urgency</b></th>
									<th class="sorting_disabled"><b>Status</b></th>
									<th class="sorting_disabled"><b>Assignee</b></th>
									<th class="sorting_disabled"><b>Action</b></th>
								</tr>		
							</thead>
							
							<tbody>
								<tr>
									<td colspan="5" class="dataTables_empty" align="center">Loading data from server</td>
								</tr>
							</tbody>
						</table>
					<!-- </form> -->
				</c:if>
			</div>
		</div>
       </div>
</div>	

JAVA Servlet

JSONObject jsonObject = convertObject(ticketList);
taskResponse.setResponseText(jsonObject.toString());
response.setContentType("application/x-json");
response.getWriter().print(taskResponse.getResponseText());

Please help. Thanks.