龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

Ajax get和post区别介绍

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别. 1、 get是把参数数据队列加到提交表单的ACTION属性所指的U
Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解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 的 Post,程序效果请参看 Ajax 的 Post 传值。

 代码如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Post 传值</title>
</head>

<script language="javascript">
function saveUserInfo()
{
 //获取接受返回信息层
 var msg = document.getElementById("msg");

 //获取表单对象和用户信息值
 var f = document.user_info;
 var userName = f.user_name.value;
 var userAge   = f.user_age.value;
 var userSex   = f.user_sex.value;

 //接收表单的URL地址
 var url = "ajax_output1.php";

 //需要POST的值,把每个变量都通过&来联接
 var postStr   = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;

 //实例化Ajax
 //var ajax = InitAjax();


 var ajax = false;
 //开始初始化XMLHttpRequest对象
 if(window.XMLHttpRequest)
 {  //Mozilla 浏览器
  ajax = new XMLHttpRequest();
        if (ajax.overrideMimeType)
  { //设置MiME类别
            ajax.overrideMimeType("text/xml");
        }
 }
 else if (window.ActiveXObject)
 {  // IE浏览器
  try
  {
   ajax = new ActiveXObject("Msxml2.XMLHTTP");
     }
  catch (e)
  {
         try
   {
             ajax = new ActiveXObject("Microsoft.XMLHTTP");
            }
   catch (e) {}
         }
 }
    if (!ajax)
 {  // 异常,创建对象实例失败
  window.alert("不能创建XMLHttpRequest对象实例.");
  return false;
 }

 //通过Post方式打开连接
 ajax.open("POST", url, true);

 //定义传输的文件HTTP头信息
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

 //发送POST数据
 ajax.send(postStr);

 //获取执行状态
 ajax.onreadystatechange = function()
 {
     //如果执行状态成功,那么就把返回信息写到指定的层里
     if (ajax.readyState == 4 && ajax.status == 200)
  {
      msg.innerHTML = ajax.responseText;
     }
 }
}
</script>

<body >
<div id="msg"></div>
<form name="user_info" method="post" action="">
姓名:<input type="text" name="user_name" /><br />
年龄:<input type="text" name="user_age" /><br />
性别:<input type="text" name="user_sex" /><br />
<input type="button" value="提交表单" onClick="saveUserInfo()">
</form>
</body>
</html>

然后是 Ajax 的 Get,用途是从服务器获取值。

程序效果请参看 Ajax 的 Get 传值。

 代码如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Get 传值</title>
</head>

<script language="javascript">
function saveUserInfo()
{
 //获取接受返回信息层
 var msg = document.getElementById("msg");

 //获取表单对象和用户信息值
 var f = document.user_info;
 var userName  = f.user_name.value;
 var userAge   = f.user_age.value;
 var userSex   = f.user_sex.value;

 //接收表单的URL地址
 var url = "ajax_output2.php? user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;

 //实例化Ajax
 //var ajax = InitAjax();

 var ajax = false;
 //开始初始化XMLHttpRequest对象
 if(window.XMLHttpRequest)
 {
  //Mozilla 浏览器
        ajax = new XMLHttpRequest();
        if (ajax.overrideMimeType)
  {//设置MiME类别
         ajax.overrideMimeType("text/xml");
  }
 }
 else if (window.ActiveXObject)
 {  // IE浏览器
     try
  {
         ajax = new ActiveXObject("Msxml2.XMLHTTP");
        }
  catch (e)
  {
   try
   {
             ajax = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
 }
    if (!ajax)
 {  
  // 异常,创建对象实例失败
        window.alert("不能创建XMLHttpRequest对象实例.");
        return false;
    }              

 //通过Post方式打开连接
 ajax.open("GET", url, true);

 //发送GET数据,已经在URL中赋了值所以send那里只要加个空参.
 ajax.send(null);

 //获取执行状态
 ajax.onreadystatechange = function()
 {
     //如果执行状态成功,那么就把返回信息写到指定的层里
     if (ajax.readyState == 4 && ajax.status == 200)
  {
      msg.innerHTML = ajax.responseText;
     }
 }
}
</script>

<body>
<div id="msg"></div>
<form name="user_info" method="post" action="">
<input type="text" name="user_name" style="display:none;" />
<input type="text" name="user_age" style="display:none;" />
<input type="text" name="user_sex" style="display:none;" />
<input type="button" value="获取服务器变量" onClick="saveUserInfo()">
</form>
</body>

ajax_output2.php

 代码如下
<?
  $user_name = "Gonn";
  echo $user_name;
  $user_age = "24";
  echo $user_age;
  $user_sex = "Man";
  echo $user_sex;
?>



总结


现在我们再看看通过URL发送请求时,get方式和post方式的区别。用下面的例子可以很容易的看到同样的数据通过GET和POST来发送的区别, 发送的数据是 username=张三 :
GET 方式, 浏览器键入 http://localhost?username=张三

 代码如下


GET /?username=%E5%BC%A0%E4%B8%89 HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*
Accept-Language: zh-cn
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)
Host: localhost
Connection: Keep-Alive

POST 方式:

 代码如下

POST / HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*
Accept-Language: zh-cn
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)
Host: localhost
Content-Length: 28
Connection: Keep-Alive

username=%E5%BC%A0%E4%B8%89


精彩图集

赞助商链接