关于原生Ajax、Jquery封装、axios之间区别

目录

 

什么是Ajax?

1.Ajax特性

2.请求类型

原生Ajax

请求流程

关于Content-type

关于readyState

关于method

Jquery封装Ajax

特点

参数

axios

特点

底层API

axios(config)

默认配置 

拦截器

快捷API

---

什么是Ajax?

Ajax是异步的javascript和XML(Asynchronous Javascript And XML)。简单说就是用XMLHttpRequest对象与服务器通信。

1.Ajax特性

• 不用重新加载页面的情况下发送请求
• 在不重新加载整个网页，能够更新部分网页

2.请求类型

同步请求

提交请求-->等待服务器处理-->处理完毕返回  在这个期间客户端浏览器不能干任何事

异步请求

请求通过事件触发 -->服务器处理(此时浏览器可以做其它事件) -->处理完毕

 

原生Ajax

请求流程

1.建立XMLHttpRequest对象

2. 打开一个连接

3. 设置请求头信息(get可以不用设置)

4.发送请求

5.监听响应

let xhr=new XMLHttpRequest();

xhr.open(method,url); //method描述在文章下面有介绍

xhr.setRequestHeader('Content-type','application/json');

xhr.send(data);
//data类型取决于我们设置的Content-type

xhr.onreadystatechange=funciton(){
    if(this.readyState==4){
        if(this.status==200){
                        
        }
    }
}

关于Content-type

• application/x-www-form-urlencoded     
  • 查询字符串  格式如下: name=val&age=val2  
• text/plain
  • 普通字符串
• multipart/form-data
  • 二进制
• application/json
  • json格式

关于readyState

值	状态	描述
0	UNSENT	代理被创建，但尚未调用open()方法
1	OPENED	open()方法已经被调用
2	HEADERS_RECEIVED	send方法已经被调用，并且头部和状态已经可获得
3	LOADING	下载中；responseText属性已经包含部分数据
4	DONE	下载操作已完毕

关于method

1.method 为 get

则不需要设置请求头信息并且发送请求不用写data,因为get请求参数是在url后拼接而成

2. method为 post

则需要设置相应头部信息，具体值查看上面Content-Type

    2.1发送数据时，data的数据类型取决于我们设置的Content-Type,情况如下:

1.  content-Type为json时，则data要序列化为json字符串。

2.  content-Type为x-www-form-urlencoded的时候，data一定要序列化为查询字符串

//post请求 传输为json格式时
let xhr=new XMLHttpRequest();
xhr.open('POST',url);
xhr.setRequestHeader('Content-type','application/json')
xhr.send(JSON.stringify(data));

//get请求
let xhr=new XMLHttpRequest();
xhr.open('GET',url);
xhr.send();
xhr.onreadystatechange=function(){}

Jquery封装Ajax

特点

• ajax属于jQuery中一部分
• 回调函数机制
• 依赖XMLHttpRequest,因此只能运行在浏览器端
• 自动将data数据转换为字符串

参数

参数名	描述
url	请求地址
method	请求方法(get/post)
data	提交数据(post请求采用)；如果data为对象，该对象在发送到服务器之前会先被自动转换为查询字符串。可以通过processData选项阻止默认转换
dataType	期望接受的数据类型，如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断
async	异步还是同步请求，默认异步
contenType	取值请参照上面原生Ajax中Content-Type的取值
processData	默认true(转换data数据类型为字符串) 如果不希望将data中的数据转换为字符串，则设置false
beforeSend	发送请求前可修改XMLHttpRequest对象的函数
success	请求成功后的回调函数
error	请求失败的回调函数
complete	请求完成的回调函数(无论请求 失败还是成功都会调用)

应用: 有如下数据，将以json格式发送到服务器

var user={
    name:'cc',
    age:22,
    gender:'male'
}
$.ajax({
    url:'',
    method:'post',
    data:JSON.stringify(user),
    contentType:'application/json;charset=UTF-8',
    processData:false  //阻止自动转换为字符串
})

axios

特点

• 纯粹ajax库
• 应用了promise机制
• 可以直接运行在node环境下，也可以运行在浏览器下、
• 能拦截请求和相应
• 自动将data数据转换为JSON

底层API

axios(config)

下面以:http://120.11.164.247:8099/user为例

config参数如下

url	请求的接口地址 /user
method	默认 get请求
baseURL	'http://120.11.164.247:8099'
params:{}	必须是一个纯对象，或者url参数对象(get请求参数列表）
data	适用于post传参
headers	用于自定义头部信息
transformRequest：[function(data,header){}]	用于请求之前(send之前)对请求数据进行操作，只有当请求方法为‘post、put、patch’有用 必须有返回值
transformResponse:[(data)=>{}]	在获取到响应信息，在then/catch执行，用于修改响应信息
paramSerializer	在执行send之前，用于修改params

1.通过id删除一个用户信息,get方法传递

axios({
    url:'',
    method:'get',
    params:{
        id:1
    },
    paramsSerializer:function(params){
        return qs.stringify(params);
    }
})

2.保存用户信息，data格式为查询字符串

axios({
    url:'',
    method:"post",
    data:user,
    headers:{
        'Content-Type':'application/x-www-form-urlencoded'
    },
    transformRequest:[function(data,headers){
        return qs.stringify(data);
    }]
})

默认配置 

axios.defaults.baseURL = 'https://api.example.com';

拦截器

// 添加一个请求拦截器
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

快捷API

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

 

本文参照资源如下:

axios:https://www.npmjs.com/package/axios

jquery:http://api.jquery.com/jquery.ajax/

ajax:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

如果有错误请及时联系作者，留言或者邮箱([email protected])