ajax的post和get请求数据
常见的 HTTP 请求方式
- 每一个 HTTP 请求在请求行里面会有一个东西叫做请求方式
- 不同的请求方式代表的含义不同
- GET： 一般用于获取一些信息使用（获取列表）
- POST： 一般用于发送一些数据给服务端（登录）
- PUT： 一般用于发送一些数据给服务当让其添加新数据（注册）
- DELETE： 一般用域删除某些数据
- HEAD： 类似于 GET 的请求，只不过一般没有响应的具体内容，用于获取报文头
- CONNECT： HTTP/1.1 中预留的方式，一般用于管道链接改变为代理的时候使用
- PATCH： 是和 PUT 方式类似的一个方式，一般用于更新局部数据
- OPTIONS： 允许客户端查看服务端性能
- 我们比较常用的就是 GET 和 POST
GET 请求
- 参数以
querystring的形式发送，也就是直接拼接在 请求路径的后面 - GET 请求会被浏览器主动缓存
- GET 请求根据不同的浏览器对长度是有限制的（下面可能浏览器会有所变化，以官网为准）
- IE： 2083 个字符
- FireFox： 65536 个字符
- Safari： 80000 个字符
- Opera： 190000 个字符
- Chrome： 8182 个字符
- APACHE(server)： 理论上接受的最大长度是 8192 个字符（有待商榷）
- 对参数的类型有限制，只接受 ASCII 码的格式
- GET 请求是明文发送，相对不安全
POST 请求
- 参数以
request body的形式发送，也就是放在请求体中 - POST 请求不会被浏览器主动缓存，除非手动设置
- POST 请求理论上是没有限制的，除非服务端做了限制
- 对参数类型没有限制，理论上可以传递任意数据类型，只不过要和请求头对应
- POST 请求是密文发送，相对安全
常常用的ajax，怎么能不知道这常用的两种方法呢？如下
AJAX的GET和POST请求数据
GET请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<p>用户名：<input type="text" id="username"></p>
<p>密 码：<input type="password" id="password"></p>
<p><button id="btn">登录</button></p>
</div>
<script>
var box = document.querySelector("#box")
var username = document.querySelector("#username")
var password = document.querySelector("#password")
var btn = document.querySelector("#btn")
btn.onclick = function () {
// 1、获取数据
var username_value = username.value;
var password_value = password.value
console.log(username_value, password_value)
// 2、数据交互，发送数据
// 发送请求 xhr 发送请求
// 2.1、发送请求
var xhr = new XMLHttpRequest()
// 2.2、配置xhr对象
var url = "./03_get.php?username=" + username_value + "&password=" + password_value
xhr.open("GET", url)
// GET 请求如何携带数据 ; 就是把数据放在地址栏里面;
// url?key=value :
// 字段的定义一般情况下都是后端主导的;
// 写入对应的字段即可;
// var str = "./03_get.php?username=" + username_value +"&password=" + password_value;
// console.log(str);
// 2.3、发送http请求
xhr.send()
// 2.4、接收请求的响应
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
if (xhr.responseText === "登录成功") {
alert("恭喜登录成功！")
} else {
alert("抱歉，请重新登录！")
}
}
}
}
</script>
</body>
</html>
GET的PHP文件
<?php
header("content-type:text/html;charset=utf8");
// 后端根据前端 发送的数据，做一个逻辑
// 登录逻辑
// 接收前端的数据：
$username=$_GET["username"];
$password=$_GET["password"];
// 在后端对数据进行验证
if($username ==="fqniu" && $password === "123456"){
echo "登录成功";
} else {
echo "登录失败";
}
?>
GET补充：封装url
//引用 高级程序设计第三版内容 第21章ajax和comet
GET 是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加
到 URL 的末尾，以便将信息发送给服务器。对 XHR 而言，位于传入 open() 方法的 URL 末尾的查询字
符串必须经过正确的编码才行。
使用 GET 请求经常会发生的一个错误，就是查询字符串的格式有问题。查询字符串中每个参数的名
称和值都必须使用 encodeURIComponent() 进行编码，然后才能放到 URL 的末尾；而且所有名-值对
儿都必须由和号（&）分隔，如下面的例子所示。
xhr.open("get", "example.php?name1=value1&name2=value2", true);
// 封装这个函数可以辅助向现有 URL 的末尾添加查询字符串参数：
function addURLParam(url, name, value) {
url += (url.indexOf("?") == -1 ? "?" : "&");
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
这个 addURLParam() 函数接受三个参数：要添加参数的 URL、参数的名称和参数的值。这个函数
首先检查 URL 是否包含问号（以确定是否已经有参数存在）。如果没有，就添加一个问号；否则，就添
加一个和号(&)。然后，将参数名称和值进行编码，再添加到 URL 的末尾。最后返回添加参数之后的 URL。
var url = "./example.php";
//添加参数 如下：
url = addURLParam(url, "username", "fqniu");
url = addURLParam(url, "password", "123456");
console.log(url);
//初始化请求
xhr.open("get", url, false);
// 在这里使用 addURLParam() 函数可以确保查询字符串的格式良好，并可靠地用于 XHR 对象。
POST请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<p>用户名：<input type="text" id="username"></p>
<p>密 码：<input type="password" id="password"></p>
<p><button id="btn">登录</button></p>
</div>
<script>
var box = document.querySelector("#box")
var username = document.querySelector("#username")
var password = document.querySelector("#password")
var btn = document.querySelector("#btn")
btn.onclick = function () {
// 1、获取数据
var username_value = username.value;
var password_value = password.value
console.log(username_value, password_value)
// 2、数据交互，发送数据
// 发送请求 xhr 发送请求
// 2.1、发送请求
var xhr = new XMLHttpRequest()
// 2.2、配置xhr对象
xhr.open("POST", "./04_post.php")
// POST 请求如何携带数据 ;
// POST 请求数据放在了请求体之中;
// 在send之中传入 key=value&key=value 形式的字符串以发送数据;
var data = "username=" + username_value + "&password=" + password_value
// 如果要发送post请求，请一定在send之前加入请求头设置;
// 请求的内容类型换成 表格-url编码类型;
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
// 2.3、发送http请求
xhr.send(data)
// 2.4、接收请求的响应
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
if (xhr.responseText === "登录成功") {
alert("恭喜登录成功！")
} else {
alert("抱歉，请重新登录！")
}
}
}
}
// 因为在正常发送post请求的时候,会把所有的字符串原样进行发送，不会被解析，所以发送时需要注意设置请求头;
// 注意事项 : 请求头设置一定要正在send之前;
</script>
</body>
</html>
POST需要的PHP文件
<?php
header("content-type:text/html:charset=uft8");
// 后端根据前端发送的数据做一个逻辑
// 登录逻辑
// 接收前端的数据 通过 $_POST 取得提交的数据
$username = $_POST["username"];
$password = $_POST["password"];
// 在后端对数据进行验证
if($username === "fqniu" && $password === "123456"){
echo "登录成功";
} else {
echo "登录失败";
}
?>
POST补充
// 引用 高级程序设计第三版内容 第21章ajax和comet
使用频率仅次于 GET 的是 POST 请求，通常用于向服务器发送应该被保存的数据。 POST 请求应该
把数据作为请求的主体提交，而 GET 请求传统上不是这样。 POST 请求的主体可以包含非常多的数据，
而且格式不限。在 open() 方法第一个参数的位置传入 "post" ，就可以初始化一个 POST 请求，
如下面的例子所示。
xhr.open("post", "example.php", true);
发送 POST 请求的第二步就是向 send() 方法中传入某些数据。由于 XHR 最初的设计主要是为了处
理 XML，因此可以在此传入 XML DOM 文档，传入的文档经序列化之后将作为请求主体被提交到服务
器。当然，也可以在此传入任何想发送到服务器的字符串。
注意：
如果不设置 Content-Type 头部信息，那么发送给服务器的数据就不会出现在 $_POST 超级全局变
量中。这时候，要访问同样的数据，就必须借助 $HTTP_RAW_POST_DATA 。
get和post注意点
与 GET 请求相比， POST 请求消耗的资源会更多一些。从性能角度来看，以发送相同的数据计， GET 请求的速度最多可达到 POST 请求的两倍。
推荐博客如下：
详说前端之ajax篇
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
