Untitled

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>AJAX</title>
  <script src="json.js"></script>
</head>
<body>
	<h1>Sök information om en användare</h1>

  <label><b>Username</b></label>
	 <input type="text" id="username" value="User">

  <label><b>Password</b></label>
	 <input type="text" id="pwd" value="password">

  <button type="submit" id="loginButton">Login</button>
  <section id="userInfo"></section>


</body>
</html>


-----
/** Deklarerar och instanserar vårt AJAX-objekt */
var ajaxRequest=new XMLHttpRequest();
var input;

function init(){
	input = document.getElementById('loginButton');
	input.addEventListener("click", sendRequest, false);
}

/** Skickar begäran  */
function sendRequest(){
	ajaxRequest.onreadystatechange = getRequest;

	var password = document.getElementById('pwd').value;
	var user = document.getElementById('username').value;

	ajaxRequest.open("POST","login.php" , true);
	ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	ajaxRequest.send( "user="+user+"&password="+password);
}

/** Tar emot begäran */
function getRequest(){
	if (ajaxRequest.readyState==4 && ajaxRequest.status==200){
		var section = document.getElementById("userInfo")

		// Rensar datalistan
		section.innerHTML=ajaxRequest.responseText;
	}
}

window.addEventListener("load",init,false);