¿Qué quieren los navegadores para el encabezado Content-Type en las respuestas de json ajax?

Question

Estoy devolviendo un json que necesita ser manejado por javascript como la respuesta a una XMLHTTPRequest.

Si configuro el tipo de contenido de la respuesta como "texto/normal", todos los navegadores excepto Chrome lo aceptarán y lo pasarán a mi JS sin ningún problema. Sin embargo, Chrome ajustará la respuesta en

<pre style="word-wrap: break-word; white-space: pre-wrap;"> 

antes de pasarla a mi javascript.

Si configuro el tipo de contenido de la respuesta a la "correcta" "aplicación/json" todos los navegadores, pero Firefox lo aceptará y lo pasará a mi JS sin ningún problema. Sin embargo, Firefox pedirá guardar o abrir la respuesta como un archivo.

¿Cuál es el tipo de contenido correcto y entre navegadores?

Answer 1

Es posible resolver el problema mediante el análisis de la respuesta en el objeto JSON mediante el uso de jQuery funcion parseJSON - http://api.jquery.com/jQuery.parseJSON/

El parámetro se pasa a la función es la cadena objeto JSON, que se extrae de los datos de respuesta:

function AjaxResponse (data) { // AJAX post callback 
    var jsonResult = $.parseJSON(data.substring(data.indexOf("{"), data.lastIndexOf("}") + 1)); 
} 

Probado (además de cromo qué problema se solucionó) en FF e IE8 para el siguiente resultado JSON simple, para otros navegadores y respuestas más complejas no hay garantías ...

---

NOTA: el tipo de contenido que en este caso es text/plain o text/html Creo - He utilizado la siguiente función de ASP.Net MVC para devolver el resultado

ContentResult System.Web.Mvc.Controller.Content(string content); 

Cuando regresé el objeto JSON como

System.Web.Script.Serialization.JavaScriptSerializer jsonSerializer 
    = new System.Web.Script.Serialization.JavaScriptSerializer(); 
var jsonResponse = jsonSerializer.Serialize(
    new { IArticleMediaId = 0 
     , ImageUrl = Url.Content(fullImgPath) 
     }); 
return Content(jsonResponse); 

Answer 2

utilizo reemplazo en consecuencia, como a continuación:

this.jjAjaxFileUpload = function (inputFileId,inputTextSelector,viewImgSelector){ 
    $(this.selector).click(function(){ 
     if($("#"+inputFileId.replace("#", "")).val()==""){ 
      new jj("Chose a file at first").jjDialog(); 
      return; 
     } 
     $.ajaxFileUpload({ 
      url :'UploadServlet', 
      secureuri:false, 
      fileElementId:inputFileId.replace("#", ""), 
      dataType: 'JSON', 
      cache: false , 
      success: function(data){ 
       if(data!=null){ 
        data = data.replace('<pre style="word-wrap: break-word; white-space: pre-wrap;">',''); 
        data = data.replace('<PRE style="word-wrap: break-word; white-space: pre-wrap;">',''); 
        data = data.replace("<PRE>", '').replace("</PRE>", '').replace("<pre>", '').replace("</pre>", '').replace("upload/", '').replace("Upload/", ''); 
        data = data.replace("/", '').replace("/", '').replace("\\", ''); 
       }else{ 
        new jj('error.').jjDialog(); 
       } 
       $("#"+inputFileId.replace("#", "")).val('');      
       if(data!=""){ 
        if(data!="big"){ 
         $(inputTextSelector).val(data); 
         if(viewImgSelector!=null){ 
          $(viewImgSelector).attr('src','upload/'+data); 
         } 
        }else{ 
         new jj('Error : file is too big!!!').jjDialog(); 
        } 
       }else{ 
        new jj('error').jjDialog(); 
       } 
      } 
     }); 
    }); 
}; 

Tenga en cuenta que:

inputTextSelector es un campo de texto para almacenar el nombre del archivo subido

viewImgSelector es Identificación de una etiqueta img para una vista previa de imagen cargada.