GET和POST请求方法的区别?
一、GET和POST是什么?
GET和POST请求方式无区别, 本质都是一次HTTP请求(TCP链接), 而HTTP请求报文中都包含请求行, 请求头, 请求体,我们可以在相应位置携带值给服务器。
二、两者之间的区别
概念区别:
GET 方法请求一个指定资源的表示形式,使用GET的请求应该只被用于获取数据
POST 方法用于将实体提交到指定的资源,通常导致在服务器上的状态变化或副作用
由于HTTP
的规定和浏览器/服务器的限制,导致他们在应用过程中会体现出一些区别
从w3schools得到的标准答案的区别:
GET | POST | |
---|---|---|
浏览器回退时是否会重新提交表单 | 不会 | 会 |
是否会被浏览器主动缓存 | 会 | 不会 |
是否会被浏览器主动cache | 会 | 不会,除非手动设置 |
支持何种编码方式 | 只能进行url编码 | 支持多种编码方式 |
在URL中传送的参数 | 有长度限制的 | 没有长度限制的 |
参数的数据类型 | GET只接受ASCII字符 | 没有限制 |
… | … | … |
ajax原理是什么?如何实现?
一、是什么?
AJAX 全称(Async Javascript and XML)
就是异步的 JavaScript 和 XML ,是一种创建交互式网页应用的网页开发技术,不用重新加载整个网页,就可与服务器交换顺序,并且更新部分网页。
Ajax 的原理简单来说就是通过XmlHttpRequest
对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript
来操作DOM
而更新页面
流程图:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4aIejMHI-1686469196515)(C:\Users\Spring\AppData\Roaming\Typora\typora-user-images\1686467815415.png)]
二、实现过程
创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
与服务器建立连接
通过 XMLHttpRequest
对象的 open()
方法与服务器建立连接
xhr.open(method, url, [async][, user][, password])
参数说明:
method:表示当前的请求方式,常见的有GET、POST
url:服务端地址
async:布尔值,表示是否异步执行操作,默认为true
user: 可选的用户名用于认证用途;默认为`null
password: 可选的密码用于认证用途,默认为`null
给服务端发送数据
通过 XMLHttpRequest
对象的 send()
方法,将客户端页面的数据发送给服务端
xhr.send([body])
body: 在 XHR 请求中要发送的数据体,如果不传递数据则为 null
如果使用GET请求发送数据的时候,需要注意如下:
将请求数据添加到open()方法中的url地址中
发送请求数据中的send()方法中参数设置为null
绑定onreadystatechange事件
onreadystatechange
事件用于监听服务器端的通信状态,主要监听的属性为XMLHttpRequest.readyState
,
关于XMLHttpRequest.readyState
属性有五个状态,如下图显示
只要 readyState
属性值一变化,就会触发一次 readystatechange
事件
XMLHttpRequest.responseText
属性用于接收服务器端的响应结果
举个例子:
const request = new XMLHttpRequest()
request.onreadystatechange = function(e){
if(request.readyState === 4){ // 整个请求过程完毕
if(request.status >= 200 && request.status <= 300){
console.log(request.responseText) // 服务端返回的结果
}else if(request.status >=400){
console.log("错误信息:" + request.status)
}
}
}
request.open('POST','http://xxxx')
request.send()
三、封装
下面来封装一个简单的ajax
请求
//封装一个ajax请求
function ajax(options) {
//创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()
//初始化参数的内容
options = options || {}
options.type = (options.type || 'GET').toUpperCase()
options.dataType = options.dataType || 'json'
const params = options.data
//发送请求
if (options.type === 'GET') {
xhr.open('GET', options.url + '?' + params, true)
xhr.send(null)
} else if (options.type === 'POST') {
xhr.open('POST', options.url, true)
xhr.send(params)
//接收请求
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
let status = xhr.status
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML)
} else {
options.fail && options.fail(status)
}
}
}
}
使用方式:
ajax({
type: 'post',
dataType: 'json',
data: {},
url: 'https://xxxx',
success: function(text,xml){//请求成功后的回调函数
console.log(text)
},
fail: function(status){请求失败后的回调函数
console.log(status)
}
})
success: function(text,xml){//请求成功后的回调函数
console.log(text)
},
fail: function(status){请求失败后的回调函数
console.log(status)
}
})