`
linhui_dragon
  • 浏览: 155062 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Ajax中Get请求与Post请求的区别

    博客分类:
  • AJAX
 
阅读更多

我们在使用Ajax时,当我们向服务器发送数据时,我们可以采用Get方式请求服务器,也可以使用Post方式请求服务器.那么,我们什么时候该采用Get方式,什么时候该采用Post方式呢?

Get请求和Post请求的区别
1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
2.使用Get请求发送数据量小,Post请求发送数据量大

例子:页面的HTML代码:
<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <style type="text/css">        *        {            margin:8px;        }    </style></head><body>    <label for="txt_username">        姓名:</label>    <input type="text" id="txt_username" />    <br />    <label for="txt_age">        年龄:</label>    <input type="text" id="txt_age" />    <br />    <input type="button" value="GET" id="btn_get" onclick="btn_get_click();" />    <input type="button" value="POST" id="btn_post" onclick="btn_post_click();" />    <div id="result">    </div></body></html>

区别:客户端脚本代码:Get请求
function btn_get_click() {    var xmlHttp = window.XMLHttpRequest ?         new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");    var username = document.getElementById("txt_username").value;    var age = document.getElementById("txt_age").value;    //添加参数,以求每次访问不同的url,以避免缓存问题    xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent(username)        + "&age=" + encodeURIComponent(age) + "&random=" + Math.random());    xmlHttp.onreadystatechange = function () {        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {            document.getElementById("result").innerHTML = xmlHttp.responseText;        }    }    //发送请求,参数为null    xmlHttp.send(null);} 

Post请求
function btn_post_click() {    var xmlHttp = window.XMLHttpRequest ?        new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");    var username = document.getElementById("txt_username").value;    var age = document.getElementById("txt_age").value;                var data = "username=" + encodeURIComponent(username)        + "&age=" + encodeURIComponent(age);    //不用担心缓存问题    xmlHttp.open("post", "Server.aspx", true);    //必须设置,否则服务器端收不到参数    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    xmlHttp.onreadystatechange = function () {        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {            document.getElementById("result").innerHTML = xmlHttp.responseText;        }    }    //发送请求,要data数据    xmlHttp.send(data);}

区别:

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

2.post请求必须设置Content-Type值为application/x-form-www-urlencoded

3.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数

对于客户端代码中都请求的server.aspx,我们来看server.aspx.cs中的代码:
protected void Page_Load(object sender, EventArgs e)
{
    string username = string.Empty;
    int age = 0;

    if (Request.HttpMethod.ToUpper().Equals("GET"))
    {
        username = Request.QueryString["username"];

        age = int.Parse(Request.QueryString["age"]);
    }
    else
    {
        username = Request.Form["username"];

        age = int.Parse(Request.Form["age"]);
    }

    Response.Clear();

    Response.Write("姓名:'" + username + "'<br/>年龄:" + age + "<br/>时间:'" + DateTime.Now.ToString() + "'");

    Response.End();
}
此处,我们发现了get请求和post请求在服务器端的区别:

在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数.

关于服务器端获取数据,我们还可以使用一个通用的获取参数的方式即Request["username"],但是此方法存在一个问题,我们随后来讲.

下面,我们使用HttpWatch来看下,当使用get和post方式发送请求时,客户端究竟发送了什么,收到了什么.

对于get请求和post请求中的时间差,请不要在意,因为是在不同时间按下的get按钮和post按钮.

从请求的url可以看出,get请求是带着参数的,post请求的url则不带.


从cache可以看出,get请求在发送后,即被缓存,而post请求时 never cached.

因为get请求的参数是在url中的,所以Query String中是有值的.而post请求则没有.

在Post Data里,因为get请求的字符串是在url中附带的,所以Post Data中无数据.

从服务器获取的内容都是一致的.

http://www.cnblogs.com/oneword/archive/2011/06/06/2073533.html
分享到:
评论

相关推荐

    Ajax中get和post区别

    "Ajax中Get和Post请求的区别" Ajax作为异步JavaScript和XML的简写,是一种创建交互式网页的技术。其中,Get和Post是两种常用的HTTP请求方法,尽管它们都是用于将数据从客户端发送到服务器端,但是它们之间存在着很...

    Ajax中get与post请求详解

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

    ajax POST 与GET提交的区别

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

    Ajax Get、Post请求

    POST请求没有GET请求的长度限制,因此可以传递更复杂的数据结构。以下是一个Ajax POST请求的例子: ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', 'https://example.com/api/data'); xhr....

    图书馆添加删除判断 ajax.get 请求 ajax.post响应 考试专用

    1. **图书添加**:在用户填写完图书信息并提交时,前端可以使用`$.ajax()`函数(jQuery库中的实现)或者原生JavaScript的`XMLHttpRequest`对象发起一个POST请求,将图书数据发送到后台服务器。服务器验证数据无误后...

    ajax的get请求源码

    ### AJAX GET 请求解析 #### 一、概述 Ajax(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术,它能够使网页实现局部刷新,而无需重新加载整个页面。本篇文章将通过一个具体的示例来深入分析 ...

    实例详解Android Webview拦截ajax请求

    这意味着我们不能在 Webview 中干涉 JavaScript 发起的 HTTP 请求,而有时候我们确实需要能够截获 Ajax 请求并实现一些功能,如统一的网络请求管理、 Cookie 同步、证书校验、访问控制等。 那么,我们可以转换思路...

    ajax get请求中文参数乱码解决

    4. 使用POST请求:如果仍然遇到困难,可以考虑改用POST请求,因为POST请求的数据通常不会被显示在URL中,而且处理编码问题相对简单。 在处理Ajax GET请求中文参数乱码时,关键是确保客户端和服务器端在编码和解码...

    html页面模式get/post请求

    在这个场景中,我们探讨的主题是如何利用HTML页面来模拟GET和POST请求,尤其是处理POST请求时如何以JSON(JavaScript Object Notation)格式传递参数。这在前端开发、网页表单提交以及API测试中是非常常见且重要的...

    Ajax 中的高级请求和响应

    此外,还可以使用不同的HTTP请求类型,如GET、POST、PUT、DELETE等,以适应不同类型的交互需求。 在Ajax应用中,理解就绪状态的变化和HTTP状态代码的含义至关重要。例如,当遇到错误状态时,如status为404,可以...

    服务端模拟ajax支持发起GETPOSTPUTDELETE请求

    在IT行业中,服务端模拟AJAX请求是一种常见的测试和开发技术。这主要涉及到Web应用程序的交互,特别是客户端(浏览器)与服务器之间的异步数据通信。本文将深入探讨如何使用JavaScript来模拟GET、POST、PUT和DELETE...

    异步请求.post()和.ajax({})的区别

    异步请求是现代Web开发中常见的一种技术,用于在不阻塞当前页面执行的情况下与服务器进行数据交换。在JavaScript中,有两...无论选择哪种方法,了解和掌握GET与POST请求的区别对于构建高效、安全的Web应用都至关重要。

    Java 模拟Ajax POST GET 提交代码

    Java 模拟Ajax POST GET 提交代码,实测很好用。

    AJAX发送请求与接受

    **AJAX(Asynchronous ...总的来说,AJAX的GET和POST请求是前端与后端通信的重要手段,它们在网页动态加载、无刷新更新内容等方面发挥了巨大作用。了解并熟练掌握AJAX的使用,能显著提升Web应用的性能和用户体验。

    ajax快速解决参数过长无法提交成功的问题

    比如我们经常这样写一个ajax的post请求: $.ajax({ type: "post", // post or get contentType:"application/json;charset=utf-8", data: “requestTag=”+tag+"&content="+content, //请求参数 url: "po

    chrome扩展插件获取ajax请求记录

    在IT领域,尤其是在Web开发中,Ajax(Asynchronous JavaScript and XML)是一种常用的技术,它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验,因为用户不再...

    ajax处理跨域请求

    在jQuery中,使用$.ajax()方法发起AJAX请求时,可以设置`crossDomain`参数为`true`来开启跨域请求。例如: ```javascript $.ajax({ url: 'http://example.com/api/data', // 跨域的URL type: 'GET', crossDomain...

    Ajax的小封装 get,post请求

    在描述中提到了对Ajax的get请求的小封装,这意味着我们将会讨论如何用JavaScript来构建一个简易的Ajax GET请求函数,并可能涉及POST请求的实现。 ### 1. Ajax GET 请求小封装 GET请求是最常见的HTTP方法,用于从...

    html通过 ajax jsonp跨域请求接收和传送数据

    它利用JavaScript创建异步HTTP请求,使得网页可以与服务器进行通信,从而实现数据的动态加载和更新。 **JSONP** JSONP(JSON with Padding)是一种解决跨域问题的非标准方法,主要用于JSON数据的获取。JSON是一种轻...

Global site tag (gtag.js) - Google Analytics