# Making HTTP Requests in JavaScript | kirupa.com

**URL:** <https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636>\
**Category:** programming\
**Created:** [August 21, 2015, 6:48am UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636 "2015-08-21T06:48:53Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 21, 2015, 6:48am UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/1 "2015-08-21T06:48:53Z")

</div>

by [kirupa](http://www.kirupa.com/me/index.htm) | 20 August 2015

As you probably know very well by now, the internet is made up of a bunch of interconnected computers called servers. When you are surfing the web and navigating between web pages, what you are really doing is telling your browser to request information from any of these servers. It kinda looks as follows: your browser sends a request, waits awkwardly for the server to respond to the request, and (once the server responds) processes the request. All of this communication is made possible because of something known as the **HTTP protocol**.

* * *
This is a companion discussion topic for the original entry at [http://www.kirupa.com/html5/making\_http\_requests\_js.htm](http://www.kirupa.com/html5/making_http_requests_js.htm)

---

<div class="post-metadata">

**Author:** ![Naguib\_Ihab](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/naguib_ihab/32/8731_2.png) [@Naguib\_Ihab](https://forum.kirupa.com/u/Naguib_Ihab)\
**Post date:** [October 9, 2017, 3:45am UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/2 "2017-10-09T03:45:04Z")

</div>

Pretty good and easy to follow. Thanks Kirupa

---

<div class="post-metadata">

**Author:** ![dagoeos](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/dagoeos/32/9046_2.png) [@dagoeos](https://forum.kirupa.com/u/dagoeos)\
**Post date:** [April 2, 2018, 6:41am UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/3 "2018-04-02T06:41:55Z")

</div>

Is there any particular reason to use JSON.parse(responseText) over JSON.parse(response). Can you elaborate on this a bit?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 2, 2018, 4:05pm UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/4 "2018-04-02T16:05:55Z")

</div>

@dagoeos The `response` property may be one of many different data types including, but not limited to a string. Using `responseText` makes it clear that you’re after the text version of the data, even though it will likely be the same value as `response` in this case.

That being said, a valid response type is “json” which is our target format for this data, so if we wanted to have that parsing happen automatically, we could set the `responseType`, skip `JSON.parse`, and pull directly from `xhr.response`.

```auto
var xhr = new XMLHttpRequest();
xhr.responseType = "json"; // xhr.response will be parsed into a JSON object
xhr.open('GET', "https://ipinfo.io/json", true);
xhr.send();
 
xhr.onreadystatechange = processRequest;
 
function processRequest(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.response.ip); // no parsing needed
    }
}

```

---

<div class="post-metadata">

**Author:** ![dagoeos](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/dagoeos/32/9046_2.png) [@dagoeos](https://forum.kirupa.com/u/dagoeos)\
**Post date:** [April 2, 2018, 4:12pm UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/5 "2018-04-02T16:12:17Z")

</div>

It’s a good addition, thanks.

---

<div class="post-metadata">

**Author:** ![Brandon\_J\_Powell](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/brandon_j_powell/32/9197_2.png) [@Brandon\_J\_Powell](https://forum.kirupa.com/u/Brandon_J_Powell)\
**Post date:** [July 9, 2018, 12:35am UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/6 "2018-07-09T00:35:59Z")

</div>

When I run my HTTP requests getting message in my console that says. XMLHttpRequest cannot load [https://medium.com/@aaron.klaser/latest?format=json](https://medium.com/@aaron.klaser/latest?format=json). No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘[http://localhost:3000](http://localhost:3000)’ is therefore not allowed access. The response had HTTP status code 401.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 10, 2018, 9:52pm UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/7 "2018-07-10T21:52:52Z")

</div>

You are running into CORS-related issues: [https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) Were you able to resolve this?

---

<div class="post-metadata">

**Author:** ![joshgabriel](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joshgabriel/32/9203_2.png) [@joshgabriel](https://forum.kirupa.com/u/joshgabriel)\
**Post date:** [July 14, 2018, 6:54pm UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/8 "2018-07-14T18:54:53Z")

</div>

This is a really good post. I have a scenario where I want to post a GET request but with a query, much like using the requests package in python. Is it possible to do this by adding some argument to the open()?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 15, 2018, 8:01pm UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/9 "2018-07-15T20:01:39Z")

</div>

Can you post an example of the full query you would like to make?

---

<div class="post-metadata">

**Author:** ![joshgabriel](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joshgabriel/32/9203_2.png) [@joshgabriel](https://forum.kirupa.com/u/joshgabriel)\
**Post date:** [July 15, 2018, 8:52pm UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/10 "2018-07-15T20:52:07Z")

</div>

Here is a template of what I am trying to do (want to translate this python code to Javascript)

$res =requests.get(‘url\_api’,params={‘code’:‘vasp’}  
$data =pd.read\_json(res.content.decode(‘utf-8’))

#this is downloading the content of a request into a python pandas dataframe object. I have heard of a Javascript package d3, but is there a way to do this by modifying your code above? Thanks.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 16, 2018, 6:11pm UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/11 "2018-07-16T18:11:20Z")

</div>

Do you know what the actual request looks like? For example, is it something like: [foo.com/api.ashx?code=vasp](http://foo.com/api.ashx?code=vasp)

It should be straightforward to translate once that detail is known 🙂

---

<div class="post-metadata">

**Author:** ![joshgabriel](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joshgabriel/32/9203_2.png) [@joshgabriel](https://forum.kirupa.com/u/joshgabriel)\
**Post date:** [July 16, 2018, 6:56pm UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/12 "2018-07-16T18:56:17Z")

</div>

Yes that is right. That is how the end point looks like.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 16, 2018, 8:22pm UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/13 "2018-07-16T20:22:20Z")

</div>

Then the approach described in the tutorial should work fine. Sen’s [variation here](http://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/4?u=kirupa) will also work if the result will be in JSON format 🙂

---

<div class="post-metadata">

**Author:** ![zkhkoku](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/zkhkoku/32/10900_2.png) [@zkhkoku](https://forum.kirupa.com/u/zkhkoku)\
**Post date:** [August 29, 2019, 1:40am UTC](https://forum.kirupa.com/t/making-http-requests-in-javascript-kirupa-com/633636/14 "2019-08-29T01:40:09Z")

</div>

Good article, very clear and easy to follow, thank you!