JS--Day28(ajax示例，ajax封装）

一.ajax回顾

①ajax的作用：

 完成前后端交互（前端给后端发送一个请求，后端给前端一个响应）

②ajax的核心对象：

XMLHttpRequest

③ajax的基本步骤（前后端交互的基本步骤）

 // 1、创建一个XMLHttpRequest
    let xhr = new XMLHttpRequest();
    // 2、设置请求方式，请求地址，是否异步
    xhr.open("get或者post", "url?跟get请求的参数", true);
    // 3、设置 后端响应回来后的前端要完成功能。
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 5、接收后端传来的数据，实现前端的功能
            xhr.responseText
        }
    }
    // 如果是post请求，需要设置请求头(前端发给后端数据（请求参数）的类型)
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
// 4、发送请求
// xhr.send(如果是post请求，那么请求参数写在此处);

④XMLHttp对象的属性和方法：

属性：

    1、readyState：从请求到响应回来的整个过程的状态（进行到哪一步了）

            0： 创建对象后

            1：调用open方法后

            2：后端接收到了前端的请求

            3、后端正在处理中

            4、后端处理完毕

    2、status：响应（结果）的状态

      200：表示结果正确

      500：后端处理过程中出问题了

      404：资源未找到（前端把路径写错了）

    3、onreadystatechange(事件属性)：

    触发时机：当readyState属性发生改变（1->2，2->3, 3->4)时触发

    4、responseText:

      后端响应回来的数据，是字符串格式。

方法：

  1、open()：

  2、send():

  3、setRequestHeader():设置请求头，可以设置官方的键，也可以自定义。

⑤请求方式：get和post的区别

  请求方式：特指前端给后端发送数据（请求参数）的方式。

   get：

     数据在何处携带：url后面。

     特点：安全性不好，传输速度快，数据量小。

   post：

     数据在何处携带：请求体

     特点：安全性好，传输速度慢，数据量大

⑥面试题：

当问到两个知识点的区别时，有个通用（万能的）表达方式：

  第一、先说相同点

  第二、再说不同点：一定要分维度（角度）

=====================如：请问get和post的区别：==============================

 第一、相同点：都是请求方式，也就是请求参数的传递方式（携带数据的方式）。

 第二、不同点：

   1、本质（携带在哪）  get：url后面   post：请求体里

   2、安全性：  get：不好   post：好

   3、数据量：  get：小，4KB    post：大

   4、传输速度：get：快    post：慢

   5、应用场景：  get： post：

⑦接口文档：

 完成前后端对接的文档，接口文档中至少要表述的信息：

    1、请求方式： 2、请求地址： 3、请求参数：  4、响应数据：

二.可变宽度（带缝隙）瀑布流 

        // 每张图片的宽度
        let width = 200;
        // 窗口的宽度
        let parentWidth = document.body.offsetWidth;
        // 列数
        let colCount = parseInt(parentWidth/width);   
        // 缝隙     
        let cranny = (parentWidth%width)/(colCount+1);
        // 数组：保存着每一列的高度
        let arr = new Array(colCount);
        arr.fill(0);        
        // 创建图片标签
        function createImg(){
            for(var i=0;i<70;i++){
                let imgDom = document.createElement("img");
                imgDom.src=`./img/${i+1}.jpg`;
                imgDom.style.cssText = `
                    position:absolute;
                    width:${width}px;
                `;
                document.body.appendChild(imgDom);
            }
        }
        // 设置图片的left和top
        function updatePos(imgDoms){            
            for(var i=0;i<imgDoms.length;i++){
                // 列下标；
                let colIndex = i%colCount;
                imgDoms[i].style.cssText += `
                    left:${colIndex*width+(colIndex+1)*cranny}px;
                    top:${arr[colIndex]}px;
                `;
                arr[colIndex] += imgDoms[i].offsetHeight+cranny;
            }
        }
        let imgDoms;
        window.onload = function(){
            // 1、创建图片的dom
            createImg();            
            imgDoms = document.body.querySelectorAll("img");
            // 2、设置图片的位置（left和top）；
            imgDoms[imgDoms.length-1].onload = function(){
                updatePos(imgDoms);
            }
        }
        // onresize：当浏览器窗口的大小发生变化时，触发事件。
        window.onresize = function(){
            parentWidth = document.body.offsetWidth;
            colCount = parseInt(parentWidth/width);        
            cranny = (parentWidth%width)/(colCount+1);
            arr = new Array(colCount);
            arr.fill(0);
            updatePos(imgDoms);
        }

三.ajax的瀑布流（连嗨购接口）

<!-- 接口文档：
请求方式：get
请求地址：http://118.178.238.19:3001/api/pro/list
请求参数：
      count：页码
      limitNum：每页的条数
响应数据：
{
    "code": "200",
    "message": "获取商品分页列表数据",
    "data": [
        {
            "img1": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg",
        },
        {
            "img1": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg",
        }
    ]
}
-->
        // 每张图片的宽度
        let width = 200;
        // 窗口的宽度
        let parentWidth = document.body.offsetWidth;
        // 列数
        let colCount = parseInt(parentWidth/width);   
        // 缝隙     
        let cranny = (parentWidth%width)/(colCount+1);

        // 数组：保存着每一列的高度
        let arr = new Array(colCount);
        arr.fill(0);   
               
        // 创建图片标签
        function createImg(imgs){
            for(var i=0;i<imgs.length;i++){
                let imgDom = document.createElement("img");
                imgDom.src=imgs[i];
                imgDom.style.cssText = `
                    position:absolute;
                    width:${width}px;
                `;
                document.body.appendChild(imgDom);
            }
        }
        // 设置图片的left和top
        function updatePos(imgDoms){            
            for(var i=0;i<imgDoms.length;i++){
                // 列下标；
                let colIndex = i%colCount;
                imgDoms[i].style.cssText += `
                    left:${colIndex*width+(colIndex+1)*cranny}px;
                    top:${arr[colIndex]}px;
                `;
                arr[colIndex] += imgDoms[i].offsetHeight+cranny;
            }
        }

        let imgDoms;
        window.onload = function(){
            // 1、发送请求，获取图片（路径）
            let xhr = new XMLHttpRequest();
            xhr.open("get","http://118.178.238.19:3001/api/pro/list?count=1&limitNum=50");
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status==200){
                    // xhr.responseText
                    let obj = JSON.parse(xhr.responseText);
                    if(obj.code=="200"){
                        let imgs = obj.data.map(item=>item.img1);
                        console.log("imgs",imgs);
                        // 1、创建图片的dom
                        createImg(imgs);            
                        imgDoms = document.body.querySelectorAll("img");
                        // 2、设置图片的位置（left和top）；
                        imgDoms[imgDoms.length-1].onload = function(){
                            updatePos(imgDoms);
                        }
                    }
                }
            }
            xhr.send();
        }
        // onresize：当浏览器窗口的大小发生变化时，触发事件。
        window.onresize = function(){
            parentWidth = document.body.offsetWidth;
            colCount = parseInt(parentWidth/width);        
            cranny = (parentWidth%width)/(colCount+1);
            arr = new Array(colCount);
            arr.fill(0);
            updatePos(imgDoms);
        }

四.调用封装的ajax：ajax的瀑布流（连嗨购接口）

ajaxTools2301.js
// 封装ajax：
// 功能：发送请求获取数据
// 参数：
//   请求方式：
//   请求地址：
//   请求参数：
//   响应回来的数据怎么处理
//   是否异步
// 返回值: 
//   可以返回XMLHttpRequest对象。
//   注意：后端响应回来的数据，肯定不能直接return，因为，ajax的交互是异步的。
function ajax2301(method, url, params, cb, isAsync = true) {
  // 1、发送请求，获取图片（路径）
  let xhr = new XMLHttpRequest();
  let urlAndParams = url;
  if (method.toLowerCase() == "get") {
    urlAndParams += "?" + params
  }
  xhr.open(method, urlAndParams, isAsync);

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      // xhr.responseText
      let obj = JSON.parse(xhr.responseText);
      cb(obj);
    }
  }
  if (method.toLowerCase() == "post") {
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    xhr.send(params);
  } else {
    xhr.send();
  }
  return xhr;
}
// method="get", url, params, cb, isAsync = true
function ajax2302(obj) {
  // 定义参数的默认值
  let defaultObj = {
    method: "get",
    url: "#",
    params: null,
    cb: null,
    isAsync: true
  }
  // 把传入的对象和默认对象合并
  for (let key in defaultObj) {
    obj[key] && (defaultObj[key] = obj[key]);
  }
  // 把参数变成字符串形式：
  let paramsStr = "";
  for (let key in defaultObj.params) {
    paramsStr += `${key}=${defaultObj.params[key]}&`
  }
  paramsStr = paramsStr.substring(0, paramsStr.length - 1);
  // 1、发送请求，获取图片（路径）
  let xhr = new XMLHttpRequest();
  let urlAndParams = defaultObj.url;
  if (defaultObj.method.toLowerCase() == "get") {
    urlAndParams += "?" + paramsStr
  }
  xhr.open(defaultObj.method, urlAndParams, defaultObj.isAsync);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      // xhr.responseText
      let data = JSON.parse(xhr.responseText);
      defaultObj.cb(data);
    }
  }
  if (defaultObj.method.toLowerCase() == "post") {
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    xhr.send(paramsStr);
  } else {
    xhr.send();
  }
  return xhr;
}


 <script src="./js/ajaxTools2301.js"></script>
    <script>
        // 每张图片的宽度
        let width = 200;
        // 窗口的宽度
        let parentWidth = document.body.offsetWidth;
        // 列数
        let colCount = parseInt(parentWidth/width);   
        // 缝隙     
        let cranny = (parentWidth%width)/(colCount+1);
        // 数组：保存着每一列的高度
        let arr = new Array(colCount);
        arr.fill(0);                
        // 创建图片标签
        function createImg(imgs){

            for(var i=0;i<imgs.length;i++){

                let imgDom = document.createElement("img");
                imgDom.src=imgs[i];
                imgDom.style.cssText = `
                    position:absolute;
                    width:${width}px;
                `;
                document.body.appendChild(imgDom);
            }
        }
        // 设置图片的left和top
        function updatePos(imgDoms){            
            for(var i=0;i<imgDoms.length;i++){
                // 列下标；
                let colIndex = i%colCount;
                
                imgDoms[i].style.cssText += `
                    left:${colIndex*width+(colIndex+1)*cranny}px;
                    top:${arr[colIndex]}px;
                `;
                arr[colIndex] += imgDoms[i].offsetHeight+cranny;               
            }

        }
        let imgDoms;
        window.onload = function(){
            let params= "count=1&limitNum=50";
            // params = {
            //     count:1,
            //     limitNum:50
            // }
            ajax2301("get","http://118.178.238.19:3001/api/pro/list",params,function(obj){

                if(obj.code=="200"){
                    let imgs = obj.data.map(item=>item.img1);
                    console.log("imgs",imgs);
                    // 1、创建图片的dom
                    createImg(imgs);            
                    imgDoms = document.body.querySelectorAll("img");
                    // 2、设置图片的位置（left和top）；
                    imgDoms[imgDoms.length-1].onload = function(){
                        updatePos(imgDoms);
                    }
                }
            })            
        }
        // onresize：当浏览器窗口的大小发生变化时，触发事件。
        window.onresize = function(){
            parentWidth = document.body.offsetWidth;
            colCount = parseInt(parentWidth/width);        
            cranny = (parentWidth%width)/(colCount+1);
            arr = new Array(colCount);
            arr.fill(0);
            updatePos(imgDoms);
        }