`

原创:Ajax中get与post请求详解

阅读更多
   学习ajax技术的时候,很多同学对于ajax中get与post请求总是疑问不解,为了给学员解决疑问,现将授课中对get与post的请求的总结发表于学生大本营中,希望能给你带来帮助. 
   在ajax入门详解中我也简单的介绍了它们之间的使用区别,为了使学员能够彻底的明白,现将如授课中的总结发表如下。
一、get()和post()基本区别

1.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

2.对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。

3.get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,因服务器的不同而异。

4.get安全性非常低,post安全性较高。

5.<form method="get" action="a.asp?b=b">跟<form method="get" action="a.asp">是一样的,也就是说,method为get时action页面后边带的参数列表会被忽视;而<form method="post" action="a.asp?b=b">跟<form method="post" action="a.asp">是不一样的。

二、谈Ajax的Get和Post的区别

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

Ajax发送请求:如果是get请求send(参数)参数:必须是null或xhr.send();

    get请求就不必要设置 xhr.setRequestHeader(header,value)

备注:如果xhr.send(参数);参数不为空情况下,在某些浏览器中会自动转换成post请求方式 您可以通过request.getMethod();方法获取请求的方式

实例:

function getAjax(){ 

     //获取xhr对象
     var xhr = getXhr();
     //规定请求类型     
     xhr.open("get","main.jsp?username=123",true);
     //发送请求
     xhr.send();
    //处理服务器响应事件
     xhr.onreadystatechange = function (){
          //判读是否处理完毕 与判读服务器是否处理成功!
          if(xhr.readyState==4 && xhr.status==200){
                    alert(xhr.responseText);
              }
          }
      } 
}
使用get方式需要注意
    (1)对于get请求(或凡涉及到url传递参数的),被传递的参数都要先经(预编码处理)encodeURIComponent方法处理.例:var url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent(content)+"&id=1" ;

2.Post方式:
   当使用POST方式时,浏览器把各表单字段元素及其数据作为HTTP消息      的实体内容发送给Web服务器,而不是作为URL地址的参数进行传递,使用  POST方式传递的数据量要比使用GET方式传送的数据量大的多发送请求:如果是post请求send(参数)参数:参数可以是null或者xhr.send()|send(带有参数的)post请求在传递值的情况下必须 设置          xhr.setRequestHeader(header,value)

实例:
function postAjax(){ 
     //获取xhr对象
     var xhr = getXhr();
     //规定请求类型     
     xhr.open("post","main.jsp",true);
    //设置头信息
     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
 //发送参数
 xhr.send("username=345&pass=123");
//相应事件处理
   xhr.onreadystatechange = function (){
  //判读是否处理完毕 与判读服务器是否处理成功!
      if(xhr.readyState==4 && xhr.status==200){
                    alert(xhr.responseText);
              }
    } 
}

使用Post方式需注意:
 (1).设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量.通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")。例:xhr.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(参数)方法中发送,例: xhr.send(name); 如果是  get  方    式,直接 xmlHttp.send(null);

(4).服务器端请求参数区分Get与Post。如果是get方式则$username = $_GET["username"]; 如果是post方式,则$username =$_POST["username"];

 总之,GET方式传送数据量小,处理效率高,安全性低,会被缓存,而POST反之。






以上内容归redarmy_chen总结创建,如需转载请添加出处,如有疑问请发送到redarmy_chen@qq.com
 


     

分享到:
评论

相关推荐

    Ajax中get与post请求详解

    Ajax 中 get 与 post 请求的详细解释 Ajax 技术中 get 与 post 两种请求方式是许多开发者经常遇到的疑问,以下将详细解释两者的区别,并提供实例代码。 一、get 与 post 的基本区别 1. 参数传递方式:get 请求将...

    ajax POST 与GET提交的区别

    ### AJAX POST 与 GET 提交的区别详解 #### 一、GET与POST基本概念及应用场景 在探讨AJAX中GET和POST的区别之前,我们先来了解一下这两种请求方式的基本概念。 **GET**请求通常用于获取资源信息,它将参数拼接到...

    jQuery中Ajax的get、post等方法详解.docx

    $.post()方法与$.get()类似,但使用POST方式提交数据,更适用于发送大量或敏感数据,因为POST请求不会显示在浏览器地址栏。基本语法如下: ```javascript $.post(url, data, success, dataType); ``` 两者之间的...

    jQuery中Ajax的get、post等方法详解.pdf

    本文主要解析jQuery中的$.get()、$.post()等Ajax方法,以及相关的$.getScript()和$.getJSON()方法。 首先,$.get()方法是使用GET方式发送异步请求,基本语法如下: ```javascript $.get(url, data, callback, type...

    用AJAX的Get和Post调用Servlet的简单示例.doc

    本文将深入探讨如何利用AJAX的GET和POST方法调用Servlet,从而实现数据的异步请求和响应。 #### 二、理解AJAX与Servlet的关系 AJAX是一种前端技术,而Servlet是Java后端处理请求的一种方式。在基于AJAX的Web应用中...

    ajax以GET和POST方式调用WCF

    2. **POST方式**:数据放在请求体中,对数据量无限制,适合传递大量或敏感数据。 在调用WCF服务时,我们需要创建一个WCF服务接口和实现类。例如,定义一个简单的服务接口`IService1`: ```csharp [ServiceContract...

    Ajax中POST和GET的区别

    ### Ajax中POST和GET的区别详解 #### 一、概述 在Web开发中,尤其是在使用Ajax进行前后端交互的过程中,GET和POST是最常见的两种HTTP请求方式。这两种方式虽然都是用来发送请求给服务器,但在具体实现机制、适用...

    js get和post请求实现代码解析.docx

    ### JavaScript中的GET与POST请求详解 在Web开发中,客户端与服务器之间的数据交换至关重要。JavaScript提供了多种方式来发送HTTP请求,其中最常用的就是GET和POST请求。这两种请求方式各有特点,适用于不同的场景...

    Ajax请求详解

    ### Ajax请求详解 #### 一、简单的Ajax请求 Ajax(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新,这意味着可以在不重新...

    Ajax:Web2.0 开发技术详解

    6. **jQuery和Ajax**:jQuery库简化了Ajax的使用,书中可能包含jQuery的Ajax方法,如$.ajax()、$.get()、$.post()等,并展示如何结合jQuery进行Ajax开发。 7. **Ajax应用实例**:通过具体的网页应用示例,如动态...

    Ajax 开发详解,Ajax开发详解

    - **初始化请求**:调用`open()`方法设置请求类型(GET或POST)、URL和是否异步。 - **发送请求**:使用`send()`方法发送请求,如果是GET请求,参数可以为空;POST请求需将数据作为参数传递。 - **监听状态变化**...

    Ajax实战:实例详解源代码

    2. 打开连接,指定请求类型(GET、POST等)、URL和是否异步。 3. 设置响应处理函数,当请求状态改变时执行。 4. 发送请求。 ### 三、数据格式 虽然名称中包含XML,但Ajax并不仅限于处理XML数据,还可以处理JSON、...

    掌握Ajax系列7:在请求和响应中使用XML(上)

    【Ajax中的XML使用详解】 Ajax,全称Asynchronous JavaScript and XML,是一种创建动态网页的技术,允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。虽然名称中的“XML”代表可扩展标记语言...

    Ajax 中文手册 + Ajax开发详解

    POST请求则在send()方法中传递数据。 5. **服务器处理请求**:接收并处理来自客户端的请求。 6. **响应返回**:服务器将结果以特定格式(如XML或JSON)返回。 7. **状态检查**:通过XMLHttpRequest对象的...

    Ajax的post方法的使用

    ### Ajax的POST方法详解 #### 一、引言 在Web开发中,异步JavaScript与XML(Ajax)技术被广泛应用于提升用户体验,实现无需刷新页面即可加载数据的功能。本文将重点探讨Ajax中的POST方法,包括其基本原理、应用...

    jQuery中ajax - get() 方法实例详解

    1. 跨域问题:如果Ajax请求的URL与发起请求的网页不在同一个域中,浏览器会阻止请求,除非服务器配置了CORS(跨源资源共享)来允许此跨域请求。 2. 缓存问题:GET请求可能会被浏览器缓存,这可能会导致你获取到旧的...

    AJAX详解,菜鸟请进

    1. **异步性**:AJAX的核心特性是异步数据传输,意味着在用户与页面交互时,可以在后台发送请求并接收响应,而不会阻塞用户界面。 2. **JavaScript**:AJAX主要使用JavaScript语言来创建和执行请求,处理服务器返回...

    Ajax异步请求

    **Ajax异步请求详解** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新,大大提升了用户体验。...

    ajax详解与实战

    **Ajax详解与实战** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。它通过JavaScript在后台与服务器进行少量数据交换,使得网页实现异步更新,极大地提升了...

Global site tag (gtag.js) - Google Analytics