AJAX request with XML response--working in Postman, but not in Codepen

1

My daughter brought home a spelling bee word list, and I thought it might be a good project for me to build a simple quiz that would play audio of a word, let the student type it, and see if it matched the expected string. With only 100 words on the list I could of course just record the audio myself and host it somewhere, but I thought I’d use an API, and Merriam-Webster’s dictionaryapi.com one looked good. I got my key, did a trial run in Postman, and it worked great. (It also works to just paste a sample request url into the browser.) Now, when I write my request in the project, it’s not getting a response (status 0). What is working in Postman that isn’t in the project? Is this about CORS? I get that, with the response being XML, I’ll have to do funny things to parse it and work with it once I get it back–but why am I not getting it back?

Project: https://codepen.io/AbdiViklas/pen/PbZqPK?editors=0011

2

I get the following error in the console whenever I type in a word from the list into the text box and hit the ‘Enter’ button:
‘TypeError: responseText.val is not a function’

You probably meant:
var response = $(’#responseText’).val();
instead of
var response = responseText.val();

3

Thanks for catching that! My question still stands, though; I just put that API function on hold and went on to work on other functionality.

4

I noticed that codepen is https and tried your code with https for the dictionary api. Now I can see the request but get ‘Cross-Origin Request Blocked: …’ error in the console. Hope this helps

1 Like