From fdb49ba89a5ea0afd74a1435570fe5f80e7c0f25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yoelvis=20=20Jim=C3=A9nez?= <43357527+yoelvisj@users.noreply.github.com> Date: Wed, 8 May 2019 21:07:36 -0400 Subject: [PATCH] Fix "ReferenceError: url is not defined" in challenge (#35415) * 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 :+1: 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: `` to `` 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> --- ...avascript-xmlhttprequest-method.english.md | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.english.md b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.english.md index 1a2bda918b..9f024ae0ea 100644 --- a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.english.md +++ b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.english.md @@ -8,11 +8,11 @@ challengeType: 6
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 XMLHttpRequest method is also used to post data to a server. Here's an example: -
req=new XMLHttpRequest();
req.open("POST",url,true);
req.setRequestHeader('Content-Type','text/plain');
req.onreadystatechange=function(){
  if(req.readyState==4 && req.status==200){
    document.getElementsByClassName('message')[0].innerHTML=req.responseText;
  }
};
req.send(userName);
+
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 201){
    const serverResponse = JSON.parse(xhr.response);
    document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;
  }
};
const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
xhr.send(body);
You've seen several of these methods before. Here the open method initializes the request as a "POST" to the given URL of the external resource, and uses the true Boolean to make it asynchronous. The setRequestHeader method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the open method, but before the send method. The two parameters are the name of the header and the value to set as the body of that header. -Next, the onreadystatechange event listener handles a change in the state of the request. A readyState of 4 means the operation is complete, and a status of 200 means it was a successful request. The document's HTML can be updated. -Finally, the send method sends the request with the userName value, which was given by the user in the input field. +Next, the onreadystatechange event listener handles a change in the state of the request. A readyState of 4 means the operation is complete, and a status of 201 means it was a successful request. The document's HTML can be updated. +Finally, the send method sends the request with the body value, which the userName key was given by the user in the input field.
## Instructions @@ -30,13 +30,13 @@ tests: - text: Your code should use the open 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 open method to initialize a "POST" request to the server.'); - text: Your code should use the setRequestHeader method. - testString: assert(code.match(/\.setRequestHeader\(\s*?('|")Content-Type\1\s*?,\s*?('|")text\/plain\2\s*?\)/g), 'Your code should use the setRequestHeader 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 setRequestHeader method.'); - text: Your code should have an onreadystatechange event handler set to a function. testString: assert(code.match(/\.onreadystatechange\s*?=/g), 'Your code should have an onreadystatechange event handler set to a function.'); - - text: Your code should get the element with class message and change its inner HTML to the responseText. - testString: assert(code.match(/document\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\.innerHTML\s*?=\s*?.+?\.responseText/g), 'Your code should get the element with class message and change its inner HTML to the responseText.'); + - text: Your code should get the element with class message and change its text content to the responseText. + 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 message and change its text content to the serverResponse.'); - text: Your code should use the send method. - testString: assert(code.match(/\.send\(\s*?userName\s*?\)/g), 'Your code should use the send method.'); + testString: assert(code.match(/\.send\(\s*?body\s*?\)/g), 'Your code should use the send method.'); ``` @@ -49,10 +49,11 @@ tests: ```html