zoukankan      html  css  js  c++  java
  • 第109天:Ajax请求GET和POST的区别

    一、Ajax请求GET和POST的区别

      1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来

      2.使用Get请求发送数据量小,Post请求发送数据量大

      3.get请求需注意缓存问题,post请求不需担心这个问题

    Get方式:

      用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(httpheader传送),也就是说,浏览器将各个表单字段元素及其数据按照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)设置headerContext-Typeapplication/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)服务器端请求参数区分GetPost。如果是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、发送包含未知字符的用户输入时,POSTGET 更稳定也更可靠

           若符合下列任一情况,则用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 ?>
  • 相关阅读:
    通讯录封装实现
    简单通讯录的实现 main..h .m文件全部
    iOS 开发 OC编程 字典和集合 排序方法
    iOS 开发 OC编程 数组冒泡排序.图书管理
    iOS 开发 OC编程 属性和字符串练习
    iOS 开发 OC编程 属性和字符串
    iOS 开发 OC编程 便利构造器以及初始化方法
    iOS 开发 OC编程 方法的书写
    IOS 开发 OC编程 类和对象
    iOS 开发 c语言阶段考试题
  • 原文地址:https://www.cnblogs.com/le220/p/8012904.html
Copyright © 2011-2022 走看看