前端知識 梳理

1. ajax 的五個步驟

1.建立xmlHttpRequest對象

if ( window.XMLHttpRequest ) {

    xmlHttp = new XMLHttpRequest();

    if( xmlHttp.overrideMimeType ) {

        xmlHttp.overrideMimeType("text/xml");

    }

} else if ( window.ActiveXobject ) {

    var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];

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

        try {

            xmlHttp = new ActiveXobject(activeName[i]);

            break;

        } catch(e) {}

    }

}

if (!xmlHttp) {

    alert("創(chuàng)建xmlhttprequest對象失敗");

} else {}

2.設置回調函數(shù)

   xmlHttp.onreadystatechange = callback;

   function callback(){}

3.使用OPEN方法與服務器建立連接 xmlHttp.open("get","ajax?name="+ name,true)
此步注意設置http的請求方式(post/get),如果是POST方式,注意設置請求頭信息xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

4.向服務器端發(fā)送數(shù)據(jù)
xmlHttp.send(null);

如果是POST方式就不為空

5.在回調函數(shù)中針對不同的響應狀態(tài)進行處理

  if (xmlHttp.readyState == 4){       //判斷交互是否成功

      if (xmlHttp.status == 200){         //獲取服務器返回的數(shù)據(jù)         //獲取純文本數(shù)據(jù)

            var responseText =xmlHttp.responseText;

           document.getElementById("info").innerHTML = responseText;

      }

   }

2. 點擊a標簽后的步驟

  1. 檢查a標簽里的URL是否為空。
  2. 瀏覽器檢查緩存,如果請求對象存在緩存并且能夠被使用,直接跳到第9步。
  3. 瀏覽器詢問操作系統(tǒng)提供服務器的IP地址。
  4. 操作系統(tǒng)進行DNS查看并將IP地址回復給到瀏覽器。
  5. 瀏覽器打開到服務器的TCP連接(對于HTTPS這個步驟要復雜得多)。
  6. 瀏覽器通過TCP連接發(fā)送HTTP請求。
  7. 瀏覽器接收到HTTP響應,且可以關閉TCP連接,或者將其重新用于其他請求
  8. 瀏覽器檢查響應是否是重定向(3xx結果狀態(tài)代碼)、授權請求(401)、錯誤(4xx和5xx)等;這些處理方式與正常響應(2xx)不同。
  9. 如果可緩存,則響應存儲在緩存中
  10. 瀏覽器解碼響應(例如,如果它是gzipped)
  11. 瀏覽器決定如何處理響應(例如,它是一個HTML頁面,一個圖像,還是一個聲音剪輯?)
  12. 瀏覽器呈現(xiàn)響應,或為無法識別的類型提供下載對話框

3. 擴展運算符(spread)是三個點(...)

console.log(...[1,2,3])
// 1 2 3

Math.max(...[14, 3, 77])
//獲得元素最大值,簡化代碼

4. Array.from把類似數(shù)組的對象的值轉化數(shù)組

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.from還可以接受第二個參數(shù),作用類似于數(shù)組的map方法,用來對每個元素進行處理,將處理后的值放入返回的數(shù)組。

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

5.數(shù)組實例的 flat(),flatMap()

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

6.數(shù)組去重用Set

function dedupe(array) {
  return Array.from(new Set(array));
}

dedupe([1, 1, 2, 3]) // [1, 2, 3]
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容