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() 方法中发送。

1 var queryString = "name=Liruxing&sex=man";  
2 var url = "index.php" + new Date().getTime();  
3 xmlHttp.open('POST',url);  
4 xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');  
5 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'];    
    }  
?>

posted @ 2016-11-30 12:56  Koidt  阅读(155)  评论(0)  编辑  收藏  举报