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在瀏覽器中工作，但不在節點中