与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库） 向服务器发送大量数据（POST 没有数据量限制） 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
发送一个带有参数的 get 请求
get 请求的参数就直接在 url 后面进行拼接就可以
const xhr = new XMLHttpRequest() // 直接在地址后面加一个 ?，然后以 key=value 的形式传递 // 两个数据之间以 & 分割 xhr.open('get', './data.php?a=100&b=200') xhr.send()
这样服务端就能接受到两个参数 一个是 a，值是 100，一个是 b，值是 200 发送一个带有参数的 post 请求 post 请求的参数是携带在请求体中的，所以不需要再 url 后面拼接 const xhr = new XMLHttpRequest() xhr.open('post', './data.php') // 如果是用 ajax 对象发送 post 请求，必须要先设置一下请求头中的 content- type // 告诉一下服务端我给你的是一个什么样子的数据格式 xhr.setRequestHeader('content-type', 'application/x-www-form- urlencoded') // 请求体直接再 send 的时候写在 () 里面就行 // 不需要问号，直接就是 'key=value&key=value' 的形式 xhr.send('a=100&b=200')
// 接口文档 |
|
| // api | |
| // XMLHttpRequest 对象 | |
| // 1. 创建一个 ajax 对象 | |
| // open(method,url,async) |
| // send(string) 将请求发送到服务器。 | |
| // string：仅用于 POST 请求 | |
| var xhr = new XMLHttpRequest() | |
| // 2. 配置本次的请求信息 | |
| // 请求方式: 按照接口文档来进行书写 |
| // 请求地址: 按照接口文档来进行书写 | |
| // 是否异步: 默认是 true 表示异步请求, 选填为 false, 表示同步请求 | |
| // xhr 对象中的 open ⽅法是来配置请求信息的 | |
| // 第⼀个参数是本次请求的请求⽅式 get / post / put / ... |
| // 第⼆个参数是本次请求的 url | |
| // 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步 | |
| // xhr.open('请求⽅式', '请求地址', 是否异步) |
| xhr.open('GET', 'http://webview.happyjia.top/api/api/getBanner_index', true) |
| // 3. 配置一个请求完成后触发的事件 | |
| // 请求完整: 本次请求发送出去, 服务器接收到了我们的请求, 并且服务器返回的信息已经回到了浏览器 | |
| xhr.onload = function () { | |
| // 如何拿到后端返回的信息 |
| // 语法: xhr.responseText | |
| console.log(xhr.responseText) | |
| } |
| // 4. 把本次请求发送出去 | |
xhr.send() |
/* 第一次尝试 ajax */ // 1. 创建一个 ajax 对象 var xhr = new XMLHttpRequest() // 2. 配置本次的请求信息 // 请求方式: 按照接口文档来进行书写 // 请求地址: 按照接口文档来进行书写 // 是否异步: 默认是 true 表示异步请求, 选填为 false, 表示同步请求 xhr.open('GET', 'http://localhost:8888/test/first', true) // 3. 配置一个请求完成后触发的事件 // 请求完整: 本次请求发送出去, 服务器接收到了我们的请求, 并且服务器返回的信息已经回到了浏览器 xhr.onload = function () { // 如何拿到后端返回的信息 // 语法: xhr.responseText console.log(xhr.responseText) } // 4. 把本次请求发送出去 xhr.send() ``` ``` /* 第二次测试 ajax */ // 1. 创建ajax 对象 var xhr = new XMLHttpRequest() // 2. 配置本次的请求信息 xhr.open('GET', 'http://localhost:8888/test/second', true) // 3. 配置请求完成的事件 xhr.onload = function () { // 当后端返回的是 json 格式字符串的时候, 我们需要进行单独的解析 // 语法: JSON.parse(json格式字符串) // 返回值: 解析好的 js 格式的数据 var res = JSON.parse(xhr.responseText) console.log(res) } // 4. 发送出去 xhr.send() ``` ``` /* GET 和 POST 请求 */ // 1. GET 请求 // var xhr = new XMLHttpRequest() // // 需要携带参数 // // 因为是 GET 请求, 直接在地址后面进行参数的书写 // xhr.open('GET', 'http://localhost:8888/test/third?name=前端小灰狼&age=18', true) // xhr.onload = function () { // console.log(JSON.parse(xhr.responseText)) // } // xhr.send() // 2. POST 请求 var xhr = new XMLHttpRequest() // 注意: 因为是 POST 请求, 不需要在地址后面拼接参数 xhr.open('POST', 'http://localhost:8888/test/fourth', true) xhr.onload = function () { console.log(JSON.parse(xhr.responseText)) } // 注意: 当你发送 POST 请求, 并且需要携带参数的时候, 需要进行特殊说明 // 语法: xhr.setRequestHeader('content-type', 你传递参数的格式) xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded') // send 后面的() 就是书写请求体的位置 xhr.send('name=前端小灰狼&age=18')
