XMLHttpRequest在浏览器中工作，但不在节点中

-2

我正在尝试对GitHub的API进行API调用。XMLHttpRequest在浏览器中工作，但不在节点中

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "https://api.github.com/search/users?q=mohamed3on"); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { 
     console.log(xhr.response); 
    } 
} 
xhr.send();

此代码在浏览器中运行时执行并返回JSON文件。

{ “TOTAL_COUNT”：1， “incomplete_results”：假， “项目”：[ { “登录”： “Mohamed3on”， “ID”：12295159， “avatar_url”： “https://avatars.githubusercontent.com/u/12295159?v=3” ， “gravatar_id”： “”， “URL”： “”， “html_url”： “https://github.com/Mohamed3on”， “followers_url”： “https://api.github.com/users/Mohamed3on/followers”， “following_url”： “https://api.github.com/users/Mohamed3on/following {/ other_user}”， “gists_url”：“https://api.github.com/users/Mohamed3on/gists {/ gist_id}”， “starred_url”：“https://api.github.com/users/Mohamed3on/starred {/所有者} {/回购}”， “subscriptions_url”： “https://api.github.com/users/Mohamed3on/subscriptions”， “organizations_url”： “https://api.github.com/users/Mohamed3on/orgs”， “repos_url”： “https://api.github.com/users/Mohamed3on/repos”， “events_url”： “https://api.github.com/users/Mohamed3on/events {/隐私}” ， “received_events_url”： “https://api.github.com/users/Mohamed3on/received_events”， “类型”： “用户”， “site_admin”：假， “得分”：49.68772 }]}

然而，当我运行在本地（ Webstorm或Node）

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; 
var xhr = new XMLHttpRequest(); 
xhr.open("GET", "https://api.github.com/search/users?q=mohamed3on"); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { 
     console.log(xhr.response); 
    } 
} 
xhr.send();

在控制台中没有输出任何内容。

来源

2016-12-24 Mohamed Oun

永远不要做同步请求，它被弃用，并且一个可怕的做法，使用'onreadystatechange'回调 – charlietfl

@charlietfl好的，我已经做到了。但它仍然不会在节点中产生输出。 –

为什么在节点中使用'XMLHttpRequest'？有更好的库进行请求 – charlietfl

您应该使用请求模块制造HTTP/HTTPS请求到服务器：

var request = require('request-promise'); 

var aUrl = "https://api.github.com/search/users"; 

var reqOptions = { 
    method: 'GET', 
    uri: aUrl, 
    qs: { 
    q: 'rohankanojia' 
    }, 
    headers: { 
    'user-agent': 'node.js' 
    }, 
    json: true 
}; 

request(reqOptions) 
    .then(function(parsedBody) { 
    console.log("Got response : "+JSON.stringify(parsedBody)); 
    }) 
    .catch(function(err) { 
    console.log("request failed : "+err); 
    });

而且，你不通过用户代理请求头。它工作正常，我的系统上：

[email protected]~/Documents/src : $ node request.js 
Got response : {"total_count":1,"incomplete_results":false,"items":[{"login":"rohanKanojia","id":13834498,"avatar_url":"https://avatars.githubusercontent.com/u/13834498?v=3","gravatar_id":"","url":"https://api.github.com/users/rohanKanojia","html_url":"https://github.com/rohanKanojia","followers_url":"https://api.github.com/users/rohanKanojia/followers","following_url":"https://api.github.com/users/rohanKanojia/following{/other_user}","gists_url":"https://api.github.com/users/rohanKanojia/gists{/gist_id}","starred_url":"https://api.github.com/users/rohanKanojia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rohanKanojia/subscriptions","organizations_url":"https://api.github.com/users/rohanKanojia/orgs","repos_url":"https://api.github.com/users/rohanKanojia/repos","events_url":"https://api.github.com/users/rohanKanojia/events{/privacy}","received_events_url":"https://api.github.com/users/rohanKanojia/received_events","type":"User","site_admin":false,"score":29.729874}]}

做在客户端相同：

<body> 
<script> 

function httpGet(theURL) { 
    var xmlHttp = new XMLHttpRequest(); 
    xmlHttp.open("GET", theURL); 
    xmlHttp.setRequestHeader("Content-Type", "application/json"); 
    xmlHttp.send(null); 


    xmlHttp.onreadystatechange = function() { 
    var response = null; 
    if(xmlHttp.readyState == XMLHttpRequest.DONE) { 
     response = xmlHttp.responseText; 
     document.getElementById("response").value = response; 
    } 
    }; 
} 

</script> 

<input id="clickMe" type="button" value="get Data" 
    onclick="httpGet('https://api.github.com/search/users?q=rohankanojia')" /> 

<br> 
Response : <input id="response" type="label"/> 
</body>

我希望帮助。

来源

2016-12-24 18:52:14

OP似乎试图在node.js中测试客户端代码。因此，重写代码以使用浏览器中不可用的node.js函数可能不是这个问题的关键。 – jfriend00

是@ jfriend00。我的项目主要处理Github API，我想我可以在客户端（与API交互，显示结果）做到这一点，而不需要后端，所以我宁愿所有的代码都在客户端。 –

嘿，它创建正常的http请求，但它必须是一个xmlHttpRequest，以便服务器可以识别请求的类型必须有某些标题 –

首先，node.js对于打算在浏览器中运行并使用任何浏览器功能而不属于ECMAScript标准的代码并不是一个好的测试环境。

XMLHttpRequest是一个浏览器功能。它不是Javascript的一部分，也不是node.js的一部分。因此，试图在使用XMLHttpRequest的node.js中运行代码根本无法工作，因为该对象不存在。

node.js有http.get()（在http模块中）可以执行HTTP请求，但由于浏览器中不存在，如果您将代码更改为在node.js中运行，那么它将不会运行在浏览器中。

有一个XMLHttpRequest库将实现在node.js中该对象的node.js，但如果你正在写原生代码的Node.js，有好得多的方式来发出HTTP请求，如request()库。

如果您确实想要测试打算在浏览器中运行的代码并使用特定于浏览器的功能，那么您可能应该在浏览器本身中测试该代码，或者使用专用于模拟浏览器的特定产品测试环境。否则，您可能需要进行修改才能使浏览器特定的内容在node.js中运行，然后您不会测试相同的确切代码。

来源

2016-12-25 07:55:47 jfriend00

我应该从一开始就使用节点吗？ –

@MohamedOun - 完全取决于您的应用程序。如果你不需要浏览器，那么是的，使用节点。 – jfriend00

XMLHttpRequest在浏览器中工作，但不在节​​点中

回答

相关问题

XMLHttpRequest在浏览器中工作，但不在节点中