gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix "ReferenceError: url is not defined" in challenge (#35415)

Browse Source 
* Fix "ReferenceError: url is not defined" in challenge

I fix the challenge because issue #14002 
- The `url` variable is set to external resource `https://jsonplaceholder.typicode.com/posts`
- I replaced .textContent instead of .innerHTML (better practice)
- Checking for HTTP status of 201 instead of 200
All these suggestions by @HarplingeTom and "approved" by  @QuincyLarson. See the issue comments.
I test the code locally in my computer and this works 👍 
I modified and verify the tests according the new assessment.

* Update curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.english.md

Minor typo: `<code>` to `</code>`

Co-Authored-By: yoelvisj <43357527+yoelvisj@users.noreply.github.com>

* Update curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.english.md

new declared as const

Co-Authored-By: yoelvisj <43357527+yoelvisj@users.noreply.github.com>
This commit is contained in:
Yoelvis Jiménez
2019-05-08 21:07:36 -04:00
committed by Tom
parent 534824e232
commit fdb49ba89a
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.english.md
View File

@ -8,11 +8,11 @@ challengeType: 6
<section id='description'>
In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL.
JavaScript's <code>XMLHttpRequest</code> method is also used to post data to a server. Here's an example:
<blockquote>req=new XMLHttpRequest();<br>req.open("POST",url,true);<br>req.setRequestHeader('Content-Type','text/plain');<br>req.onreadystatechange=function(){<br>&nbsp;&nbsp;if(req.readyState==4 && req.status==200){<br>&nbsp;&nbsp;&nbsp;&nbsp;document.getElementsByClassName('message')[0].innerHTML=req.responseText;<br>&nbsp;&nbsp;}<br>};<br>req.send(userName);</blockquote>
<blockquote>const xhr = new XMLHttpRequest();<br>xhr.open('POST', url, true);<br>xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');<br>xhr.onreadystatechange = function () {<br>&nbsp;&nbsp;if (xhr.readyState === 4 && xhr.status === 201){<br>&nbsp;&nbsp;&nbsp;&nbsp;const serverResponse = JSON.parse(xhr.response);<br>&nbsp;&nbsp;&nbsp;&nbsp;document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;<br>&nbsp;&nbsp;}<br>};<br>const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });<br>xhr.send(body);</blockquote>
You've seen several of these methods before. Here the <code>open</code> method initializes the request as a "POST" to the given URL of the external resource, and uses the <code>true</code> Boolean to make it asynchronous.
The <code>setRequestHeader</code> method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the <code>open</code> method, but before the <code>send</code> method. The two parameters are the name of the header and the value to set as the body of that header.
Next, the <code>onreadystatechange</code> event listener handles a change in the state of the request. A <code>readyState</code> of 4 means the operation is complete, and a <code>status</code> of 200 means it was a successful request. The document's HTML can be updated.
Finally, the <code>send</code> method sends the request with the <code>userName</code> value, which was given by the user in the <code>input</code> field.
Next, the <code>onreadystatechange</code> event listener handles a change in the state of the request. A <code>readyState</code> of 4 means the operation is complete, and a <code>status</code> of 201 means it was a successful request. The document's HTML can be updated.
Finally, the <code>send</code> method sends the request with the <code>body</code> value, which the <code>userName</code> key was given by the user in the <code>input</code> field.
</section>
## Instructions
@ -30,13 +30,13 @@ tests:
- text: Your code should use the <code>open</code> method to initialize a "POST" request to the server.
testString: assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g), 'Your code should use the <code>open</code> method to initialize a "POST" request to the server.');
- text: Your code should use the <code>setRequestHeader</code> method.
testString: assert(code.match(/\.setRequestHeader\(\s*?('|")Content-Type\1\s*?,\s*?('|")text\/plain\2\s*?\)/g), 'Your code should use the <code>setRequestHeader</code> method.');
testString: assert(code.match(/\.setRequestHeader\(\s*?('|")Content-Type\1\s*?,\s*?('|")application\/json;\s*charset=UTF-8\2\s*?\)/g), 'Your code should use the <code>setRequestHeader</code> method.');
- text: Your code should have an <code>onreadystatechange</code> event handler set to a function.
testString: assert(code.match(/\.onreadystatechange\s*?=/g), 'Your code should have an <code>onreadystatechange</code> event handler set to a function.');
- text: Your code should get the element with class <code>message</code> and change its inner HTML to the <code>responseText</code>.
testString: assert(code.match(/document\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\.innerHTML\s*?=\s*?.+?\.responseText/g), 'Your code should get the element with class <code>message</code> and change its inner HTML to the <code>responseText</code>.');
- text: Your code should get the element with class <code>message</code> and change its text content to the <code>responseText</code>.
testString: assert(code.match(/document\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?.+?\.userName\s*?\+\s*?.+?\.suffix/g), 'Your code should get the element with class <code>message</code> and change its text content to the <code>serverResponse</code>.');
- text: Your code should use the <code>send</code> method.
testString: assert(code.match(/\.send\(\s*?userName\s*?\)/g), 'Your code should use the <code>send</code> method.');
testString: assert(code.match(/\.send\(\s*?body\s*?\)/g), 'Your code should use the <code>send</code> method.');
```
@ -49,10 +49,11 @@ tests:
```html
<script>
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('sendMessage').onclick=function(){
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('sendMessage').onclick = function(){
var userName=document.getElementById('name').value;
var userName = document.getElementById('name').value;
var url = 'https://jsonplaceholder.typicode.com/posts';
// Add your code below this line