GET方法和POST方法详解对比（有实际例子，看起来简单易懂）

最新推荐文章于 2024-04-11 09:49:41 发布

Rapper_cl

最新推荐文章于 2024-04-11 09:49:41 发布

阅读量3.8k

点赞数 2

分类专栏： Ajax 文章标签： GET和POST详解

本文链接：https://blog.csdn.net/m0_37510446/article/details/90026763

版权

Ajax 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

上面我们讲解了Ajax的原理和工作流程，这篇我们就来讲讲AJAX在向服务器发送请求的两种方式的对比吧！
这里先复习一下：Ajax的工作流程
1创建XMLHttpRequest对象，也就是请求对象
2设置监听方法，通过onreadystatechange=function(）来完成
3设置请求(请求方式，请求地址，是否异步)
4发送请求
这里需要注意，请求方式有GET和POST，但是只有当请求方式为POST，发送请求的send（）方法中，才可以有string参数:
我们先来分别实现一个GET请求和POST请求之后，再来仔细区分吧，这样更容易理解：
一个简单的GET请求

<!DOCTYPE  html>
<html>
<head>
<mete  charset="utf-8"/>
<script>
function loadXMLDoc(){
/*创建请求对象*/
var xmlhttp=new XMLHttpRequest();
/*设置监听方法*/
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("test").innerHTML=xmlhttp.responseText;
}
}
/*设置请求,请求方式，请求地址，是否异步*/
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
/*发送请求*/
xmlhttp.send();
}
</script>
</head>
<body>
<h1>AJAX的GET方法</h1>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="test"></div>
<p><a href="/try/ajax/demo_get.php" target="_blank">demo_get</a></p>
</body>
</html>

建议将该段代码在菜鸟教程的在线编译器进行编译，因为我需要服务器数据，所以这里的数据，采用的是菜鸟教程的服务器端数据
通过上面这段代码得到的很有可能是缓存的结果因为我们只发送了请求，多次执行这个请求时，取出的就很可能是缓存结果，因为服务器会把我们的请求当做是同一个请求，所以为了避免这种情况，我们可以像URL请求地址中，添加一个唯一的ID：
1、在 Ajax 的 URL 参数后加上 “?fresh=” + Math.random();
2、在 URL 参数后加上 “?timestamp=” + new Date().getTime();
这两种办法都可以解决，同一原理

<!DOCTYPE  html>
<html>
<head>
<mete  charset="utf-8"/>
<script>
function loadXMLDoc(){
/*创建请求对象*/
var xmlhttp=new XMLHttpRequest();
/*设置监听方法*/
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("test").innerHTML=xmlhttp.responseText;
}
}
/*设置请求,请求方式，请求地址，是否异步*/
xmlhttp.open("GET","/try/ajax/demo_get.php?t="+new Date().getTime(),true);
/*发送请求*/
xmlhttp.send();
}
</script>
</head>
<body>
<h1>通过添加唯一ID来防止ajax请求缓存</h1>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="test"></div>
<p><a href="/try/ajax/demo_get.php" target="_blank">demo_get</a></p>
</body>
</html>

以上就是GET请求了，接下来看看另外一位主角，POST
一个简单的POST请求

<!DOCTYPE  html>
<html>
<head>
<mete  charset="utf-8"/>
<script>
function loadXMLDoc(){
/*创建请求对象*/
var xmlhttp=new XMLHttpRequest();
/*设置监听方法*/
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("test").innerHTML=xmlhttp.responseText;
}
}
/*设置请求,请求方式，请求地址，是否异步*/
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
/*发送请求*/
xmlhttp.send();
}
</script>
</head>
<body>
<h1>AJAX的POST方法</h1>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="test"></div>
<p><a href="/try/ajax/demo_post.php" target="_blank">demo_post</a></p>
</body>
</html>

这个例子就看起来和GET差不多，好了，接下来，看看POST的不同之处
通过send（）方法发送数据（使用send（）发送数据的时候，需要setRequestHeader()来添加HTTP头，然后再send（）方法中规定我们所需要发送的数据

<!DOCTYPE  html>
<html>
<head>
<mete  charset="utf-8"/>
<script>
function loadXMLDoc(){
/*创建请求对象*/
var xmlhttp=new XMLHttpRequest();
/*设置监听方法*/
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("test").innerHTML=xmlhttp.responseText;
}
}
/*设置请求,请求方式，请求地址，是否异步*/
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
/*发送请求，需要添加http请求头*/
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>
<h1>AJAX的POST方法</h1>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="test"></div>
<p><a href="/try/ajax/demo_post2.php" target="_blank">demo_post2</a></p>
</body>
</html>

注意上面的setRequestHeader这个方法；
其语法：setRequestHeader（bstrHeader,bstrValue)；
bstrHeader:字符串，头名称
bstrValue 字符串，值
通常在HTTP协议中在，客户端向服务端取得某个页面数据时，必须发送一个HTTP协议的头文件告诉服务器，要下载什么信息以及相关的参数。
该setRequestHeader只是请求对象XMLHttpRequest为添加或修改HTTP头提供的一个接口方法。
send（string）中string的值，就是添加或修改HTTP头的数据
其中URL请求地址，就是服务器上文件的地址，该文件可以是任何类型的文件，TXT，xml或.php.asp（这些脚本文件在传回响应之前，可以子啊服务器上执行任务）等
第三个参数是否异步，
因为AJAX是异步的JavaScript和XML，所以其XMLHttpRequest对象如果要用于AJAX，其open（）方法的async，方法就必须设置为true；
（设置为异步，可以在等待服务器响应时，执行其他脚本，响应之后，在对该响应进行处理）

看了上面几个例子，相信大家对于GET和POST有了一定了解；
接下来就总结一下，他们的区别：
有无数据量限制，GET传输时有数据量限制适合发送的请求只能是256kb，POST无数据量限制，差不多可以达到4m
发送是否包含用户输入信息，GET传输没有POST稳定和可靠
是否简单查询信息，若只是简单的查询，那么可以使用GET，速度快
是否涉及更新服务器上的文件或数据库，若涉及，那么使用POST

Rapper_cl

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
GET方法和POST方法详解对比（有实际例子，看起来简单易懂）

上面我们讲解了Ajax的原理和工作流程，这篇我们就来讲讲AJAX在向服务器发送请求的两种方式的对比吧！这里先复习一下：Ajax的工作流程1创建XMLHttpRequest对象，也就是请求对象2设置监听方法，通过onreadystatechange=function(）来完成3设置请求(请求方式，请求地址，是否异步)4发送请求这里需要注意，请求方式有GET和POST，但是只有当请求方式为...
复制链接

扫一扫