2.post和get的区别?-优快云博客

本文深入探讨了使用原生JavaScript实现Ajax请求的方法，包括创建Ajax对象、打开URL请求、监听状态变化及发送请求的步骤。同时，对比了GET与POST请求的特点与应用场景，解析了它们之间的区别，如安全性、数据传输量及缓存机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于原生js实现Ajax

1. 创建一个Ajax对象
let xhr=new XMLHttpRequest();** 当前操作不兼容ie6及更低版本浏览器;如何处理这个兼容问题?(ie6:ActiveXObject) **
2. 打开一个url请求(可以理解为一个基础配置,但是并没有发送请求呢)
xhr.open([method],[url],[async],[user name],[user password])
3. 监听Ajax状态改变,获取响应信息(获取响应头信息、获取响应主体信息)
xhr.onreadystatechange=()=>{
    if(xhr.readyState===4&&xhr.status===200){
        let result=xhr.responseText;(获取响应主体重的内容;响应主体服务器设置,客户端获取)
    }
}
4.发送Ajax请求(括号中传递的内容就是请求主体的内容)
xhr.send(null);
复制代码

`* 分析第2步中的细节知识点 *`
> xhr.open([method],[url],[async],[user name],[user password])
- [Ajax请求方式]
1. GET系列请求(获取)
- get
- delete:从服务器上删除某些资源文件（想从指定文件中删除文件可以用delete）
- head:只想获取服务器返回的响应头信息(响应主体内容不需要获取)
- ...
2. POST系列请求(推送)
- post
- put:向服务器中增加指定的资源文件(想往服务器的指定文件中增加图片,可以用put,一般来讲put比post放的文件还要多)
- ...

** 不管是哪一种请求,客户端都可以把信息传递给服务器,服务器也可以把信息返回给客户端,只是GET系列一般以获取为主(给的少,拿回来的多),而POST系列以推送为主(给的多,拿回来的少) **

> post和get应用场景?
1. 我们想获取一些动态展示的信息,一般使用GET请求,因为只需要向服务器端发送请求,告诉服务器端我们想要什么,服务器端就会把需要的数据返回
2.在实现注册功能的时候,我们需要把客户输入的信息发送给服务器进行存储,服务器一般返回成功还是失败等状态,此时我们一般都是基于POST请求完成的
复制代码

GET系列请求和POST系列请求的区别?

GET请求没有POST请求传递给服务器的内容多

原因:GET请求传递给服务器内容一般都是基于url地址问号传递参数来实现的
原因:POST请求一般都是基于设置请求主体来实现的
总结:各浏览器都有自己的关于URL最大长度的限制(谷歌:8kb、火狐:7kb、IE:2kb),超过限制长度的部分,浏览器会自动截取掉,导致传递给服务器的数据缺失
理论上POST请求是通过请求主体传递,是没有大小限制的,真实项目中为了保证传输的速率,我们也会限制大小(例如:上传的资料或者图片我们会做大小的限制)

GET请求很容易出现缓存(这个缓存不可控(浏览器默认的缓存,有可能有缓存,有可能没缓存):一般我们都不需要),而POST不会出现缓存(除非自己做特殊处理):

GET为什么会出现缓存的原因:GET是通过URL问号传参传给服务器信息
POST不会出现缓存的原因:POST是设置请求主体
总结:设置请求主体不会出现缓存,但是URl问号传递参数就会出现缓存

> get请求的弊端?
> 每隔一分钟向服务器请求一次数据,然后展示在页面中(页面中某些数据实时刷新)
setTimeout(()=>{
    $.ajax({
        url:'getList?lx=news',
        ...
        success:result=>{
            //第一次请求数据回来,间隔一分钟后,浏览器又发送一次请求,但是新发送的请求,不管是地址还是传递的参数都和第一次一样,浏览器很有可能会把上一次数据获取,而不是获取最新的数据
        }
    })
},60000)

```javaScript
> 解决方案:每一次重新请求的时候,在URL的末尾追加一个随机数,保证每一次请求的地址不完全一致,就可以避免是从缓存中读取的数据,
setTimeout(()=>{
    $.ajax({
        url:'getList?lx=news&_='+Math.random()',
        ...
        success:result=>{
            
        }
    })
},60000)
复制代码