📄 9-3.html

📁 文件是《精通Javascript+jQuery》的书中实例

💻 HTML

字号:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>GET VS. POST</title>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
	if(window.ActiveXObject)
		xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
	else if(window.XMLHttpRequest)
		xmlHttp = new XMLHttpRequest();
}
function createQueryString(){
	var firstName = document.getElementById("firstName").value;
	var birthday = document.getElementById("birthday").value;	
	var queryString = "firstName=" + firstName + "&birthday=" + birthday;
	return encodeURI(encodeURI(queryString));	//两次编码解决中文乱码问题
}
function doRequestUsingGET(){
	createXMLHttpRequest();
	var queryString = "9-3.aspx?";
	queryString += createQueryString() + "&timestamp=" + new Date().getTime();
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.open("GET",queryString);
	xmlHttp.send(null);
}
function doRequestUsingPOST(){
	createXMLHttpRequest();
	var url = "9-3.aspx?timestamp=" + new Date().getTime();
	var queryString = createQueryString();
	xmlHttp.open("POST",url);
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlHttp.send(queryString);
}
function handleStateChange(){
	if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
		var responseDiv = document.getElementById("serverResponse");
		responseDiv.innerHTML = decodeURI(xmlHttp.responseText);	//解码
	}
}
</script>
</head>

<body>
<h2>输入姓名和生日</h2>
<form>
	<input type="text" id="firstName" /><br>
	<input type="text" id="birthday" />
</form>
<form>
	<input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
	<input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -