axios

http://www.axios-js.com/

Axios是专注于网络数据请求的库

相比于原生的XMLHttpRequest 对象，axios简单易用

相比于jQuery ，axios更加轻量化，只专注于网络请求

axios发起GET请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

axios发起POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
1
2
3
4
5
6
7
8
9
10

直接使用axios发起请求

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
1
2
3
4
5
6
7
8
9

例子：

document.querySelector("#btn1").addEventListener('click',function(){
    var url = 'http://www.liulongbin.top:3006/api/get';
    var paramsObj = {name: "zs" , age: 12};
    // console.log(axios)
    // axios.get(url,{params:paramsObj}).then(function(res){
    //   console.log(res.data)
    // })


    axios({
      method:'GET',
      url:url,
      params:paramsObj
    })
    .then(function(res){
      console.log(res)
    })
})


document.querySelector("#btn2").addEventListener('click',function(){
  var url = 'http://www.liulongbin.top:3006/api/post';
  var dataObj = {address:"北京",location:"昌平区"};
  // axios.post(url,dataObj).then(function(res){
  //   console.log(res.data)
  // })
  axios({
    method:"POST",
    url:url,
    data:dataObj
  })
  .then(function(res){
    console.log(res)
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

同源策略

什么是同源

如果两个页面的协议 ，域名和端口都相同，这两个页面具有相同的源

http//www.test.com/index.html
https://www.test.com/other.html
http://www.test.com/other.html
http//blog.test.com/index.html
http//www.test.com:8080/index.html
1
2
3
4
5

同源策略

同源策略是浏览器提供的一个安全功能

跨域

什么是跨域

同源指的是两个URL的协议，域名，端口一致，反之 就是跨域

出现跨域的原因：浏览器的同源策略 不允许非同源的URL之间进行资源的交互

网页：http://www.test.com/index.html
接口：http://www.xx.com/index
1
2

浏览器允许发起跨域请求，但是跨域请求回来的数据，会被浏览器拦截，无法被网页获取到

解决跨域

JSONP 和 CORS

JSONP 兼容低版本，被迫想出来的一种临时解决方法 缺点：只支持GET请求，不支持POST请求

CORS 是W3C标准属于跨域Ajax请求的根本解决方案 支持GET和POST请求 缺点 不兼容低版本的浏览器

JSONP

是通过script标签的src属性解决跨域

JSONP原理

由于浏览器同源策略限制，网页中无法通过ajax请求非同源的接口数据，但是script标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js脚本

原理：是通过script标签的src属性请求跨域的数据接口，并通过回调函数的形式，接收跨域接口响应回来的数据

案例：

  <script>
		function abc(data){
		  console.log("data数据");
		  console.log(data);
		}
  script>
  <script src="http://www.liulongbin.top:3006/api/jsonp?callback=abc&name=zs&age=12">script>
1
2
3
4
5
6
7

jQuery发起JSONP请求

datatype 填 jsonp

$(function(){
  $("#btn").on('click',function(){
    $.ajax({
      url:"http://www.liulongbin.top:3006/api/jsonp?name=zs&age=12",
      dataType:'jsonp',
      success:function(res){
        console.log(res)
      }
    })
  })
})
1
2
3
4
5
6
7
8
9
10
11

CORS

先看看别人的文章跨域——CORS详解