Ajax 第四天

1.同步和异步

​ 同步：代码从上往下顺序执行，如果前面的一直执行不完，就会造成“阻塞”

​ 异步：事件、定时器、ajax请求是异步任务，放在异步的任务队列中，等同步代码执行完在执行异步的

​ 同步必须执行完，才会执行异步，如果同步没有执行完，异步就不会执行

​ 如果是一个函数不算同步或异步，得看函数里面是啥，函数里面如果是console.log()的话就是同步的；函数里面是一个ajax请求，就是异步的

2.JSON

​ JSON是一种数据交换格式，是数据的载体

​ 服务端使用的编程语言可能是java、php等，前端使用的编程语言是JavaScript，双方的数据格式可能不一样，所以在交互数据的时候，需要转换成双方都能识别的格式，比如JSON格式。

​ 语法：var json = '{ "id": 1, "name": "zs" }';

​ JSON中允许出现的数据类型：数字、字符串、布尔、null、数组、对象；不能出现undefined、注释和函数

​ json做配置文件的时候可加注释，做数据转换的时候不可以加注释

​ JSON只能有一部分数据，例如"null132"、"{}][]"、"{}{}"都是错的

​ JSON转换为对象为：JSON.parse();

​ 对象转换为JSON字符串：JOSN.stringify();

 

3.表单相关

​ input标签中，accept属性能够控制选择的类型，比如 accept="image/png,image/jpeg"，全部类型及都能够选择的话就可以image/*；multiple属性可以选择多个文件

​ 文件对象：是本地文件的一个表示

​ 文件对象的作用：

        (1)本地预览图片，图片是存在一个临时地址中

​        (2)可以把文件对象放在FormData中，然后Ajax提交到服务器

document.querySelector('input').onchange = function () {
      console.dir(this);

      if(this.files.length > 0) {
        // 1.表示这个文件对象 里面有文件的详细信息
        let fileObj = this.files[0];
        console.log(fileObj);

        // 2.通过文件对象可以做本地预览 在当前页面预览你上传的这个图片
        let url = URL.createObjectURL(fileObj);
        document.querySelector('img').src = url;

        // 3.可以把文件对象添加到FormData中，然后提交数据
        let fd = new FormData();
        fd.append('avatar', fileObj);

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if(xhr.readyState === 4) {
            let res = xhr.responseText;
            console.log(res);
          }
        }
        xhr.open('POST', 'http://www.itcbc.com:3006/api/formdata');
        // FormData对象浏览器可以自动设置，不需要再设置请求头
        // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(fd);
      }
    }

4.axios

​ axios是基于Promise的HTTP库，用在浏览器和node.js中，它提供了ajax方法，只操作ajax请求

​ 使用axios实现get请求

// 请求 /user 接口，并传递ID参数
axios.get('/user?ID=12345').then(function (response) {
	// 请求成功后，触发
	console.log(response);
}).catch(function (error) {
    // 请求出错后触发
  	console.log(error)
});


// 前面的请求也可以这样做
axios.get('/user', {
    // 通过params传递GET参数
  params: {
    ID: 12345
  }
}).then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
});

使用axios实现post请求：

// 请求 /user 接口，并传递ID参数
axios.post('/user', {
  // 参数   如果提交的参数是对象，axios默认会把它转成JSON
  firstName: 'Fred',
  lastName: 'Flintstone'
}).then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
});