JS基礎回顧3

時間 2019-11-18

原文原文鏈接

AJAX

AJAX：（異步JavaScript和XML），是指一種建立交互式網頁應用的網頁開發技術

異步：javascript語言是一門「單線程」的語言，javascript就像一條流水線，僅僅是一條流水線而已，要麼加工，要麼包裝，不能同時進行多個任務和流程,不管如何，js作事情的時候都是隻有一條流水線（單線程），同步和異步的差異就在於這條流水線上各個流程的執行順序不一樣。

區別：
- 同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務
- 異步任務指的是，不進入主線程、而進入"任務隊列"的任務，只有等主線程任務執行完畢，"任務隊列"開始通知主線程，請求執行任務，該任務纔會進入主線程執行。

xml可擴展的標記語言,全部的標籤都是自定義的,保存數據。(json更好的取代xml)
ajax請求步驟

//1.新建ajax對象
    let ajax = new XMLHttpRequest();
    //2.ajax對象的open()
    //open(請求方式get/post,接口地址,是否異步true異步/false同步)
    ajax.open('get','http://localhost/JS1909/Day%2021/5.phparray.php',true);

    //3.ajax對象的send()
    ajax.send();
    // ajax.readyState:就緒狀態--0(初始化) 1(請求創建) 2(發送完成) 3(解析) 4(完成)
    // 0：請求初始化（尚未調用 open()）。
    // 1：請求已經創建，可是尚未發送（尚未調用 send()）。
    // 2：請求已發送，正在處理中（一般如今能夠從響應中獲取內容頭）。
    // 3：請求在處理中；一般響應中已有部分數據可用，可是服務器尚未完成響應的生成。
    // 4：響應已完成；您能夠獲取並使用服務器的響應了。


    //4.ajax對象的事件--onreadystatechange監聽就緒狀態是否完成。
    ajax.onreadystatechange=function(){
        if(ajax.readyState===4){//請求完成
        //ajax.responseText:ajax請求返回的內容就被存放到這個屬性下面,返回獲取的內容,string   
            console.log(ajax.responseText);
            console.log(JSON.parse(ajax.responseText));
        }
    }


    //注意：
    //異步：ajax的事件監聽，能夠放到open或者send上面。
    //同步：無需ajax的事件監聽，能夠直接在send()以後獲取數據。

獲取各類數據類型

let ajax=new XMLHttpRequest();
    //ajax.open('get','http://localhost/JS1909/Day%2022/app/data.xml',true);
    //ajax.open('get','http://localhost/JS1909/Day%2022/app/data.json',true);
    //ajax.open('get','http://localhost/JS1909/Day%2022/app/data.js',true);
    ajax.open('get','http://localhost/JS1909/Day%2022/app/data.html',true);
    ajax.send();
    ajax.onreadystatechange=function(){
        if(ajax.readyState===4){
            //console.log(ajax.responseXML);//返回xml文檔
            //1.xml文檔
            // let xmldoc=ajax.responseXML;
            // console.log(xmldoc.querySelector('bookname').innerHTML);

            //2.json文件
            // let jsondata=ajax.responseText;
            // console.log(JSON.parse(jsondata));

            //3.js文件
            // let jsdata=ajax.responseText;
            // console.log(jsdata);

            //4.html文件
            // let htmldata=ajax.responseText;
            // console.log(htmldata);

            //5.經常使用的數據文件--.php .jsp .xml

            


        }
    }

ajax局部更新

//局部更新：經過定時器不斷髮送請求。
    //刷新：全局更新。
    setInterval(function () {
        let ajax = new XMLHttpRequest();
        ajax.open('get', 'http://localhost/JS1909/Day%2022/php/news.php', true);
        ajax.send();
        ajax.onreadystatechange = function () {
            if (ajax.readyState === 4) {
                console.log(ajax.responseText);
                let newsdata = JSON.parse(ajax.responseText); //數組
                let strhtml = '<ul>';
                for (let value of newsdata) {
                    strhtml += `
                    <li>
                        <a href="#">${value.title}</a><span>${value.date}</span>
                    </li>
                `;
                }
                strhtml += '</ul>';
                document.querySelector('.news').innerHTML = strhtml;
            }
        }
    }, 1000);


    //network:先後端交互最核心的信息面板。

前端發送數據

form+submit+name將表單的數據給後端--適合表單
- 後端直接經過name值獲取表單裏面的數據
- 設置action和method
- action:數據提交給的頁面地址
- method:數據提交的方式,默認是get方式
ajax方式:表單中的某個值，非表單的數據
- get傳輸數據:將數據經過?和&符號拼接在地址欄的後面
- post傳輸數據：直接放到send方法裏面

post和get的區別

get:不安全,數據會暴露在地址欄,長度有限制
post:安全性高，經過頭文件傳輸,長度能夠自由設置
get和post：發送數據的方式不同，get拼接在地址欄的後面，post經過設置請求頭實現,將數據放到send裏面

http狀態碼

ajax.status:獲取http的狀態碼
200 OK 請求已成功，請求所但願的響應頭或數據體將隨此響應返回。出現此狀態碼是表示正常狀態。
304 Not Modified 文檔的內容（自上次訪問以來或者根據請求的條件）並無改變，則服務器應當返回這個狀態碼。
404 Not Found請求失敗，請求所但願獲得的資源未被在服務器上發現。
403 Forbidden 服務器已經理解請求，可是拒絕執行它。
301 Moved Permanently 被請求的資源已永久移動到新位置。
302 Move Temporarily請求的資源臨時從不一樣的 URI響應請求。
501 Not Implemented 服務器不支持當前請求所須要的某個功能。
502 Bad Gateway 做爲網關或者代理工做的服務器嘗試執行請求時，從上游服務器接收到無效的響應。
503 Service Unavailable 因爲臨時的服務器維護或者過載，服務器當前沒法處理請求javascript

容錯處理
try...catch...finally
先執行 try { ... }的代碼,若是try裏面的代碼出錯，轉而執行 catch (e) { ... }代碼，最後執行 finally { ... }代碼

// try{
    //     alert(a);
    // }catch(e){//e:try裏面的報錯信息。
    //     alert('catch');
    //     alert(e);//ReferenceError: a is not defined
    // }finally{
    //     alert('個人代碼必定會觸發，無論try仍是catch有錯');
    // }

JSON.parse和eval的區別

JSON.parse():將json格式的字符串轉換成對象(數組for...of和對象for...in),具備json格式檢測功能
eval:方法不會去檢查數據是否符合json的格式，同時若是給的字符串中存在js代碼eval也會一併執行，比較而言，eval方法是很危險的

跨域

跨域的報錯信息

Access to XMLHttpRequest at 'http://api.k780.com/?app=weather.future&weaid=hangzhou&&appkey=43633&sign=3050bb4c62ee490c994d41b450b65ba1&format=json' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

爲何產生跨域：瀏覽器的同源策略
同源策略：同源策略是瀏覽器最核心也最基本的安全功能.

同源策略阻止從一個域上加載的腳本獲取或操做另外一個域上的文檔屬性。也就是說，受到請求的 URL 的域必須與當前Web頁面的域相同。同源策略是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，則瀏覽器的正常功能可能都會受到影響。能夠說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。

哪些狀況會出現跨域

端口不一樣。
協議不一樣http/https
域名和域名對應的ip地址 127.0.0.1本地ip localhost本地域名
一級域名和二級域名。
域名徹底不一樣。

解決跨域

後端代理
- 後端不存在跨域，由於後端脫離瀏覽器。後端先獲取接口的數據，傳給前端
```
// let ajax1 = new XMLHttpRequest();
// ajax1.open('get','http://localhost/JS1909/Day%2023/joke.php',true);
// ajax1.send();
// ajax1.onreadystatechange = function () {
// if (ajax1.readyState === 4) {
// console.log(JSON.parse(ajax1.responseText));
// document.body.innerHTML=JSON.parse(ajax1.responseText).content;
// }
// }

- cors(xhr2：xhr升級版):跨域資源共享

let ajax2 = new XMLHttpRequest();
ajax2.open('get', 'http://127.0.0.1/JS1909/Day%2022/php/taobaodata.php', true);//ip和域名跨域
ajax2.send();
ajax2.onreadystatechange = function () {
    if (ajax2.readyState === 4) {
       console.log(ajax2.responseText);
    }
}

- jsonp
  - 原理：script裏面src屬性 不存在跨域
  - jsonp:json with padding  json數據填充到一個函數裏面
    - script裏面src屬性 不存在跨域。
    - jsonp請求方式採用的是get方式,回調函數。
    - jsonp:適合第三方接口的數據格式就是jsonp格式的。
#### 回調函數
1. 回調函數(高階函數):函數作參數，傳遞給另一個函數。callback
2. 爲何使用回調函數
- js代碼正常狀況下按照順序執行的。回調函數解決順序問題。(同步順序，異步順序)
- 函數是對象，函數能夠當作參數被傳遞
#### promise
- Promise:是異步編程的一種解決方案，比傳統的回調函數和事件要更合理，更強大
1. 三種狀態：pending（進行中）/resolved（完成）/rejected（失敗）
2. promise的api
- Promise.resolve()的做用將現有對象轉爲Promise對象resolvedl
- Promise.reject()也是返回一個Promise對象,狀態爲rejected
- then()成功的回調
- catch()發生錯誤的回調函數
- Promise.all()適合用於全部的結果都完成了纔去執行then（）成功的操做
- Promise.race()的做用也是同時執行多個實例，只要有一個實例改變狀態，Promise就改成那個實例所改變的狀態
#### cookie
- Cookie又叫會話跟蹤技術是由Web服務器保存在用戶瀏覽器上的小文本文件，它能夠包含相關用戶的信息
- cookie的特色
  - 禁用Cookie後，沒法正常註冊登錄
  - cookie是與瀏覽器相關的，不一樣瀏覽器之間所保存的cookie也是不能互相訪問的
  - Cookie能夠被刪除。由於每一個cookie都是硬盤上的一個文件
  - cookie安全性不夠高-xss攻擊
- localStorage sessionStorage cookie的區別
  - 首先總的來講，三者都是用於持久化數據存儲的手段，都是存儲在瀏覽器端，且同源（協議，端口號，都域名相同）
  - localStorage和sessionStorage都是Web存儲，大小5M左右，徹底存儲在客戶端，它們是由於本地存儲數據而存在
  - cookies也是存儲在瀏覽器端的，大小不超過4k，由Web服務器保存在用戶瀏覽器上的小文本文件
  - localStorage屬於永久性存儲，而sessionStorage屬於當會話結束(關閉瀏覽器)的時候，存儲的值會被清空，而cookie是經過設置過時時間來存儲的

- 添加cookie

// document.cookie=‘key = value ; expires=過時時間’;
// document.cookie='name=zhangsan';
// document.cookie='age=100';

- 獲取cookie

addcookie('name','zhangsan',10);
addcookie('age','100',10);
addcookie('sex','男',10);
//獲取cookie
// document.cookie
//alert(document.cookie);//name=zhangsan; age=100; sex=男

- 刪除cookie

// 將cookie的過時時間設爲一個過去的時間。
function delcookie(key){
    addcookie(key,'',-1);
}

delcookie('age');
delcookie('sex');

#### 閉包

- 瀏覽器垃圾回收機制的原理：變量使用完成，變量被銷燬，函數一旦執行完成，函數內部的變量就不存在了，被銷燬了
- 閉包的概念：函數嵌套函數(定義在一個函數內部的函數)。對於函數內部的變量造成閉合的做用域

// (function(){//閉包的寫法：對於函數內部的變量造成閉合的做用域。
//     var a=1;
// })();

- 閉包的造成：與變量的做用域以及變量的生存週期密切相關，變量的做用域，就是指變量的有效範圍
- js對變量生命週期的規則
  - 生存週期對於全局變量是永久的，除非咱們主動銷燬這個全局變量。(垃圾回收機制)
  - 而對於在函數內用 var 關鍵字聲明的局部變量來講，當退出函數時，它們都會隨着函數調用的結束而被銷燬
- 閉包就是可以讀取其餘函數內部變量的函數。(函數嵌套函數,定義在一個函數內部的函數)
- 閉包的特色
  - 在一個函數內部定義另一個函數，而且返回內部函數或者當即執行內部函數
  - 內部函數能夠讀取外部函數定義的局部變量
  - 讓局部變量始終保存在內存中。也就是說，閉包可使得它誕生環境一直存在
- 閉包的弊端：函數內部的變量始終保存在內存中，形成瀏覽器的垃圾回收機制失敗。常駐在內存中，影響性能。手動銷燬進而會引發IE瀏覽器的內存泄漏
- 內存泄漏：每個變量都會綁定一個使用次數的計數器，當這個變量的使用次數爲0，垃圾回收機制將其回收，若是說垃圾回收機制又沒法回收，稱之爲內存泄漏。

#### 原型鏈
- 原型鏈:實例對象和原型之間的鏈接
- prototype屬性：每個函數都有一個prototype原型屬性
- __proto__屬性：每個對象都有一個__proto__原型屬性,指向構造函數的原型
- instanceof:判斷一個對象是不是一個構造函數（類）的實例,返回布爾值
- constructor:構造函數，js的屬性，獲取實例對象的構造函數
- hasOwnProperty():看是否是對象自身下面的屬性， 只在屬性存在於實例中時才返回 true。 (不是經過原型鏈繼承的)
- in操做符，和hasOwnProperty同樣的意義，包括繼承的
- typeof instanceof constructor toString 都能進行類型檢查，最好的是toString

Object.prototype.toString.call(3) // "[object Number]"
Object.prototype.toString.call('') // "[object String]"
Object.prototype.toString.call(true) // "[object Boolean]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(Math) // "[object Math]"
Object.prototype.toString.call({}) // "[object Object]"
Object.prototype.toString.call([]) // "[object Array]"php

```html