5

Question just like the title.

In command line, we can type:

curl -H "header_name: header_value" "http://example"

to navigate to http://example with a custom request header as shown above.

Q: If I need to write a JavaScript to do the same thing, how should I do?

var url = 'https://example';
var myRequest = new XMLHttpRequest();
myRequest.open('GET', url ,false);
myRequest.setRequestHeader('header-name','header-value');
myRequest.send();

I tried this code, there is no syntax error but the page didn't change. Hence, I don't really know if I modified the request header(s).

informatik01
  • 16,038
  • 10
  • 74
  • 104
Marvin Choi
  • 61
  • 1
  • 1
  • 3
  • There are lots of answers already on that question http://stackoverflow.com/questions/1268673/set-a-request-header-in-javascript – Vitaly Kulikov Mar 15 '16 at 14:53
  • @VitalyKulikov Thx for comment, I did some research before I post the question but seems they doesn't help. The answers in your link cant help. I shared my code in the question, hope it help. – Marvin Choi Mar 15 '16 at 14:58
  • You made a request, but you did nothing with response, that why page didn't change – Vitaly Kulikov Mar 15 '16 at 15:05
  • @VitalyKulikov Oh, I got your point. Actually, but I am pretty new to Javascript. I tried put `window.open(url)` at the end and nothing happend – Marvin Choi Mar 15 '16 at 15:15

1 Answers1

2

Here is how you can handle this:

var req = new XMLHttpRequest();
req.open('GET', 'http://example', true); //true means request will be async
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
     if(req.status == 200)
      //update your page here
      //req.responseText - is your result html or whatever you send as a response
     else
      alert("Error loading page\n");
  }
};
req.setRequestHeader('header_name', 'header_value');
req.send();
Vitaly Kulikov
  • 713
  • 3
  • 13
  • Thanks a lot, it helps me understand the use of XMLHttpRequest(). One more question, does it support adding a costumed requestheader? e.g. request header "x-api-key" which is normally appeared in every request header. – Marvin Choi Mar 15 '16 at 15:38
  • Yes, there is example in my answer `req.setRequestHeader('header_name', 'header_value');` – Vitaly Kulikov Mar 15 '16 at 15:40
  • 1
    I've tried your code using `window.location.href = url;` to update my page. The website is navigated to `url` however the request header doesn't apply. Am I using a wrong way to update the page? – Marvin Choi Mar 16 '16 at 07:49
  • When you call req.send(); request is sent with appropriate header. When you call window.location.href = url; another request is sent. You need to update your page inside this statement if(req.status == 200) with simple DOM change. As soon as you use this approach, your site starts to be a single page application. – Vitaly Kulikov Mar 16 '16 at 07:55
  • Thank you so much for clear explanation. As you mentioned `req.responseText` saves all message I got from the `GET` method from my `url`, I've tried `document.write(req.responseText)` . And the page update as my desired. – Marvin Choi Mar 16 '16 at 08:15
  • @MarvinChoi: Note if you are doing this cross-domain then you will need CORS enabled on the remote server. Check the browser console for any error messages if you're not getting any `responseText`. – SilverlightFox Mar 16 '16 at 08:49
  • @SilverlightFox That s a really good suggestion for me! Actually I am doing something cross server with aws. I just go through the CORS things, it really helps me understood the functionality behind. Thank you! – Marvin Choi Mar 16 '16 at 09:44