ajax和axios基本理解

同步和异步

• 同步：必须等待前面的任务完成，才能继续后面的任务
• 异步不受当前任务的影响
  异步更新网站：
  1.我们在访问一个普通的网站时，当浏览器加载完HTML、CSS、JS以后，网站的内容就固定了。如果想让网站内容发生更改，就必须刷新页面才能够看到更新的内容。
  2可如果用到异步更新，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮我们加载更多的微博，同时页面并没有刷新。
  3.试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要刷新，体验就太不好了。
  web前端里的异步更新，就要用到 Ajax。

ajax的概念

在浏览器中，我们可以在不刷新页面的情况下，通过ajax的方式获取一些新的内容。
Ajax:Asynchronous Javascript And XML（异步 JavaScript 和 XML。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。

发送 Ajax 请求的五个步骤
（1）创建异步对象。挤XMLHttpRequest对象
（2）设置请求参数。包括：请求方法请求url

• 请求方式（get和post请求区别）
  1.使用get请求参数会在url中显示，所以send函数发送的参数为null；而使用post则不会显示出来，在使用send方法时需要赋予参数
  2.使用get请求发送数据量小，post请求发送数据量大
  3.get请求需要注意缓存问题，post请求不需要担心这个问题
  4.post请求必须设置请求头Content-Type值为application/x-form-www-urlencoded
• url:文件在服务器上位置
• async：true（异步）或false（同步）
  （3）发送请求
  （4）注册事件。onreadystatechange事件，状态改变时会调用。如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
• readyState：
  0：请求未初始化
  1：服务器连接已建立
  2：请求已接收
  3：请求处理中
  4：请求已完成，响应已就绪
• status
  200：“OK”
  当 readyState 等于 4，且状态码为200时，表示响应已就绪
  404：未找到页面
  （5）获取返回数据
• responseText：获取字符串形式响应数据
• responseXML：获取XML响应数据

实例–ajax get/post请求

//get和post请求区别
//1.使用get请求参数会在url中显示，所以send函数发送的参数为null；而使用post则不会显示出来，在使用send方法时需要赋予参数
//2使用get请求发送数据量小，post请求发送数据量大
//3.get请求需要注意缓存问题，post请求不需要担心这个问题
//4.post请求必须设置请求头Content-Type值为application/x-form-www-urlencoded
function get_click(){
  var ajaxObj=new XMLHttpRequest();
  ajaxObj.open('get','ajax.php');
  ajaxObj.send();
  ajaxObj.onreadystatechange=function(){
    if(ajaxObj.readyState==4&&ajaxObj.status==200){
      console.log('返回数据成功');
      console.log(ajaxObj.reqponseText)
    }
  }
}

post请求

function post_click(){
  var ajaxObj=new XMLHttpRequest();
  ajaxObj.open('post','ajax2.php');
  ajaxObj.sendRequestHeader("Content-Type","application/x-form-www-urlencoded")
  ajaxObj.send('name=fox&age=18');
  ajaxObj.onreadystatechange=function(){
    if(ajaxObj.readyState==4&&ajaxObj.status==200){
      console.log('返回数据成功');
      console.log(ajaxObj.reqponseText)
    }
  }
}

• ajax传输XML
• ajax传输json
  JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是进行数据的交换。语法更为简洁，网络传输、机器解析都更为迅速。

语法规则：

数据在键值对中

数据由逗号分隔

花括号保存对象

方括号保存数组

数据类型：

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true 或 false）

数组（在方括号中）

对象（在花括号中）

null

1. json字符串–>js JSON.parse()
   var jsObj = JSON.parse(ajax.responseText);
2. js -->json字符串 JSON.stringify()
   var jsonStr = JSON.stringify(Obj);

jquery封装ajax

$.ajax({
  url: '接口地址',
  type: 'get', //或者post　　 请求类型
  dataType: 'json',
  data: { // 要发送的请求参数
    'username' : 'hermit',
    'password' : 'a123'
  },
  success : function (response) {
  console.log(response); // 请求返回的数据
  },
  error:function(xhr,status,error){	//请求失败是执行的函数
  }，
  complete：function(xhr,status){     //不管请求失败还是请求成功，都执行的函数
  }
})

axios

axios({
  url: '接口地址',
  method: 'get', //或者 post    请求类型
  responseType: 'json', //默认格式，如果就是 json 格式可以不写
　data: {
   'username' : 'hermit',
   'password' : 'a123'
  }
}).then( function(response){ // 请求正确返回的数据
  console.log(response);
  console.log(response.data);
}).catch( function(error) { // 请求错误返回的数据
  console.log(error);
})

区别

两者其实并没有太大的区别，在写法上大致相同。
其实axios是通过 promise 实现对 ajax 技术的一种封装。就像 ajax 是 通过 jQuery 来封装一样。
也就是说，jQuery 将请求技术进行了封装 变成了 ajax , 而 通过 promise 又把 ajax 进行封装就成了 axios。
axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios。
在现在的前端 mvvm 模式下 axios 更适合于数据请求。

优缺点

ajax优缺点？
优点　
1、无刷新更新数据
2、异步与服务器通信
3、前端和后端负载平衡
4、基于标准被广泛支持
5、界面与应用分离
缺点：
1、ajax不能使用Back和history功能，即对浏览器机制的破坏。
2、安全问题 ajax暴露了与服务器交互的细节
3、对收索引擎的支持比较弱
4、破坏程序的异常处理机制
5、违背URL和资源定位的初衷
6、ajax不能很好的支持移动设备
7、太多客户端代码造成开发上的成本

axios优点
1、在浏览器中创建 XMLHttpRequests
2、在node.js则创建http请求
3、支持Promise API
4、支持拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换成JSON数据格式
8、客户端支持防御XSRF