Ajax加强 | 潇潇暮雨

什么是XMLHttpRequest?

XMLHttpRequest(简称xhr)是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源.jQuery中的Ajax函数,就是基于xhr对象封装出来的.

使用xhr发起GET请求

步骤:

创建xhr对象
调用xhr.open()函数
调用xhr.send()函数
监听xhr.onreadystatechange事件

//1. 创建xhr 对象
var xhr=new XMLHttpRequest()
//2. 调用open函数,指定 请求方式与URL地址
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
//3. 调用send函数,发起ajax请求
xhr.send()
//4.监听onreadystatechange事件
xhr.onreadystatechange=function(){
//4.1监听xhr对象的请求状态readyState:与服务器响应的状态 status
if(xhr.readyState===4&&xhr.status===200){
//4.2 打印服务器响应回来的数据
  console.log(xhr.responseText)
 }
}

xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个：

使用xhr发起带参数的GET请求

使用 xhr 对象发起带参数的 GET 请求时，只需在调用 xhr.open 期间，为 URL 地址指定参数即可：

// ...省略不必要的代码
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
// ...省略不必要的代码

这种在 URL 地址后面拼接的参数，叫做查询字符串。

使用xhr发起POST请求

步骤:

创建 xhr 对象
调用 xhr.open() 函数
设置 Content-Type 属性（固定写法）
调用 xhr.send() 函数，同时指定要发送的数据
监听 xhr.onreadystatechange 事件

//1. 创建xhr对象
var xhr=new XMLHttpRequest()
//2. 用open()
xhr.open('POST','http://www.liulongbin.top:3006/api/addbook')
//3. 设置Content-Type属性(固定写法)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
//4. 调用send(),同时将数据以查询字符串的形式,提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
//5. 监听onreadystatechange事件
xhr.onreadystatechange=function(){
 if(xhr.readyState===4&& xhr.status===200){
    console.log(xhr.responseText)
  }
}

数据交换格式JSON

概念:JSON就是JavaScript对象和数组的字符串表示法,它使用文本表示一个JS对象或数组的信息,因此,JSON的本质就是字符串.
作用:JSON是一种轻量级的文本数据交换格式,在作用上类似于XML,专门用于存储和传输数据,但是JSON比XML更小,更快,更易解析.

JSON的两种结构

JSON就是用字符串来表示JavaScript的对象和数值,所以JSON中包含对象和数组两种结构,通过这两种结构的相互嵌套,可以表示各种复杂的数据结构.

对象结构

对象结构在JSON中表示为{ }括起来的内容.数据结构为{key:value,key:value,...}的键值对结构,其中,key必须是使用英文的双引号包裹的字符串,value的数据类型可以是数字,字符串,布尔值,null,数组,对象6种类型.

{
 "name": "zs",
 "age": 20,
"gender": "男",
 "address": null,
"hobby": ["吃饭", "睡觉", "打豆豆"]
}

数组结构

数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ "java", "javascript", 30, true … ] 。
数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

[ "java", "python", "php" ]
[ 100, 200, 300.5 ]
[ true, false, null ]
[ { "name": "zs", "age": 20}, { "name": "ls", "age": 30} ]
[ [ "苹果", "榴莲", "椰子" ], [ 4, 50, 5 ] ]

JSON语法注意事项

属性名必须使用双引号包裹
字符串类型的值必须使用双引号包裹
JSON 中不允许使用单引号表示字符串
JSON中不能写注释
JSON的最外层必须是对象或数组格式
不能使用undefined或函数作为JSON的值
JSON的作用:在计算机与网络之间存储和传输数据
JSON的本质:用字符串来表示JavaScript对象数据或数组数据

JSON和JS对象的互转

要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}')
//结果是 {a: 'Hello', b: 'World'}

要实现从 JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法

var json = JSON.stringify({a: 'Hello', b: 'World'})
//结果是 '{"a": "Hello", "b": "World"}'

XMLHttpRequest Level2的新特性

可以设置 HTTP 请求的时限
可以使用 FormData 对象管理表单数据
可以上传文件
可以获得数据传输的进度信息

设置HTTP请求时限

有时，Ajax 操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的 XMLHttpRequest 对象，增加了 timeout 属性，可以设置 HTTP 请求的时限：

xhr.timeout = 3000

上面的语句，将最长等待时间设为 3000 毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout 事件，用来指定回调函数：

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

FormData对象管理表单数据

Ajax操作往往用来提交表单数据.为了方便表单处理,HTML5 新增了一个FormData 对象，可以模拟表单操作：

//1. 新建FormData 对象
var fd = new FormData()
//2. 为FormData 添加表单项
 fd.append('uname','zs')
 fd.append('upwd','123456')
//3. 创建XHR对象
var xhr = new XMLHttpRequest()
//4. 指定请求类型与URL地址
xhr.open('POST','http://www.liulongbin.top:3006/api/formdata')
//5. 直接提交FormData对象,这与提交网页表单的效果,完全一样
xhr.send(fd)

FormData对象也可以用来获取网页表单的值,示例代码如下:

//获取表单元素
var form=document.querySelector('#form1')
//监听表单元素的submit事件
form.addEventListener('submit',function(e){
  e.preventDefault()
//根据form表单创建FormData 对象,会自动将表单数据填充到FormData对象中
var fd = new FormData(form)
var xhr= new XMLHttpRequest()
xhr.open('POST','http://www.liulongbin.top:3006/api/formdata')
xhr.send(fd)
xhr.onreadystatechange=function(){}
})

上传文件

 <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
  </head>
  <body>
    <!-- 1. 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2. 上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <!-- bootstrap 中的进度条 -->
    <div class="progress" style="width: 500px; margin: 15px 10px;">
      <div
        class="progress-bar progress-bar-striped active"
        style="width: 0%;"
        id="percent"
      >
        0%
      </div>
    </div>
    <br />
    <!-- 3. img 标签，来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800" />
    <script>
      let btnUpload = document.querySelector("#btnUpload");
      btnUpload.addEventListener("click", function () {
        let files = document.querySelector("#file1").files;
        if (files.length <= 0) return alert("请选择需要上传的图片");
        let fd = new FormData();
        fd.append("avatar", files[0]);
        let xhr = new XMLHttpRequest();
        xhr.upload.onprogress = function (e) {
          if (e.lengthComputable) {
            // 计算出上传的进度
            var procentComplete = Math.ceil((e.loaded / e.total) * 100);
            console.log(procentComplete);
            // 动态设置进度条
            $("#percent")
              .attr("style", "width: " + procentComplete + "%;")
              .html(procentComplete + "%");
          }
        };
        xhr.upload.onload = function () {
          $("#percent")
            .removeClass()
            .addClass("progress-bar progress-bar-success");
        };
        xhr.open("post","http://www.escook.cn:3006/api/upload/avatar");
        xhr.send(fd);
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status == 200) {
            // console.log(xhr.responseText);
            let data = JSON.parse(xhr.responseText);
            if (data.status !== 200) return alert(data.message);
            document.querySelector("#img").src =
              "http://www.escook.cn:3006" + data.url;
          }
        };
      });
    </script>

封装Ajax

const $ = {
  resolveData: function (obj) {
    if (obj && typeof obj == "object") {
      let arr = [];
      for (let key in obj) {
        let str = key + "=" + obj[key];
        arr.push(str);
      }
      return arr.join("&");
    }
  },
  ajax: function (options) {
    let type = options.type || "GET";
    let url = options.url || location.href;
    let data = this.resolveData(options.data);
    let success = options.success;
    //1. 创建xhr对象
    let xhr = new XMLHttpRequest();
    //如果你是get请求
    if (type.toUpperCase() === "GET") {
      url = url + "?" + data;
      data = null;
    }
    //2.设置open
    xhr.open(type, url);
    //如果你是post请求
    if (type.toUpperCase() === "POST") {
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
    //3.调用send
    xhr.send(data);
    //4.监听事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status == 200) {
        //   将字符串转化为对象
        let res = JSON.parse(xhr.responseText);
        //将数据暴露出去
        success && success(res);
      }
    };
  },
};