Ajax 的 GET 和 POST 模式

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>

index.php:

 <?php
header('Content-Type:text/html;Charset=GB2312');
$method = $_SERVER['REQUEST_METHOD'];
if ($method == 'GET') {
echo "GET:".$_GET['name'].",".$_GET['sex'];
} else if ($method == 'POST') {
echo "POST:".$_POST['name'].",".$_POST['sex'];
}
?>

Ajax 的 GET 和 POST 模式Ajax 的 GET 和 POST 模式

上一篇:推荐牛X的一本JS书


下一篇:YIT-CTF—社工类