ajax底层XMLHttpRequest

XMLHttpRequest的基本使用

1 使用xhr发起GET请求
步骤：
① 创建 xhr 对象
② 调用 xhr.open() 函数
③ 调用 xhr.send() 函数
④ 监听 xhr.onreadystatechange 事件

 //创建对象
  var XHR = new XMLHttpRequest();
  //调用 xhr.open() 函数
    XHR.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=1');
     //调用 xhr.send() 函数
    XHR.send();
    //监听 xhr.onreadystatechange 事件
    XHR.onreadystatechange = function () {
      if (XHR.readyState === 4 && XHR.status === 200) {
        console.log(XHR.responseText);;
      }
    }

2 使用xhr发起POST请求
步骤：
① 创建 xhr 对象
② 调用 xhr.open() 函数
③ 设置 Content-Type 属性（固定写法）
④ 调用 xhr.send() 函数，同时指定要发送的数据
⑤ 监听 xhr.onreadystatechange 事件

 var xhr = new XMLHttpRequest();
    xhr.open('post', 'http://www.liulongbin.top:3006/api/addbook');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('bookname=水浒传&author=施耐庵&publisher=北京');
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }

浏览器提供了 URL 编码与解码的 API，分别是：
encodeURI() 编码的函数
decodeURI() 解码的函数

var str = 'cuizero'
    // 1.对str进行编码
    var ss=encodeURI(str)
    console.log(ss);
    // 2.对步骤1中得到结果, 进行反编码
    var dd=decodeURI(ss);
    console.log(dd);

XMLHttpRequest Leven2新特性使用

1.设置请求时限

 xhr.timeout=200;

如果上面时间到了，还没有执行完，就会直接弹出请求超时

xhr.ontimeout=function(){
	alert('请求超时')
}

模拟表单FormData

1.创建对像

var fd=new FormData();

2.添加数据

fd.append(数据);

…
3.发送数据

send(fd);

所以格式代码

 var fd = new FormData();
    fd.append('uname', 'zhangsan');
    fd.append('pwd', 123);
    var xhr = new XMLHttpRequest();
    xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata');
    xhr.send(fd);
    xhr.onreadystatechange = function () {
      if (xhr.status == 200 && xhr.readyState == 4) {
        console.log(JSON.parse(xhr.responseText));
      }
    }

上传文件

1.使用 input type=“file” id=“file1” 标签

<input type="file" id="file1" />

2.获取file文件的值

var files = document.querySelector('#file1').files

3.将数据提交到form中；

var files = document.querySelector('#file1').files
var fd = new FormData()
fd.append('avatar', files[0])

4.将FormData对象传入到请求体中
5.监听xhr的readystatechange事件
完整代码

javascript
 var btnUpload = document.querySelector('#btnUpload')

    btnUpload.addEventListener('click', function () {
      // 1. 获取到用户选择的文件列表, 如果用户没有选择文件却点击了上传按钮, 则给用户一个提示, 并且终止后续的行为
      var text = document.querySelector('#file1').files;
      if (text.length <= 0) {
        alert('请上传文件')
      }
      // 2.如果用户有选择文件, 那么将文件放到FormData中, 键为avatar
      var fd = new FormData();
      fd.append('avatar', text[0])
      // 3.使用xhr发起对 http://www.liulongbin.top:3006/api/upload/avatar 这个地址的POST请求, 将FormData携带上
      var xhr = new XMLHttpRequest();
      // 5.在上传的过程中, 在#percent中显示百分比文字
      xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          var text = parseInt((e.loaded / e.total) * 100) + '%';
          document.querySelector('#percent').innerHTML = text
          document.querySelector('#percent').style.width = text;
        }
      }
      xhr.upload.onload = function () {
        document.querySelector('#percent').className('progress-bar progress-bar-success ')
      }
      //                                                                             6.在上传的过程中, 在#percent中显示进度
      // 7.上传成功后, 将#percent的 progress-bar-striped active类去除, 增加progress-bar-success
      // 
      xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar');
      // 4.如果文件上传成功, 则将上传成功的图片显示在img标签中
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var ss = JSON.parse(xhr.responseText);
          if (ss.status == 200) {
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + ss.url;
          } else {
            console.log(ss.massage);
          }
        }
      }
      xhr.send(fd)

监听上传图片进度

1.原生

upload.onprogress //事件

事件包含

e.loaded   已经加载完
e.total    总共事件

2.jquery事件的监听事件

$(document).ajaxStart(function () {}）监听
$(document).ajaxStop(function () {}）监听完成

axios请求

1.get请求

axios.get(url, {params: {}}).then(function(res){})

2.post请求

axios.post(url, {}).then(function(res){})