天天看點

第109天:Ajax請求GET和POST的差別

一、Ajax請求GET和POST的差別

  1.使用Get請求時,參數在URL中顯示,而使用Post方式,則不會顯示出來

  2.使用Get請求發送資料量小,Post請求發送資料量大

  3.get請求需注意緩存問題,post請求不需擔心這個問題

Get方式:

  用get方式可傳送簡單資料,但大小一般限制在1KB下,資料追加到url中發送(http的header傳送),也就是說,浏覽器将各個表單字段元素及其資料按照URL參數的格式附加在請求行中的資源路徑後面。另外最重要的一點是,它會被用戶端的浏覽器緩存起來,那麼,别人就可以從浏覽器的曆史記錄中,讀取到此客戶的資料,比如帳号和密碼等。是以,在某些情況下,get方法會帶來嚴重的安全性問題。

Post方式:

  當使用POST方式時,浏覽器把各表單字段元素及其資料作為HTTP消息的實體内容發送給Web伺服器,而不是作為URL位址的參數進行傳遞,使用POST方式傳遞的資料量要比使用GET方式傳送的資料量大的多。

二、使用注意事項

  1、使用get方式需要注意:

       對于get請求(或凡涉及到url傳遞參數的),被傳遞的參數都要先經encodeURIComponent方法處理.例:var url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent(content)+"&id=1" ;

  即get的傳遞參數需要拼接到url當中

        2、使用Post方式需注意:

  (1)設定header的Context-Type為application/x-www-form-urlencode確定伺服器知道實體中有參數變量.通常使用XmlHttpRequest對象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")。例:

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

  (2)參數是名/值一一對應的鍵值對,每對值用&号隔開.如 var name=abc&sex=man&age=18,注意var name=update.php?

abc&sex=man&age=18以及var name=?abc&sex=man&age=18的寫法都是錯誤的;

  (3)參數在Send(參數)方法中發送,例: xmlHttp.send(name); 如果是get方式,直接 xmlHttp.send(null);

  (4)伺服器端請求參數區分Get與Post。如果是get方式則$username = $_GET["username"]; 如果是post方式,則$username = $_POST["username"];

  post的傳遞參數不需要拼接到url當中

  get 方法用Request.QueryString["strName"]接收

  post 方法用Request.Form["strName"] 接收

  注意:

    雖然兩種送出方式可以統一用Request("strName")來擷取送出資料,但是這樣對程式效率有影響,不推薦使用。

    一般來說,盡量避免使用Get方式送出表單,因為有可能會導緻安全問題

三、AJAX亂碼問題

  産生亂碼的原因:

    1、xmlhttp 傳回的資料預設的字元編碼是utf-8,如果用戶端頁面是gb2312或者其它編碼資料就會産生亂碼

    2、post方法送出資料預設的字元編碼是utf-8,如果伺服器端是gb2312或其他編碼資料就會産生亂碼

  解決辦法有:

    1、若用戶端是gb2312編碼,則在伺服器指定輸出流編碼

    2、伺服器端和用戶端都使用utf-8編碼

    gb2312:header('Content-Type:text/html;charset=GB2312');

    utf-8:header('Content-Type:text/html;charset=utf-8');

    注意:如果你已經按上面的方法做了,還是傳回亂碼的話,檢查你的方式是否為get,對于get請求(或凡涉及到url傳遞參數的),被傳遞的參數都要先經encodeURIComponent方法處理.如果沒有用encodeURIComponent處理的話,也會産生亂碼.

四、POST和GET的差別

  Get請求的目的是給予伺服器一些參數,以便從伺服器擷取清單.例如:list.aspx?page=1,表示擷取第一頁的資料

  Post請求的目的是向伺服器發送一些參數,例如form中的内容.

  與 POST 相比,GET 更簡單也更快,并且在大部分情況下都能用。

  然而,在以下情況中,請使用 POST 請求:

    1、無法使用緩存檔案(更新伺服器上的檔案或資料庫)

    2、向伺服器發送大量資料(POST 沒有資料量限制)

    3、發送包含未知字元的使用者輸入時,POST 比 GET 更穩定也更可靠

       若符合下列任一情況,則用GET方法:

    1、請求是為了查找資源,HTML表單資料僅用來幫助搜尋。

    2、請求結果無持續性的副作用。

    3、收集的資料及HTML表單内的輸入字段名稱的總長不超過1024個字元。

五、案例

 1、HTML代碼(原生Ajax代碼)

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         window.onload=function(){
 8             var btn=document.getElementById('btn');
 9             btn.onclick=function(){
10                 //1、建立對象
11                 var xhr=null;
12                 if(window.XMLHttpRequest){//标準浏覽器
13                     xhr=new XMLHttpRequest();
14                 }else{//早期的IE浏覽器
15                     xhr=new ActiveXObject('Microsoft.XMLHTTP');
16                 }
17                 var username=document.getElementById('username').value;
18                 var password=document.getElementById('password').value;
19 
20                 //2、準備發送請求-配置發送請求的一些行為
21 
22                 //get方法
23 //                var url='./get-post.php?username='+username+'&password='+password;
24 //                xhr.open('get',url,true);
25 
26                 //post方法
27                 var url='./get-post.php';
28                 xhr.open('post',url,true);
29 
30                 //3、執行發送的動作
31                 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
32 //                encodeURIComponent将中文使用者名編碼
33                 var param='username='+encodeURIComponent(username)+'&password='+password;
34                 xhr.send(param);
35                 //4、指定一些回調函數
36                 xhr.onreadystatechange=function(){
37 
38                     if(xhr.readyState==4){
39                         if(xhr.status==200){//狀态200,404,503
40                             var data=xhr.responseText;//json
41                             //var data1=xhr.responseXML;
42                             console.log(data);
43                         }
44                     }
45                 };
46             }
47 
48         }
49     </script>
50 </head>
51 <body>
52 <div>
53     <div id="showInfo"></div>
54     <form >
55         使用者名:<input type="text" id="username" name="username"><br>
56         密碼:<input type="password" id="password" name="password">
57         <input type="button" id="btn" value="登入" >
58     </form>
59 </div>
60 </body>
61 </html>      

2、PHP檔案

1 <?php
 2 //   $username=$_GET['username'];
 3 //   $password=$_GET['password'];
 4 
 5    $username=$_POST['username'];
 6    $password=$_POST['password'];
 7 
 8    echo '使用者名:'.$username.'密碼:'.$password;
 9 
10 ?>