zoukankan      html  css  js  c++  java
  • Ajax 的 GET 和 POST 模式

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

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

    1 var queryString = "name=Liruxing&sex=man";  
    2 var url = "index.php" + queryString + "time=" + new Date().getTime();  
    3 xmlHttp.open('GET',url);  
    4 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

     1 <html>  
     2     <head>  
     3         <title>Ajax</title>  
     4         <script language="javascript">  
     5             var xmlHttp;  
     6             // 创建 XMLHttpRequest  
     7             function createXMLHttpRequest() {  
     8                 if (window.ActiveXObject) {  
     9                     xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');  
    10                 } else if (window.XMLHttpRequest) {  
    11                     xmlHttp = new XMLHttpRequest();  
    12                 }  
    13             }  
    14               
    15             function createQueryString() {  
    16                 var name = document.getElementById('name').value;  
    17                 var sex = document.getElementById('sex').value;  
    18                 var queryString = "name="+ name +"&sex=" + sex;  
    19                 return encodeURI(encodeURI(queryString));   // 两次编码解决中文乱码问题  
    20             }  
    21               
    22             function handleStateChange() {  
    23                 if (xmlHttp.readyState==4 && xmlHttp.status==200) {  
    24                     var content = document.getElementById("content");  
    25                     content.innerHTML = '';  
    26                     content.innerHTML = decodeURI(xmlHttp.responseText); // 解码  
    27                 }  
    28             }  
    29               
    30             // GET 方法  
    31             function doRequestUsingGet() {  
    32                 createXMLHttpRequest();  
    33                 var url = "index.php?" + createQueryString() + "&time=" + new Date().getTime();  
    34                 xmlHttp.open('GET', url);  
    35                 xmlHttp.onreadystatechange = handleStateChange;  
    36                 xmlHttp.send(null);  
    37             }  
    38               
    39             // POST 方法  
    40             function doRequestUsingPost() {  
    41                 createXMLHttpRequest();  
    42                 var url = "index.php?time=" + new Date().getTime();  
    43                 var queryString = createQueryString();  
    44                 xmlHttp.open('POST', url);  
    45                 xmlHttp.onreadystatechange = handleStateChange;  
    46                 xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');  
    47                 xmlHttp.send(queryString);  
    48             }  
    49         </script>  
    50     </head>  
    51     <body>  
    52         <p>Name:<input type="text" id="name" /></p>  
    53         <p>Sex :<input type="text" id="sex" /></p>  
    54         <p><input type="button" value="GET" onClick="doRequestUsingGet()"> <input type="button" value="POST" onClick="doRequestUsingPost()"></p>  
    55         <div id="content"></div>  
    56      </body>  
    57 </html> 

    index.php:

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

  • 相关阅读:
    HTML screenX 事件属性
    CSS Display(显示) 与 Visibility(可见性)
    JavaScript手册 | JS Array 对象中的sort() 方法
    IntelliJ IDEA收费版本Ultimate的安装和破解
    ASP.NET Style 控件
    HTML area hreflang 属性
    Shell test 命令
    ftplib (Internet) – Python 中文开发手册
    Java 之 Collection 接口
    java 之 集合概述
  • 原文地址:https://www.cnblogs.com/joyco773/p/6033394.html
Copyright © 2011-2022 走看看