JS--Day28 (Ajax-Beispiel, Ajax-Paket)

1. Ajax-Rezension

①Die Rolle von Ajax:

 Vervollständigen Sie die Front-End- und Back-End-Interaktion (das Front-End sendet eine Anfrage an das Back-End und das Back-End sendet eine Antwort an das Front-End).

②Das Kernobjekt von Ajax:

XMLHttpRequest

③Grundlegende Schritte von Ajax (grundlegende Schritte der Front-End- und Back-End-Interaktion)

 // 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请求，那么请求参数写在此处);

④Attribute und Methoden des XMLHttp-Objekts:

Attribute:

    1. readyState: der Status des gesamten Prozesses von der Anfrage bis zur Antwort (welcher Schritt gerade ausgeführt wird)

            0: Nach dem Erstellen des Objekts

            1: Nach dem Aufruf der open-Methode

            2: Das Backend hat die Anfrage vom Frontend erhalten

            3. Das Backend wird verarbeitet

            4. Die Backend-Verarbeitung ist abgeschlossen

    2. Status: der Status der Antwort (Ergebnis)

      200: Zeigt an, dass das Ergebnis korrekt ist

      500: Bei der Backend-Verarbeitung ist ein Problem aufgetreten

      404: Ressource nicht gefunden (das Frontend hat den falschen Pfad geschrieben)

    3. onreadystatechange (Ereignisattribut):

    Trigger-Timing: Trigger, wenn sich das readyState-Attribut ändert (1->2, 2->3, 3->4)

    4、responseText:

      Die vom Backend zurückgegebenen Daten liegen im String-Format vor.

Methode:

  1、open()：

  2、send():

  3. setRequestHeader(): Legen Sie den Anforderungsheader fest, Sie können den offiziellen Schlüssel festlegen oder ihn anpassen.

⑤Request-Methode: Der Unterschied zwischen Get und Post

  Anforderungsmethode: Bezieht sich speziell auf die Art und Weise, wie das Front-End Daten (Anforderungsparameter) an das Back-End sendet.

   erhalten:

     Wohin die Daten übertragen werden: hinter der URL.

     Merkmale: schlechte Sicherheit, schnelle Übertragungsgeschwindigkeit und geringes Datenvolumen.

   Post:

     Wohin werden die Daten übertragen: Anfragetext

     Eigenschaften: gute Sicherheit, langsame Übertragungsgeschwindigkeit, große Datenmenge

⑥Interviewfragen:

Auf die Frage nach dem Unterschied zwischen zwei Wissenspunkten gibt es einen allgemeinen (universellen) Ausdruck:

  Sagen Sie zunächst dasselbe

  Lassen Sie uns zweitens über den Unterschied sprechen: Es muss in Dimensionen (Winkel) unterteilt werden.

======================= Zum Beispiel: Darf ich nach dem Unterschied zwischen get und post fragen: ============== ======== ==========

 Erstens derselbe Punkt: Sie sind alle Anforderungsmethoden, dh die Übertragungsmethode für Anforderungsparameter (die Methode zum Übertragen von Daten).

 Zweitens der Unterschied:

   1. Essenz (wohin man sie trägt): hinter dem URL-Beitrag: im Anfragetext

   2. Sicherheit: get: schlechter Beitrag: gut

   3. Datenvolumen: get: klein, 4 KB post: groß

   4. Übertragungsgeschwindigkeit: get: schnell post: langsam

   5. Anwendungsszenarien: get: post:

⑦ Schnittstellendokument:

 Vervollständigen Sie die Dokumente für das Frontend- und Backend-Docking und mindestens die Informationen, die in den Schnittstellendokumenten ausgedrückt werden sollen:

    1. Anfragemethode: 2. Anfrageadresse: 3. Anfrageparameter: 4. Antwortdaten:

2. Wasserfallströmung mit variabler Breite (mit Lücke). 

        // 每张图片的宽度
        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);
        }

3. Ajax-Wasserfallfluss (verbunden mit der Hibuy-Schnittstelle)

<!-- 接口文档：
请求方式：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);
        }

4. Rufen Sie den gekapselten Ajax auf: Ajax-Wasserfallfluss (verbunden mit der Hi-Buy-Schnittstelle)

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);
        }