ahliang85/XMLHttpRequest.html

## XMLHttpRequest.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
<script>
"use strict";
function submitForm(oFormElement)
{
  var xhr = new XMLHttpRequest();
  xhr.onload = function(){ alert (xhr.responseText); }
  xhr.open (oFormElement.method, oFormElement.action, true);
  xhr.send (new FormData (oFormElement));
  return false;
}
</script>
</head>

<body>
<form method="post" action="somewhere" onsubmit="return submitForm(this);">
    <input type="hidden" value="person"   name="user" />
    <input type="hidden" value="password" name="pwd" />
    <input type="hidden" value="place"    name="organization" />
    <input type="hidden" value="key"      name="requiredkey" />
    <input type="submit" value="post request"/>
</form>
</body>
</html>

## XMLHttpRequest.js
var http = new XMLHttpRequest();
var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);

## XMLHttpRequest_2.js
var xhr = new XMLHttpRequest();
xhr.open('POST', 'somewhere', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
    // do something to response
    console.log(this.responseText);
};
xhr.send('user=person&pwd=password&organization=place&requiredkey=key');

## XMLHttpRequest_3.js
var data = new FormData();
data.append('user', 'person');
data.append('pwd', 'password');
data.append('organization', 'place');
data.append('requiredkey', 'key');

var xhr = new XMLHttpRequest();
xhr.open('POST', 'somewhere', true);
xhr.onload = function () {
    // do something to response
    console.log(this.responseText);
};
xhr.send(data);
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
	<script>
	"use strict";
	function submitForm(oFormElement)
	{
	var xhr = new XMLHttpRequest();
	xhr.onload = function(){ alert (xhr.responseText); }
	xhr.open (oFormElement.method, oFormElement.action, true);
	xhr.send (new FormData (oFormElement));
	return false;
	}
	</script>
	</head>

	<body>
	<form method="post" action="somewhere" onsubmit="return submitForm(this);">
	<input type="hidden" value="person" name="user" />
	<input type="hidden" value="password" name="pwd" />
	<input type="hidden" value="place" name="organization" />
	<input type="hidden" value="key" name="requiredkey" />
	<input type="submit" value="post request"/>
	</form>
	</body>
	</html>
	var http = new XMLHttpRequest();
	var url = "get_data.php";
	var params = "lorem=ipsum&name=binny";
	http.open("POST", url, true);

	//Send the proper header information along with the request
	http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	http.setRequestHeader("Content-length", params.length);
	http.setRequestHeader("Connection", "close");

	http.onreadystatechange = function() {//Call a function when the state changes.
	if(http.readyState == 4 && http.status == 200) {
	alert(http.responseText);
	}
	}
	http.send(params);
	var xhr = new XMLHttpRequest();
	xhr.open('POST', 'somewhere', true);
	xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	xhr.onload = function () {
	// do something to response
	console.log(this.responseText);
	};
	xhr.send('user=person&pwd=password&organization=place&requiredkey=key');
	var data = new FormData();
	data.append('user', 'person');
	data.append('pwd', 'password');
	data.append('organization', 'place');
	data.append('requiredkey', 'key');

	var xhr = new XMLHttpRequest();
	xhr.open('POST', 'somewhere', true);
	xhr.onload = function () {
	// do something to response
	console.log(this.responseText);
	};
	xhr.send(data);