Jquery ajax

是对原生XHR的封装，除此以外还增添了对JSONP的支持。

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

缺点：

本身是针对MVC的编程,不符合现在前端MVVM的浪潮
	
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
	
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
 Axios

Axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

从它的官网上可以看到它有以下几条特性：

从 node.js 创建 http 请求
	
支持 Promise API
	
客户端支持防止CSRF
	
提供了一些并发请求的接口（重要，方便了很多的操作）
（这个支持防止CSRF是怎么做到的，就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。） 

Axios既提供了并发的封装，也没有fetch的各种问题，体积也较小。

	

【jq 中 ajax 和 axios 区别】
jq的ajax
1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery不合理
axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范
============
【瀑布流布局】

瀑布流布局。是一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
例如下面的布局，就是瀑布流
=============
【js 事件的添加与删除】
1，非 IE 7 8 下使用
btn.addEventListener('click',function(){alert(1);},false);
btn.removeEventListener('click',function(){alert(1);},false);
2，onclick法
btn.onclick = function(){}
btn.onclick = null;

	

【jq 中 ajax 和 axios 区别】
jq的ajax
1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery不合理
axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范
============
【瀑布流布局】

瀑布流布局。是一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
例如下面的布局，就是瀑布流
=============
【js 事件的添加与删除】
1，非 IE 7 8 下使用
btn.addEventListener('click',function(){alert(1);},false);
btn.removeEventListener('click',function(){alert(1);},false);
2，onclick法
btn.onclick = function(){}
btn.onclick = null;

jQuery.ajax的post提交默认的请求头

Content-Type: application/x-www-form-urlencoded

而axios.post提交的请求头是

Content-Type: application/json。

例子：
前台axios，后台springmvc接受的时候要特别注意区分！！！

前台：

axios:

param={“name”:“张三”}

axios.post(“url”,param).then(function(res){

console.log(res)

})

后台controller层：

@RequestBody专门处理application/json
@RequestMapping(value = "user",method = RequestMethod.POST)
    public int addUser(@RequestBody User user){
        System.out.println(user);
        /*int i = userService.addUser(user);*/
        return 0;
    }

使用jquery的ajax时则不需要添加该注解，直接使用即可