Ajax第三天

KKfans
162 阅读6分钟

1.XMLHttpRequest 的基本用法

1.1 XMLHttpRequest的概念

​ XMLHttpRequest是浏览器内置的一个构造函数。所以使用的时候需要 new ​ 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 ​ axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装的！

1.2 XMLHttpRequest的使用

主要的 4 个实现步骤：

  1. 创建 xhr 对象
  2. 调用 xhr.open() 函数
  3. 调用 xhr.send() 函数
  4. 监听 load 事件
// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function() {
    console.log(xhr.response);
});

1.3 GET请求携带参数

​ GET请求参数直接放到路径的最末尾就可以！

// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数    --  get参数
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=红楼梦');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function() {
    console.log(xhr.response);
});

1.4 POST请求携带参数

​ P0ST请求参数，分为两种：查询参数（几乎不用）和请求体参数（设置头信息）

// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数    --  get参数
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbooks');
// 调用 xhr.send() 函数
// 设置头信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('bookname=三体&author=刘慈欣&publisher=北京人民出版社');
// 监听 load 事件
xhr.addEventListener('load', function() {
    console.log(xhr.response);
});

​ 注意: POST请求查询参数几乎不用，且传递POST请求参数需要设置头信息。

1.5 数据交换格式JSON

​ 数据交换格式，就是服务器端与客户端之间数据传输的格式。两种数据交换格式：XML和JSON。XML出现的比较早，现在大家常用JSON。

​ JSON（全称：JavaScript Object Notation）是一种数据交换格式，它本质上是用字符串的方式来表示对象或数组类型的数据。

​ 用字符串的方式来表示的对象的数据，叫做 JSON 数据。JSON 数据的格式有两种：对象格式和数组格式。

01.png

02.png

调用浏览器内置的 JSON.parse() 函数，可以把 JSON 格式的字符串转换为 JS 数据。

调用浏览器内置的 JSON.stringify() 函数，可以把 JS 数据转换为 JSON 格式的字符串。

其中：把真实数据转换为字符串的过程，叫做序列化，把字符串转换为真实数据的过程，叫做反序列化。

// 在 JSON 文件中定义 JSON 格式的数据时，要遵守以下的 6 条规则：
// 1. 属性名必须使用双引号包裹
// 2. 字符串类型的值必须使用双引号包裹
// 3. JSON 中不允许使用单引号表示字符串
// 4. JSON 中不能写注释
// 5. JSON 的最外层必须是对象或数组格式
// 6. 不能使用 undefined 或函数作为 JSON 的值

//需求：封装一个类似axios()的ajax函数
// 注意：以后谁调用itheima()就要按照如下参数传递，不传递就会报错
// itheima({
//     method:'请求方式',
//     url:'资源路径',
//     params:'查询参数',
//     data:'请求体参数',
//     success: function(res){ //成功的处理函数
// console.log(res)
//     }
// })

// 封装一个把{a:1,b:2,c:3}转换为a=1&b=2&c=3这种格式的函数(对象转换为&连接的字符串)
function objectToString(obj) {
  // {a:1,b:2,c:3}  =>  'a=1&b=2&c=3'
  // 思路: for...in...     
  // 重点: ["a=1", "b=2", "c=3"]
  const arr = [];
  for (let k in obj) {
    // k代表属性，obj[k]代表值;
    // 注意: 不要乱加空格
    arr.push(`${k}=${obj[k]}`);
  }
  // 转换为 'a=1&b=2&c=3'
  return arr.join("&"); // 利用 for...in...
}

//封装一个函数，发送ajax
//参数是一个对象；对象里面有很多属性：method,url,success,params,data;
//如下的函数，config形参中，就有如下属性：method，url。seccess,params,data;
function itheima(config) {
  // 1.创建
  const xhr = new XMLHttpRequest()
  //4.接收
  xhr.addEventListener("load", function () {
    //把JSON类型的字符串，转换为对象，方便后面操作
    const obj = JSON.parse(xhr.response)
    //把接收到的对象obj，交给success()处理
    config.success(obj)  //此时obj是实参
  })
  //根据请求方式的不同，给出不一样的处理结果
  // 注意：toUpperCase()转换为大写；toLowerCase()转换为小写
  if (config.method.toUpperCase() == 'GET') {
    //判断，get参数是否传递；如果没有传递params属性 为undefined
    if (typeof config.params == 'undefined') {
      //2.设置 -无参 不用管参数
      xhr.open('GET', config.url)
      //3.发送
      xhr.send()
      //如果传递了params属性，值为object
    } else if (typeof config.params == 'object') {
      //2.设置 -带有参数，就要设置到路径的最后面，用"?"分割
      // config.params 是对象，我们希望把它变成 a=1&b=2&c=3这种格式
      xhr.open('GET', config.url + "?" + objectToString(config.params));
      // 3.发送
      xhr.send()
    }

  } else if (config.method.toUpperCase() == 'POST') {
    //判断post参数的类型，：data属性的类型
    if (typeof config.data == 'string') {
      //2.设置
      xhr.open('POST', config.url)
      //3.发送-设置请求头  'application/x-www-form-urlencoded'
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      //把字符串类型的参数，放入send()
      xhr.send(config.data)
    } else if (typeof config.data == 'object') {
      //2.设置
      xhr.open('POST', config.url)
      //3.发送-设置请求头  'application/json'
      xhr.setRequestHeader('Content-Type', 'application/json')
      //把对象类型的参数，转换为JSON类型字符串，放入send()
      xhr.send(JSON.stringify(config.data))
    }

  }

}

2.同源和跨域

2.1 同源和跨域的概念

​ 同源指的是两个 URL 地址具有相同的协议、主机名、端口号。

​ 同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。浏览器的同源策略规定：不允许非同源的 URL 之间进行资源的交互。]

​ 跨域指的是两个 URL 地址的协议、主机名、端口号三者中有一个或多个不同。出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。

03.png

2.2 跨域配置解决方案

​ 突破浏览器跨域限制有两种方案：JSONP 和 CORS 。

04.png

2.3 CORS（服务端技术，暂时不研究）

​ CORS 是解决跨域数据请求的终极解决方案，全称是 Cross-origin resource sharing。该技术需要浏览器和服务器同时支持，二者缺一不可： ​ 浏览器要支持 CORS 功能（主流的浏览器全部支持，IE 不能低于 IE10） ​ 服务器要开启 CORS 功能（需要后端开发者为接口开启 CORS 功能）

​ CORS 的两个主要优势：支持 GET、POST、DELETE、PUT、PATCH 等这些常见的 Ajax 请求方式和只需要后端开启 CORS 功能即可，前端的代码无须做任何改动

​ 注意：我们之前做过的案例中，所有调用的接口均已在服务器端开启了 CORS 功能！

​ 例如：聊天机器人案例、新闻列表案例、用户登录案例

2.4 JSONP（需要服务端配合）

​ JSONP 是实现跨域数据请求的一种技术解决方案。它只支持 GET 请求，不支持 POST、DELETE 等其它请求。在实际开发中很少被使用，在面试中可能会问到 JSONP 的原理。

​ JSONP 不是真正的 Ajax 技术，在解决跨域问题时： ​ CORS 方案用到了 XMLHttpRequest 对象，发起的是纯正的 Ajax 请求 ​ JSONP 方案没有用到 XMLHttpRequest 对象，因此，JSONP 不是真正的 Ajax 技术

​ 结论：只要用到了 XMLHttpRequest 对象，发起的就是 Ajax 请求！

3.防抖和节流的使用

​ 本章节讲解: 防抖、节流

2.1 防抖

​ 概念：防抖（debounce）指的是：频繁触发某个操作时，只执行最后一次。 ​ 作用：减少逻辑执行的次数。 ​ 场景：搜索框只在输入完后，才执行查询的请求。 ​ 好处：这样可以有效减少请求的次数，节省网络资源。

05.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <script>
        //防抖指的是：某个时间段内，频繁触发某个操作时，执行最后一次
        //实现的原理：利用延时器，后一次点击把前一次点击的延时器取消掉
        // 延时器，一定要定义为全局变量，方便后面点击取消前面的延时器
        let timer;
        document.querySelector('button').onclick = function () {
            //取消上一次的延时器
            clearTimeout(timer)
            // 此处的timer不能用let 声明，使用全局的
            timer = setTimeout(function () {
                console.log('发送ajax');
            },1000)
        }
    </script>
</body>
</html>

2.2 节流

​ 概念：节流（throttle）指的是：单位时间内，频繁触发同一个操作，只会触发 1 次。 ​ 作用：减少逻辑执行的次数。 ​ 场景：页面新闻刷新，浏览器大小改变页面适配。 ​ 好处：这样可以有效减少请求的次数，节省网络资源。

06.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <script>
        //防抖指的是：单位时间内，频繁触发某个操作时，执行第一次
        // 定义一个全局变量，类似一个控制器
        let flag = true
        document.querySelector('button').onclick = function () {
           //优化：flag如果等于false，那么说明之前已经有人点击了，等待执行完毕后
           if(!flag) return
           // if(flag){ //flag为true进入
                //进入以后，直接修改为false
                flag = false
                //利用延时器实现
                setTimeout(function () {
                    console.log('发送ajax')
                    //执行完毕后修改为true
                    flag = true
                },1000)
           // }
        }
    </script>
</body>
</html>
avatar
文章
阅读
粉丝