XMLHttpRequest object not correctly returning its parameters
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm currently trying to create a chat bot through Azure within an Ionic mobile application. I already have the chat bot up and running successfully within the application, but the unique identifier for the bot (secret, I believe it's called) is directly attached to the bot's site URL, meaning any user can access this bot if they access this secret.
<iframe id="chat" style="width: 400px; height: 400px;" src='BOT_URL_AND_SECRET'></iframe>
I decided to try a different approach that I found online that utilizes an XMLHttpRequest object to retrieve a token and places my bot's secret in the header. This way, I can use the XMLHttpRequest object's readyState and status to access the bot without the user ever seeing the bot's secret.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
xhr: any;
constructor() {
this.xhr = new XMLHttpRequest();
this.xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
this.xhr.setRequestHeader('Authorization', 'BotConnector ' + 'BOT SECRET VALUE');
this.xhr.send();
if (this.xhr.readyState == 4 && this.xhr.status == 200) {
...
}
}
}However, the body of code within the if statement is never run. I did a console.log to check xhr's readyState and status values, but turns out, they are 1 and 0, respectively. Moreover, I expanded xhr's object in the console, and the readyState is 4 and the status is 200.
My question now is: how come the XMLHttpRequest object contains the parameters (i.e. readyState and status) that I need to use to provide the full URL to the HTML file, but when I try to access them, I get incorrect information?
html typescript
azure xmlhttprequest asked Jan 3 at 22:27
BosiesBosies
61
add a comment |
I'm currently trying to create a chat bot through Azure within an Ionic mobile application. I already have the chat bot up and running successfully within the application, but the unique identifier for the bot (secret, I believe it's called) is directly attached to the bot's site URL, meaning any user can access this bot if they access this secret.
<iframe id="chat" style="width: 400px; height: 400px;" src='BOT_URL_AND_SECRET'></iframe>
I decided to try a different approach that I found online that utilizes an XMLHttpRequest object to retrieve a token and places my bot's secret in the header. This way, I can use the XMLHttpRequest object's readyState and status to access the bot without the user ever seeing the bot's secret.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
xhr: any;
constructor() {
this.xhr = new XMLHttpRequest();
this.xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
this.xhr.setRequestHeader('Authorization', 'BotConnector ' + 'BOT SECRET VALUE');
this.xhr.send();
if (this.xhr.readyState == 4 && this.xhr.status == 200) {
...
}
}
}However, the body of code within the if statement is never run. I did a console.log to check xhr's readyState and status values, but turns out, they are 1 and 0, respectively. Moreover, I expanded xhr's object in the console, and the readyState is 4 and the status is 200.
My question now is: how come the XMLHttpRequest object contains the parameters (i.e. readyState and status) that I need to use to provide the full URL to the HTML file, but when I try to access them, I get incorrect information?
html typescript
azure xmlhttprequest asked Jan 3 at 22:27
BosiesBosies
61
add a comment |
I'm currently trying to create a chat bot through Azure within an Ionic mobile application. I already have the chat bot up and running successfully within the application, but the unique identifier for the bot (secret, I believe it's called) is directly attached to the bot's site URL, meaning any user can access this bot if they access this secret.
<iframe id="chat" style="width: 400px; height: 400px;" src='BOT_URL_AND_SECRET'></iframe>
I decided to try a different approach that I found online that utilizes an XMLHttpRequest object to retrieve a token and places my bot's secret in the header. This way, I can use the XMLHttpRequest object's readyState and status to access the bot without the user ever seeing the bot's secret.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
xhr: any;
constructor() {
this.xhr = new XMLHttpRequest();
this.xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
this.xhr.setRequestHeader('Authorization', 'BotConnector ' + 'BOT SECRET VALUE');
this.xhr.send();
if (this.xhr.readyState == 4 && this.xhr.status == 200) {
...
}
}
}However, the body of code within the if statement is never run. I did a console.log to check xhr's readyState and status values, but turns out, they are 1 and 0, respectively. Moreover, I expanded xhr's object in the console, and the readyState is 4 and the status is 200.
My question now is: how come the XMLHttpRequest object contains the parameters (i.e. readyState and status) that I need to use to provide the full URL to the HTML file, but when I try to access them, I get incorrect information?
html typescript
azure xmlhttprequest asked Jan 3 at 22:27
BosiesBosies
61
I'm currently trying to create a chat bot through Azure within an Ionic mobile application. I already have the chat bot up and running successfully within the application, but the unique identifier for the bot (secret, I believe it's called) is directly attached to the bot's site URL, meaning any user can access this bot if they access this secret.
<iframe id="chat" style="width: 400px; height: 400px;" src='BOT_URL_AND_SECRET'></iframe>
I decided to try a different approach that I found online that utilizes an XMLHttpRequest object to retrieve a token and places my bot's secret in the header. This way, I can use the XMLHttpRequest object's readyState and status to access the bot without the user ever seeing the bot's secret.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
xhr: any;
constructor() {
this.xhr = new XMLHttpRequest();
this.xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
this.xhr.setRequestHeader('Authorization', 'BotConnector ' + 'BOT SECRET VALUE');
this.xhr.send();
if (this.xhr.readyState == 4 && this.xhr.status == 200) {
...
}
}
}However, the body of code within the if statement is never run. I did a console.log to check xhr's readyState and status values, but turns out, they are 1 and 0, respectively. Moreover, I expanded xhr's object in the console, and the readyState is 4 and the status is 200.
My question now is: how come the XMLHttpRequest object contains the parameters (i.e. readyState and status) that I need to use to provide the full URL to the HTML file, but when I try to access them, I get incorrect information?
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
xhr: any;
constructor() {
this.xhr = new XMLHttpRequest();
this.xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
this.xhr.setRequestHeader('Authorization', 'BotConnector ' + 'BOT SECRET VALUE');
this.xhr.send();
if (this.xhr.readyState == 4 && this.xhr.status == 200) {
...
}
}
}import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
xhr: any;
constructor() {
this.xhr = new XMLHttpRequest();
this.xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
this.xhr.setRequestHeader('Authorization', 'BotConnector ' + 'BOT SECRET VALUE');
this.xhr.send();
if (this.xhr.readyState == 4 && this.xhr.status == 200) {
...
}
}
}html typescript
azure xmlhttprequest html typescript
azure xmlhttprequest asked Jan 3 at 22:27
BosiesBosies
61
asked Jan 3 at 22:27
BosiesBosies
61
asked Jan 3 at 22:27
BosiesBosies
61
asked Jan 3 at 22:27
BosiesBosies
61
asked Jan 3 at 22:27
BosiesBosies
61
61
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Time! 🕐
You are testing them before the request has been sent (but looking at them in the console much later).
You need to wait for the ready state to change.
this.xhr.addEventListener("readystatechange", handler);
function handler(event) {
if (this.readyState == 4 && this.status == 200) {
// ....
}
}
There's no need to test that manually though. Modern browsers support a load event.
this.xhr.addEventListener("load", handler);
function handler(event) {
// ....
}
answered Jan 3 at 22:33
QuentinQuentin
658k728951057
I currently have everything regarding the XMLHttpResponse object inside the constructor, so instead of creating a separate handler function, I created an anonymous function within the addEventListener method. I think this should work, but instead I get this error in the console: "ERROR TypeError: Cannot read property 'readyState' of undefined".
– Bosies
Jan 4 at 15:01
@Bosies — Different function. Different value ofthis. Use theloadevent.
– Quentin
Jan 4 at 15:04
I'm currently doing this:this.xhr.addEventListener("load", function( ) { ... });
– Bosies
Jan 4 at 15:34
@Bosies — Then you shouldn't need to touchreadyState
– Quentin
Jan 4 at 15:36
You're right, I'm not trying to, but whenever I run theaddEventListenerfunction above, I'm getting the console error mentioned earlier.
– Bosies
Jan 4 at 15:41
|
show 4 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54030671%2fxmlhttprequest-object-not-correctly-returning-its-parameters%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Time! 🕐
You are testing them before the request has been sent (but looking at them in the console much later).
You need to wait for the ready state to change.
this.xhr.addEventListener("readystatechange", handler);
function handler(event) {
if (this.readyState == 4 && this.status == 200) {
// ....
}
}
There's no need to test that manually though. Modern browsers support a load event.
this.xhr.addEventListener("load", handler);
function handler(event) {
// ....
}
answered Jan 3 at 22:33
QuentinQuentin
658k728951057
I currently have everything regarding the XMLHttpResponse object inside the constructor, so instead of creating a separate handler function, I created an anonymous function within the addEventListener method. I think this should work, but instead I get this error in the console: "ERROR TypeError: Cannot read property 'readyState' of undefined".
– Bosies
Jan 4 at 15:01
@Bosies — Different function. Different value ofthis. Use theloadevent.
– Quentin
Jan 4 at 15:04
I'm currently doing this:this.xhr.addEventListener("load", function( ) { ... });
– Bosies
Jan 4 at 15:34
@Bosies — Then you shouldn't need to touchreadyState
– Quentin
Jan 4 at 15:36
You're right, I'm not trying to, but whenever I run theaddEventListenerfunction above, I'm getting the console error mentioned earlier.
– Bosies
Jan 4 at 15:41
|
show 4 more comments
Time! 🕐
You are testing them before the request has been sent (but looking at them in the console much later).
You need to wait for the ready state to change.
this.xhr.addEventListener("readystatechange", handler);
function handler(event) {
if (this.readyState == 4 && this.status == 200) {
// ....
}
}
There's no need to test that manually though. Modern browsers support a load event.
this.xhr.addEventListener("load", handler);
function handler(event) {
// ....
}
answered Jan 3 at 22:33
QuentinQuentin
658k728951057
I currently have everything regarding the XMLHttpResponse object inside the constructor, so instead of creating a separate handler function, I created an anonymous function within the addEventListener method. I think this should work, but instead I get this error in the console: "ERROR TypeError: Cannot read property 'readyState' of undefined".
– Bosies
Jan 4 at 15:01
@Bosies — Different function. Different value ofthis. Use theloadevent.
– Quentin
Jan 4 at 15:04
I'm currently doing this:this.xhr.addEventListener("load", function( ) { ... });
– Bosies
Jan 4 at 15:34
@Bosies — Then you shouldn't need to touchreadyState
– Quentin
Jan 4 at 15:36
You're right, I'm not trying to, but whenever I run theaddEventListenerfunction above, I'm getting the console error mentioned earlier.
– Bosies
Jan 4 at 15:41
|
show 4 more comments
Time! 🕐
You are testing them before the request has been sent (but looking at them in the console much later).
You need to wait for the ready state to change.
this.xhr.addEventListener("readystatechange", handler);
function handler(event) {
if (this.readyState == 4 && this.status == 200) {
// ....
}
}
There's no need to test that manually though. Modern browsers support a load event.
this.xhr.addEventListener("load", handler);
function handler(event) {
// ....
}
answered Jan 3 at 22:33
QuentinQuentin
658k728951057
Time! 🕐
You are testing them before the request has been sent (but looking at them in the console much later).
You need to wait for the ready state to change.
this.xhr.addEventListener("readystatechange", handler);
function handler(event) {
if (this.readyState == 4 && this.status == 200) {
// ....
}
}
There's no need to test that manually though. Modern browsers support a load event.
this.xhr.addEventListener("load", handler);
function handler(event) {
// ....
}
answered Jan 3 at 22:33
QuentinQuentin
658k728951057
edited Jan 4 at 15:03
answered Jan 3 at 22:33
QuentinQuentin
658k728951057
answered Jan 3 at 22:33
QuentinQuentin
658k728951057
answered Jan 3 at 22:33
QuentinQuentin
658k728951057
658k728951057
I currently have everything regarding the XMLHttpResponse object inside the constructor, so instead of creating a separate handler function, I created an anonymous function within the addEventListener method. I think this should work, but instead I get this error in the console: "ERROR TypeError: Cannot read property 'readyState' of undefined".
– Bosies
Jan 4 at 15:01
@Bosies — Different function. Different value ofthis. Use theloadevent.
– Quentin
Jan 4 at 15:04
I'm currently doing this:this.xhr.addEventListener("load", function( ) { ... });
– Bosies
Jan 4 at 15:34
@Bosies — Then you shouldn't need to touchreadyState
– Quentin
Jan 4 at 15:36
You're right, I'm not trying to, but whenever I run theaddEventListenerfunction above, I'm getting the console error mentioned earlier.
– Bosies
Jan 4 at 15:41
|
show 4 more comments
I currently have everything regarding the XMLHttpResponse object inside the constructor, so instead of creating a separate handler function, I created an anonymous function within the addEventListener method. I think this should work, but instead I get this error in the console: "ERROR TypeError: Cannot read property 'readyState' of undefined".
– Bosies
Jan 4 at 15:01
@Bosies — Different function. Different value ofthis. Use theloadevent.
– Quentin
Jan 4 at 15:04
I'm currently doing this:this.xhr.addEventListener("load", function( ) { ... });
– Bosies
Jan 4 at 15:34
@Bosies — Then you shouldn't need to touchreadyState
– Quentin
Jan 4 at 15:36
You're right, I'm not trying to, but whenever I run theaddEventListenerfunction above, I'm getting the console error mentioned earlier.
– Bosies
Jan 4 at 15:41
I currently have everything regarding the XMLHttpResponse object inside the constructor, so instead of creating a separate handler function, I created an anonymous function within the addEventListener method. I think this should work, but instead I get this error in the console: "ERROR TypeError: Cannot read property 'readyState' of undefined".
– Bosies
Jan 4 at 15:01
I currently have everything regarding the XMLHttpResponse object inside the constructor, so instead of creating a separate handler function, I created an anonymous function within the addEventListener method. I think this should work, but instead I get this error in the console: "ERROR TypeError: Cannot read property 'readyState' of undefined".
– Bosies
Jan 4 at 15:01
@Bosies — Different function. Different value of
this. Use the load event.– Quentin
Jan 4 at 15:04
@Bosies — Different function. Different value of
this. Use the load event.– Quentin
Jan 4 at 15:04
I'm currently doing this:
this.xhr.addEventListener("load", function( ) { ... });– Bosies
Jan 4 at 15:34
I'm currently doing this:
this.xhr.addEventListener("load", function( ) { ... });– Bosies
Jan 4 at 15:34
@Bosies — Then you shouldn't need to touch
readyState– Quentin
Jan 4 at 15:36
@Bosies — Then you shouldn't need to touch
readyState– Quentin
Jan 4 at 15:36
You're right, I'm not trying to, but whenever I run the
addEventListener function above, I'm getting the console error mentioned earlier.– Bosies
Jan 4 at 15:41
You're right, I'm not trying to, but whenever I run the
addEventListener function above, I'm getting the console error mentioned earlier.– Bosies
Jan 4 at 15:41
|
show 4 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54030671%2fxmlhttprequest-object-not-correctly-returning-its-parameters%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
