post及get请求区别

1.ajax-get请求

 1 <script type="text/javascript">
 2 function ajax(){
 3     var XHR=null;  
 4 
 5     //第一步:创建XMLHttpRequest对象
 6     if (window.XMLHttpRequest) {  
 7         XHR = new XMLHttpRequest();  // 非IE内核:IE7+, Firefox, Chrome, Opera, Safari  
 8     } else if (window.ActiveXObject) {  
 9         XHR = new ActiveXObject("Microsoft.XMLHTTP");   // IE内核:IE6, IE5
10     } else {  
11         XHR = null;  
12     }  
13 
14     //第二步:发送请求
15     if(XHR){  
16         XHR.open("GET", "/test/ajax");  //"/test/ajax"test为项目名称、ajax为方法名称
17 
18     //第三步:
19         XHR.onreadystatechange = function () { 
20             // readyState值说明  
21             // 0,初始化,XHR对象已经创建,还未执行open  
22             // 1,载入,已经调用open方法,但是还没发送请求  
23             // 2,载入完成,请求已经发送完成  
24             // 3,交互,可以接收到部分数据,因为相应及http头不全,这时通过responseText获取部分数据会出现错误  
25             // 4,数据接收完成,此时可以通过responseText获取完整的数据
26 
27             // status值说明  
28             // 200:成功  
29             // 404:没有发现文件、查询或URl  
30             // 500:服务器产生内部错误  
31             if (XHR.readyState == 4 && XHR.status == 200) {  //注①
32                 // 这里可以对返回的内容做处理  
33                 // 一般会返回JSON或XML数据格式  
34                 console.log("XHR.responseText-->"+XHR.responseText);  
35                 // 主动释放,JS本身也会回收的  
36                 XHR = null;  
37             }  
38         };  
39         XHR.send();  
40     }
41 }
42 </script>

2.ajax-post请求

 1 <script type="text/javascript">
 2 function ajax(){
 3     var XHR=null;  
 4 
 5     //第一步:创建XMLHttpRequest对象
 6     if (window.XMLHttpRequest) {  
 7         XHR = new XMLHttpRequest();  // 非IE内核:IE7+, Firefox, Chrome, Opera, Safari  
 8     } else if (window.ActiveXObject) {  
 9         XHR = new ActiveXObject("Microsoft.XMLHTTP");   // IE内核:IE6, IE5
10     } else {  
11         XHR = null;  
12     }  
13 
14     //第二步:发送请求
15     if(XHR){  
16         XHR.open("POST", '1.php?='+Math.random(),true);  //"/test/ajax"test为项目名称、ajax为方法名称
17 
18         //第三步:设置Content-Type
19          XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");
20 
21         //第四步:
22         XHR.onreadystatechange = function () { 
23             // readyState值说明  
24             // 0,初始化,XHR对象已经创建,还未执行open  
25             // 1,载入,已经调用open方法,但是还没发送请求  
26             // 2,载入完成,请求已经发送完成  
27             // 3,交互,可以接收到部分数据,因为相应及http头不全,这时通过responseText获取部分数据会出现错误  
28             // 4,数据接收完成,此时可以通过responseText获取完整的数据
29 
30             // status值说明  
31             // 200:成功  
32             // 404:没有发现文件、查询或URl  
33             // 500:服务器产生内部错误  
34             if (XHR.readyState == 4 && XHR.status == 200) {  //注①
35                 // 这里可以对返回的内容做处理  
36                 // 一般会返回JSON或XML数据格式  
37                 console.log("XHR.responseText-->"+XHR.responseText);  
38                 // 主动释放,JS本身也会回收的  
39                 XHR = null;  
40             }  
41         };  
42         XHR.send('name=mino&age=25');  
43     }
44 }
45 </script>

get和post请求的区别

  1. 使用Get请求时,参数在URL中显示,而使用Post请求,则不会显示出来;
  2. post请求必须设置xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); 否则服务器端收不到参数
  3. Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的限制,只能传递大约1024字节
  4. Get请求请求需注意缓存问题,Post请求不需担心这个问题;

猜你喜欢

转载自blog.csdn.net/Biebersxzl/article/details/82828858