Ajax Using the POST Method - Exercise

Contact Us or call 1-877-932-8228
Ajax Using the POST Method - Exercise

Ajax Using the POST Method

Duration: 10 to 15 minutes.

In this exercise, you will modify the code from the last demonstration to send data using the POST method. You will need to use the setRequestHeader() method to alert the server to expect form data.

  1. If needed, stop (by pressing ctrl-c from the command line) any running instance of the Node.js.
  2. Navigate to the directory AjaxBasics/Exercises/ in command line.
  3. Type npm install from the command line, to install the needed Node.js modules.
  4. Type npm start to start the Node.js server.
  5. Open AjaxBasics/Exercises/UsingXMLHttpRequest-Post.html in your editor.
  6. Modify the code to make the request using the POST method shown earlier.
  7. Test your solution in a browser by visiting http://localhost:8080/UsingXMLHttpRequest-Post.html

Code Sample:

AjaxBasics/Exercises/UsingXMLHttpRequest-Post.html
---- C O D E   O M I T T E D ----

<script type="text/javascript">
	function start() {
		var xmlhttp = new XMLHttpRequest();
		var contentDiv = document.getElementById("Content");

		xmlhttp.open("GET", "Demo?FirstName=Nat&LastName=Dunn", true);
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				contentDiv.innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.send(null);
	}

	observeEvent(window, "load", function() {
		var btn = document.getElementById("btnStart");
		observeEvent(btn, "click", start);
	});
</script>
---- C O D E   O M I T T E D ----

Challenge

Write out all the response headers to the end of the same "Content" div.

Solution:

AjaxBasics/Solutions/UsingXMLHttpRequest-Post.html
---- C O D E   O M I T T E D ----

	function start() {
		var xmlhttp = new XMLHttpRequest();
		var contentDiv = document.getElementById("Content");

		xmlhttp.open("<samp>POST</samp>", "Demo", true);
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				contentDiv.innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
		xmlhttp.send("FirstName=Nat&LastName=Dunn");</strong>
	}
---- C O D E   O M I T T E D ----

We specify "POST" as the method for our Ajax call in xmlhttp.open and, in xmlhttp.setRequestHeader specify the MIME type (application/x-www-form-urlencoded) and character encoding (charset=UTF-8) of the request we send to the /Demo response route.

We pass along two POST variables, FirstName and LastName, with values Nat and Dunn, respectively.

Challenge Solution:

AjaxBasics/Solutions/UsingXMLHttpRequest-Post-Challenge.html
---- C O D E   O M I T T E D ----

	function start() {
		var xmlhttp = new XMLHttpRequest();
		var contentDiv = document.getElementById("Content");

		xmlhttp.open("POST", "Demo", true);
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				contentDiv.innerHTML = xmlhttp.responseText;
				var headers = xmlhttp.getAllResponseHeaders();
				contentDiv.innerHTML += headers.replace(/\n/g, "<br>");
			}
		}
		xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
		xmlhttp.send("FirstName=Nat&LastName=Dunn");
	}
---- C O D E   O M I T T E D ----

We use innerHTML to set the contents of #contentDiv, retrieving the response headers with xmlhttp.getAllResponseHeaders() and displaying with newlines converted to HTML <br /> tags.

Next