ajax请求是什么？完整的Ajax请求步骤及get与post请求的区别

一、ajax的本质其实就是在HTTP协议的基础上以异步的方式与服务器进行通信。

二、ajax的常见的请求方法 ：

get 、post、put 、delete等

 三、ajax请求的实现步骤：

• 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
• 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
• 设置响应HTTP请求状态变化的函数.
• 发送HTTP请求.
• 获取异步调用返回的数据.
• 使用JavaScript和DOM实现局部刷新.

四、实现

简单的get 请求例子

//创建一个异步请求对象
var xhr = new XMLHttpRequest()
//设置请求头
xhr.open('GET','/api')
//设置请求体
xhr.send(null)
//判断服务器请求响应返回的状态
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4 && xhr.status == 200){
        var result = document.querySelector('.result')
        result.innerHTML = xhr.responseText
    }
}

简单的post请求例子

//创建一个异步请求对象
var xhr = new XMLHttpRequest()
//设置请求行
xhr.open('POST','/api')
//设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
//设置请求体
xhr.send("name=cat&age=1")
//判断服务器请求响应返回的状态
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4 && xhr.status == 200){
        var result = document.querySelector('.result')
        result.innerHTML = xhr.responseText
    }
}

五、get和post请求的区别

1、GET没有请求主体，使用xhr.send(null)

2、GET可以通过在请求URL上添加请求参数

3、POST可以通过xhr.send('name=cat&age=10')

4、POST需要设置请求头xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

5、GET效率更好（应用多）

6、GET大小限制约4K，POST则没有限制

7、GET请求有缓存相对没那么安全，但是可添加到收藏夹上，POST没有缓存，无法添加到收藏夹

 

上面是本人对Ajax的一点学习总结，希望能帮助到小伙伴们。。。。