XMLHttpRequest中的GET和Post

看了ajax的视频后知道了传送数据有post和get两种方法,但是为什么这么用不明白,以下是我做的一点总结。


一、什么是Get和Post方式


1.Get方式

     用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是,它会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如帐号和密码等。因此,在某些情况下,get方法会带来严重的安全性问题。

2.Post方式

    当使用POST方式时,浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器,而不是作为URL地址的参数进行传递,使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。


总之,get方式传送数据量小,效率高,会被缓存,post反之。


二.区别


1.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示。
2.Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的限制,只能传递大约1024字节.
3.Post顾名思义,就是为了将数据传送到服务器段,Get就是为了从服务器段取得数据.而Get之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据.Post的信息作为http请求的内容,而Get是在Http头部传输的

三.实例


   视频中的例子运用了get和post两种方式实现一个功能,通过代码体会使用的方式和技巧。同样是提交用户名,界面做出响应。代码如下:

  <script type="text/javascript">
            var xmlhttp;
            var array=[];
            var cachexmlhttp;
            function submit(){
               // alert("click");
               //1.创建XMLHttpRequest对象
               if(window.XMLHttpRequest){
                   //IE7,8,firefox,safari,Opeta
                    xmlhttp = new XMLHttpRequest();
                   if(xmlhttp.overrideMimeType){
                      // alert(",firefox,s");
                       xmlhttp.overrideMimeType("text/xml");
                   }
               }else if(window.ActiveXObject){
                       //IE6,5.5,5
                       //alert("IE6,5.5,5");
                       var activexName = ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
                       for(var i= 0;i<activexName.length;i++){
                           try{
                               xmlhttp= new ActiveXObject(activexName[i]);
                               break;
                           }catch(e){}
                          
                       }
                   }
                   if(xmlhttp == undefined || xmlhttp == null){
                      // alert("当前浏览器不支持创建XMLHttpRequest");
                       return;
                   }
                   //array.push(xmlhttp.readyState);
                   //alert(xmlhttp);
                   //2.注册回调方法
                   xmlhttp.onreadystatechange=callback;
                   //错误的写法
                   //xmlhttp.onreadystatechange=callback();
                   固定用法:从文本框中获取用户输入的内容
                   var userName =document.getElementById("UserName").value;
                   userName=encodeURI(encodeURI(userName));
                   var url="http://192.168.24.140/Classic";
                  
                   if(url.indexOf("http//")== 0){
                       url.replace("?","&");
                       url="Proxy?url" + url;
                     
                   }
                   /*
                    //get方式交互
                   //3.设置和服务器端交互的相应参数
                   xmlhttp.open("GET","AJAX?name=" + userName,true);
                   
                   //4.设置向服务器发送的数据,启动和服务器的交互
                   xmlhttp.send(null);
                  */
                 
                  //post方式交互
                   //3.设置和服务器端交互的相应参数,第一个参数http请求的方法,第二个请求的服务器地址,第三个true表示异步交互)
                   xmlhttp.open("POST",url ,true);
                   
                   //post方式提交需要增加的代码
                   xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                   //4.设置向服务器发送的数据,启动和服务器的交互
                   xmlhttp.send("name=" + userName);
                 
               }
          
               function callback(){
                    //array.push(xmlhttp.readyState);
                   //5.判断服务器端的交互是否完成,服务器端是否正确返回的数据
                   if(xmlhttp.readyState == 4){
                    //和服务器的交互完成
                     if(xmlhttp.status == 200){
                        //表示服务器响应代码是200,正确返回了数据
                        //纯文本数据的接受方法
                        var message = xmlhttp.responseText;
                        //xml数据对应的dom对象的接受方法
                        //使用的前提,服务器设置contenttype为text/xml
                        
                        //固定用法:向div中填充文本的方法
                        var div=document.getElementById("message");
                        div.innerHTML=message;
                        //alert(array);
                     }
                   }
           

四、注意


(1)使用get方式需要注意:
1 对于get请求(或凡涉及到url传递参数的),被传递的参数都要先经encodeURIComponent方法处理.例:var url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent

(content)+"&id=1" ;


(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"];


  总之,虽然两种提交方式可以统一用Request("strName")来获取提交数据,但是这样对程序效率有影响,不推荐使用。一般来说,尽量避免使用Get方式提交表单,因为有可能会导致安全问题

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 21
    评论
在AJAX,GET和POST是两种常见的请求方法。 1. GET请求:通过URL参数传递数据,将数据附加在URL的末尾。GET请求通常用于获取数据,不应该用于敏感信息的传递。GET请求的特点包括: - 数据以键值对的形式附加在URL后面,例如:`http://example.com/api?param1=value1&param2=value2` - GET请求对参数长度有限制,一般为2048个字符 - GET请求可以被缓存 - GET请求可以被收藏为书签 2. POST请求:通过HTTP消息体传递数据,将数据放在请求的消息体POST请求通常用于向服务器发送数据,包括敏感信息。POST请求的特点包括: - 数据不会附加在URL后面,而是通过消息体发送 - POST请求对参数长度没有限制 - POST请求不会被缓存 - POST请求不会被收藏为书签 在AJAX,使用GET和POST请求可以通过XMLHttpRequest对象或者fetch函数来实现。例如,在JavaScript使用XMLHttpRequest对象发送GET请求的示例代码如下: ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com/api?param1=value1&param2=value2', true); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { var response = xhr.responseText; // 处理响应数据 } }; xhr.send(); ``` 使用fetch函数发送POST请求的示例代码如下: ```javascript fetch('http://example.com/api', { method: 'POST', body: JSON.stringify({ param1: 'value1', param2: 'value2' }) }).then(function(response) { if (response.ok) { return response.json(); } else { throw new Error('Error: ' + response.status); } }).then(function(data) { // 处理响应数据 }).catch(function(error) { console.log(error); }); ``` 这些示例只是简单的演示,实际使用可能需要根据具体情况进行参数的设置和错误处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值