从 AJAX 命令返回 JSON 响应答案

【问题标题】：Return response in JSON from AJAX command从 AJAX 命令返回 JSON 响应
【发布时间】：2015-03-29 18:53:12
【问题描述】：

如何让原生 javascript AJAX 以 JSON 而不是“HTML 上的文本”返回响应？

说明：在 jquery 中，下面的 AJAX 函数返回 JSON 数据，这正是我们所需要的。

JQUERY 代码

 //ajax Handler function through which I set default attribute and send request function defined separately to send request to server 
ajaxHandler = {
  defaultAttributes: {
    type: 'GET',
    url: 'index.php/request',
    datatype: 'json',
    data: {},
    success: null,
    error: function(data) {
      errorHandler.showError('An Error occurred while trying to retreive your requested data, Please try again...');
    },
    timeout: function() {
      errorHandler.showError('The request has been timed out, Please check your Internet connection and try again...');
    }
  },
  sendRequest: function(attributes) {
    //i perform here through jquery 
    $.ajax(attributes);
  }

现在，代码更改为原生 javascript AJAX，我在其中发出“application/json;charset=UTF-8”请求，我以“HTML 上的文本”而不是 JSON 形式获得响应。

本地 JAVASCRIPT

var xmlhttp = new XMLHttpRequest();
                                xmlhttp.onreadystatechange = function () {
                                        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
          attributes.success(attributes.data);
                                        }
                                }
                                xmlhttp.open(attributes.type, attributes.url);
                                xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
                                xmlhttp.send((attributes.data));

在 Chrome 开发人员工具中比较两者，在网络选项卡下，这是我从 Jquery AJAX 得到的：

Remote Address:127.0.0.1:80
Request URL:http://localhost/1412-DressingAphrodite/Webapp/index.php/request/getallfeatures
Request Method:GET
Status Code:200 OK
Request Headersview source
Accept:/
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Cookie:PHPSESSID=tivt0hi9oqtbtjem7m9d0emhr1
Host:localhost
Pragma:no-cache
Referer:http://localhost/1412-DressingAphrodite/Webapp/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/39.0.2171.65 Chrome/39.0.2171.65 Safari/537.36
X-Requested-With:XMLHttpRequest
Response Headersview source
Connection:Keep-Alive
Content-Type:application/json; charset="UTF-8"
Date:Fri, 30 Jan 2015 04:43:07 GMT
Keep-Alive:timeout=5, max=18
Server:Apache/2.4.10 (Ubuntu)
Transfer-Encoding:chunked
X-Powered-By:PHP/5.5.12-2ubuntu4.1

这是我在 Native Javscript AJAX 中得到的：

Remote Address: 127.0.0.1:80
Request URL: http://localhost/1412-Dre/Webapp/index.php/request/getallfeatures
Request Method: GET
Status Code: 403 Forbidden
Request Headersview source
Accept: /
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
Cache-Control: no-cache
Connection: keep-alive
Content-Type: application/json;charset=UTF-8
Cookie: PHPSESSID=tivt0hi9oqtbtjem7m9d0emhr1
Host: localhost
Pragma: no-cache
Referer: http://localhost/1412-Dre/Webapp/ User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/39.0.2171.65 Chrome/39.0.2171.65 Safari/537.36
Response Headersview source
Connection: Keep-Alive
Content-Length: 1063
Content-Type: text/html
Date: Fri, 30 Jan 2015 06:40:26 GMT
Keep-Alive: timeout=5, max=90
Server: Apache/2.4.10 (Ubuntu)
X-Powered-By: PHP/5.5.12-2ubuntu4.1

请注意 1063 的“内容长度”值。我不确定这是否是问题所在。所以，重复一遍，我怎样才能让原生 javascript AJAX 以 JSON 格式返回响应，而不是“HTML 上的文本”？

【问题讨论】：

您请求的不是同一个 URL。这可能是问题所在？
@cellik，不，我更改了链接以进行编辑。 jQuery 和原生 js 代码的 URL 相同。
我不确定你的意思，你只会得到一个需要解析的文本，比如JSON.parse。如果您设置数据类型，JQuery 会自动执行此操作

标签： javascript jquery ajax response

【解决方案1】：

你可以试试responseType

xmlhttp.responseType = 'json'

但首先检查浏览器支持。

More info

【讨论】：

【解决方案2】：

如果您的响应是有效的 JSON，请尝试以下操作：

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        var jsonResponse = JSON.parse(xmlhttp.responseText);

        console.log(jsonResponse);
    }
}

【讨论】：

【解决方案3】：

从服务器收到 json 文本后，您始终可以执行以下操作：

var jsonStr = "<<your_json_string_response>>";
var jsonObject = eval('('+jsonStr+')');

【讨论】：