ajax和axios简单介绍及使用方法

Ajax

• 是一种交互异步的方式，异步的javascript和xml，不需要刷新页面就可以请求后台接口。
• 它是对XMLHttpRequest (socket)请求的封装。
• 通常使用它时需要导入jQuery库，jQuery 库拥有完整的 Ajax兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

ajax用法

jQuery中ajax的用法

1. get请求：$(selector).get(url,data,success(response,status,xhr),dataType)

参数	描述
selector	选中的控件，可选。$.get()
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。
dataType	可选。规定预计的服务器响应的数据类型。json,xml

例如：

function findById(event){
		$('.form_upd').css('display','block');
		
		//获取当前行隐藏输入框中的值
		var id = $(this).closest("tr").find("input[name=id]").val();
		var url = "http://127.0.0.1:8888/user/findUserById";
		$.get(url,{
			id:id
		},function(result){
			$("input[name=uid]").val(result.data.id);
			$("input[name=urealname]").val(result.data.realname);
			$("select[name=ugender]").val(result.data.gender);
			$("input[name=uusername]").val(result.data.username);
			$("input[name=upassword]").val(result.data.password);
			$("input[name=ustatus]").val(result.data.status);			
		})
		event.preventDefault();
}

2. post请求：同上，只是把请求方式换成post

例如：

function updataById(event){
		//1. 获取参数
		var uid = $("input[name=uid]").val();
		var urealname = $("input[name=urealname]")[0].value;
		var ugender = $("select[name=ugender]")[0].value;
		var uusername = $("input[name=uusername]")[0].value;
		var upassword = $("input[name=upassword]")[0].value;
		var ustatus = $("input[name=ustatus]")[0].value;
		var url = "http://127.0.0.1:8888/user/saveOrUpdate";
		//2. 调用ajax方法完成数据交互
		$.post(url,{
			id:uid,
			realname:urealname,
			gender:ugender,
			username:uusername,
			password:upassword,
			status:ustatus,
			type:"学生"
		},function(result){
			alert(result.message);
			//3. 重置表单
			$("input[name=uid]").val("");
			$("input[name=urealname]").val("");
			$("select[name=ugender]").val("男");
			$("input[name=uusername]").val("");
			$("input[name=upassword]").val("");
			$("input[name=ustatus]").val("");
			//4. 调用load重新加载数据
			load();
			
		})
		event.preventDefault();
}

3. $.ajax() 可以不带任何参数直接使用。运用在你需要传输数据，如：传输一个数组。
   使用contentType:'application/x-www-form-urlencoded’表单数据时，发送url?name=lovacraftxu&age=18这样的数据。
   若是数组时就需要进行转换，因为传输数组时它默认传url?0=lovacraftxu&1=18。key使用的是数组下标。
   所以传输数组时最好使用contentType:'application/json’方式传输，但注意：后台接收数据时注意接收的是JSON格式的数据springMVC的话在参数括号里加注解 @RequestBody 接收JSON格式数据。如：

@PostMapping("deleteUserBanchByIds")
    public Message deleteUserBanchByIds(@RequestBody Long[] ids){
        iUserService.deleteUserBanchByIds(ids);
        return MessageUtil.success("删除成功");
    }

所以前端代码这样发送：

function batchDeleteById(){
	var ids = $('.table input:checked').toArray().map(function(item){
		return item.value;
	})
	var url = "http://127.0.0.1:8888/user/deleteUserBanchByIds";
	$.ajax({
		url:url,
		method:"POST",
		processData:false,
		data:JSON.stringify(ids),
		contentType:'application/json',
		success:function(result){
			alert(result.message);
			load();
		}
	})
}

axios

• 从浏览器中创建 XMLHttpRequests
• get请求默认发送 application/x-www-form-urlencoded 表单数据
• post请求默认发送 application/json JSON数据
• 有拦截器，可以在请求发送和接收时做一些处理。
• 可以进行全局配置。

axios用法

1. 全局配置

基url(在发送url前默认加在前面的url)
axios.defaults.baseURL = 'http://127.0.0.1:10000';
Token令牌
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
默认数据传输格式
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2. 拦截器

   有两种拦截器
   请求发送前拦截器：axios.interceptors.request.use()
   回应返回后拦截器：axios.interceptors.response.use()
   例如：

// 需求->post请求默认发json，需要在发送时将json转化为查询字符串
// 请求拦截器，在请求发送之前进行拦截，作用是改变一些配置信息，参数...
axios.interceptors.request.use(function(config){
  if(config.method==="post"){
    config.data = qs.stringify(config.data)
  }
  // 返回配置信息
  return config;
})
// 需求->在返回数据后axios自动又封装了一层，所以将数据取到外层
// 在响应刚刚回来后，处理response
axios.interceptors.response.use(function(response){
  let {data} = response;
  response.status =data.status;
  response.statusText = data.message;
  response.data = data.data;
  return response;
},function(error){
  message.error('服务器异常');
  Promise.reject(error)
})

3. React使用axios全局网络交互配置

import axios from 'axios'
import qs from 'qs'
import {message} from 'antd'

axios.defaults.baseURL = 'http://127.0.0.1:10000';
//axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// axios.defaults.transformRequest = [function(data){
//   return qs.stringify(data);
// }]
// 需求->post请求默认发json，需要在发送时将json转化为查询字符串
// 请求拦截器，在请求发送之前进行拦截，作用是改变一些配置信息，参数...
axios.interceptors.request.use(function(config){
  if(config.method==="post"){
    config.data = qs.stringify(config.data)
  }
  // 返回配置信息
  return config;
})
// 需求->在返回数据后axios自动又封装了一层，所以将数据取到外层
// 在响应刚刚回来后，处理response
axios.interceptors.response.use(function(response){
  let {data} = response;
  response.status =data.status;
  response.statusText = data.message;
  response.data = data.data;
  return response;
},function(error){
  message.error('服务器异常');
  Promise.reject(error)
})

export default axios;

至于这两种交互方式的区别请自行百度。
好好学习，天天向上！望各位码农共勉。