上班只会用axios,你out了

什么是AJAX？

Asynchronous JavaScript + XML（异步 JavaScript 和 XML）, 其本身不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括：HTML 或 XHTML,  CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的 AJAX 模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

应用场景

1.在不加载页面的情况下发送请求服务器
2.接收并使用从服务区返回的数据

post方法和get方法

GET HEAD DELETE OPTIONS..
    参数在请求头中
        格式
        ?userName=1&passworld=2
POST PUT PATCH..
    参数在请求体中,根据类型不同参数的格式不一样,常见的格式如下
    form-data
        Content-Type multipart/form-data
        var formData = new FormData(form)
        formData.append('username', 'Chris');
    x-www-form-urlencoded
        Content-Type application/x-www-form-urlencoded
        eid=15012309&day=2020-11-17 &start = 1&limit = 200
    row
        Content-Type application/json
        {"timeType":3} //json 字符串
    binary
        上次文件
    graphql
        api查询

post方法和get方法的区别

1.get传参有长度限制,post理论上没有
2.get请求会默认缓存,当请求参数一致第二次请求直接从缓存中拿,不会和服务器之间进行交互
3.post请求比get请求相对安全,get请求很容易被拦截改变
4.get请求传输快,因为传递的参数少

如何创建一个ajax请求

//第一步 创建实例对象
let xhr = new XMLHttpRequest()
// readyState 0 请求还未初始化
//第二步打开url
xhr.open('POST','http://retina.wutong.talkweb.com.cn/jeecg/gz-tunnel/flowMonthRadio',true)
//第三步监听变化
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
    console.log('xhr',JSON.parse(xhr.responseText))
    }
}

//Content-Type: text/plain;charset=UTF-8  默认请求头
//设置请求头
xhr.setRequestHeader('Content-Type','application/json')
//设置为application/json 要转为JSON字符串
//第四步发送请求
xhr.send(JSON.stringify({'monthOfYear':'2022-07'}))
//onreadystatechange
//

ajax状态码和响应状态码的含义

一、readyState
//readyState 0 请求还未初始化
//readyState 1 与服务器建立连接
//readyState 2 请求已接受
//readyState 3 正在处理请求
//readyState 4 请求完成响应且准备好
二、status(常用)
    200 ok
    202 服务器接受请求但未处理
    204 服务器处理了请求但是没返回内容
    206 断电续传
    301 永久移动（域名迁移）
    302 临时转移 (负载均衡)
    304 缓存
    305 使用代理
    400 请求参数不对
    401 没权限
    403 服务器拒绝请求
    404 地址错误
    408 请求超时
    500 服务器错误
    503 超负荷
    505 http版本不支持

常用的方法

xhr.abort();//终止该请求
xhr.getAllResponseHeaders();//获取所有头信息
xhr.getResponseHeader("Content-Type"))//获取单个字段信息
xhr.setRequestHeader(header, value); //设置头信息
xhr.open(method, url);//初始化一个请求
xhr.send(body)//发送http请求
upload.onprogress()//传输进度