Ajax 的 GET 和 POST 模式

zhangziyangup

浏览: 1082816 次

最近访客更多访客>>

u012363178

winting

aosp

真新镇的小智

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1434)

社区版块

存档分类

2012-07 ( 149)
2012-06 ( 33)
2012-05 ( 45)
更多存档...

Ajax 异步请求数据的方式有两种：GET 和 POST。

如果是 GET 模式，则直接将数据放置到异步请求的 URL 地址中，而 send() 方法不发送任何数据；

var queryString = "name=Liruxing&sex=man"; var url = "index.php" + queryString + "time=" + new Date().getTime(); xmlHttp.open('GET',url); xmlHttp.send(null);
如果是 POST 模式，则将数据放置在 send() 方法中发送。

var queryString = "name=Liruxing&sex=man"; var url = "index.php" + new Date().getTime(); xmlHttp.open('POST',url); xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xmlHttp.send(queryString);

下面的示例能够更清楚的演示 GET 模式和 POST 模式的区别（Ajax 结合 PHP）

index.html

<html>
	<head>
    	<title>Ajax</title>
        <script language="javascript">
			var xmlHttp;
			// 创建 XMLHttpRequest
			function createXMLHttpRequest() {
				if (window.ActiveXObject) {
					xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
				} else if (window.XMLHttpRequest) {
					xmlHttp = new XMLHttpRequest();
				}
			}
			
			function createQueryString() {
				var name = document.getElementById('name').value;
				var sex = document.getElementById('sex').value;
				var queryString = "name="+ name +"&sex=" + sex;
				return encodeURI(encodeURI(queryString));	// 两次编码解决中文乱码问题
			}
			
			function handleStateChange() {
				if (xmlHttp.readyState==4 && xmlHttp.status==200) {
					var content = document.getElementById("content");
					content.innerHTML = '';
					content.innerHTML = decodeURI(xmlHttp.responseText); // 解码
				}
			}
			
			// GET 方法
			function doRequestUsingGet() {
				createXMLHttpRequest();
				var url = "index.php?" + createQueryString() + "&time=" + new Date().getTime();
				xmlHttp.open('GET', url);
				xmlHttp.onreadystatechange = handleStateChange;
				xmlHttp.send(null);
			}
			
			// POST 方法
			function doRequestUsingPost() {
				createXMLHttpRequest();
				var url = "index.php?time=" + 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);
			}
		</script>
    </head>
    <body>
		<p>Name:<input type="text" id="name" /></p>
		<p>Sex :<input type="text" id="sex" /></p>
		<p><input type="button" value="GET" onClick="doRequestUsingGet()"> <input type="button" value="POST" onClick="doRequestUsingPost()"></p>
        <div id="content"></div>
     </body>
</html>