一、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 ?>